reveal.js: Themes, Export und der Vergleich mit den Alternativen
reveal.js ist das quelloffene HTML-Präsentationsframework mit 71,9k GitHub-Sternen – du erstellst Folien in HTML oder Markdown und präsentierst sie in jedem Browser. Hier ist ein ehrlicher Leitfaden: wie Themes, Templates und Beispiele funktionieren, wie sich der Export nach PDF und PowerPoint wirklich verhält, wie es im Vergleich zu Slidev und Marp abschneidet und wo ein agent-native Design-Workspace ins Spiel kommt.
Wenn du Code schreibst und einen Vortrag halten musst, bist du wahrscheinlich schon auf reveal.js gestoßen. Es ist das Open-Source-Framework hinter einem großen Teil der Entwicklerkonferenz-Folien, die du gesehen hast: Du verfasst jede Folie in HTML oder Markdown, und sie läuft als Webseite in jedem Browser — mit Themes, Übergängen, Fragment-Animationen, Sprechernotizen und nativem PDF-Export von Haus aus. Mit 71,9k Sternen auf GitHub und einer MIT-Lizenz ist es die Standardantwort auf „Wie mache ich Folien, ohne PowerPoint zu öffnen.“
Dieser Leitfaden ist eine ehrliche Landkarte dazu. Was reveal.js wirklich ist, wie Themes, Templates und Beispiele zusammenpassen, wie sich der Export nach PDF und PowerPoint tatsächlich verhält (es gibt einen Haken), wie es im Vergleich zu den anderen Open-Source-Kandidaten dasteht, und — der Teil, den die meisten Artikel auslassen — wo ein solches Framework aufhört, das richtige Werkzeug zu sein, und etwas anderes übernimmt. Wenn du deine Optionen für einen KI- und agentengestützten Folien-Workflow abwägst, hilft es, genau zu wissen, was reveal.js ist und was nicht.
Was reveal.js ist
reveal.js nennt sich selbst „The HTML Presentation Framework“, und diese Beschreibung ist präzise. Es ist keine App, die du öffnest und in der du herumklickst — es ist eine JavaScript-Bibliothek, die du in eine HTML-Datei einfügst. Jede Folie ist ein <section>-Element; verschachtelst du Sections, bekommst du vertikale Folien. Du gestaltest alles mit CSS, verdrahtest Übergänge und Fragmente über Data-Attribute und präsentierst, indem du die Seite im Browser öffnest. Weil die Ausgabe eine Webseite ist, kann alles, was das Web kann — Live-Code, eingebettetes Video, iframes, WebGL, deine eigenen Komponenten — auf einer Folie leben.
Der Kompromiss steht direkt in der Definition: Das ist ein Entwickler-Framework, kein GUI. Deine Werkzeuge sind ein Code-Editor und ein Browser, keine Leinwand mit Ziehpunkten. Genau deshalb lieben Entwickler es — volle Versionskontrolle, volle CSS-Kontrolle, kein proprietäres Dateiformat — und genau deshalb prallt ein Nicht-Programmierer daran ab. Es ist außerdem wirklich kostenlos: kein Konto, kein Wasserzeichen, kein Export-Limit, keine Preise pro Platz. Das HTML gehört dir.
Themes, Templates & Beispiele
Die meisten Suchanfragen rund um reveal.js drehen sich eigentlich darum, es gut aussehen zu lassen, ohne von Grund auf zu gestalten — hier also, wie die Teile zusammenpassen.
reveal.js-Themes sind der eingebaute Ausgangspunkt. Das Framework bringt eine Reihe fertiger Themes mit — Black, White, League, Beige, Sky, Night, Serif, Simple, Solarized und mehr —, die du durch das Ändern eines einzigen Stylesheet-Links wechselst. Ein Theme ist einfach CSS, also bedeutet ein „benutzerdefiniertes reveal.js-Theme“, eine Sass/CSS-Datei zu schreiben (oder zu forken), die deine Schriften, Farben und Überschriften-Stile festlegt. Es gibt keinen Theme-Store; du bearbeitest Stylesheets.
reveal.js-Templates und -Beispiele leben überwiegend in der Community statt in einer offiziellen Galerie. Das Repository liefert Beispiel-Decks, die Doku-Seite (revealjs.com) ist selbst ein reveal.js-Deck, dessen Quelltext du lesen kannst, und GitHub ist voll von Starter-Templates, Boilerplates und Framework-Wrappern. Wenn du nach „reveal js examples“ suchst, ist das aussagekräftigste der Quelltext der offiziellen Seite selbst — er demonstriert nahezu jedes Feature im Einsatz. Der Haken für Einsteiger: Ein „Template“ ist hier ein Code-Repository zum Klonen und Bearbeiten, keine Designdatei, die du ausfüllst.
Export nach PowerPoint & PDF
PDF-Export ist ein erstklassiges, eingebautes Feature und funktioniert gut. Hänge ?print-pdf an die URL deines Decks, öffne den Druckdialog deines Browsers, wähle „Als PDF speichern“, und reveal.js fließt jede Folie auf ihre eigene Seite um. Das ist der saubere, unterstützte Weg — das PDF, das du bekommst, sieht genau wie deine Folien aus.
Der Export von reveal.js nach PowerPoint ist die Stelle, an der Erwartungen gemanagt werden müssen. Es gibt kein natives „Als .pptx speichern“, das eine bearbeitbare PowerPoint-Datei erzeugt. Der praktische Weg ist die Umwandlung PDF → PPTX, und diese Umwandlung ist verlustbehaftet: Jede Folie kommt in PowerPoint als flaches Bild an, nicht als bearbeitbare Textfelder, Formen und Layouts. Wenn also jemand nachgelagert dein Deck in PowerPoint öffnen und bearbeiten muss — eine Überschrift neu tippen, ein Diagramm umgestalten, einen Aufzählungspunkt umfließen —, ist reveal.js nicht das Werkzeug, das ihm das gibt. Es ist dafür gebaut, aus dem Browser präsentiert zu werden, und seine bearbeitbare Quelle ist HTML, nicht .pptx. Das vorher zu wissen erspart dir eine schmerzhafte Überraschung an dem Tag, an dem ein Kollege nach „der PowerPoint“ fragt.
reveal.js-Alternativen und der Vergleich
reveal.js ist nicht der einzige Weg, Folien als Code zu schreiben. Die beiden nächstliegenden Open-Source-Alternativen — die, die Leute mit „reveal.js-Alternative“ meinen — sind Slidev und Marp, und es lohnt sich, ehrlich zu sein: Open Design sitzt in einer völlig anderen Schicht, statt frontal zu konkurrieren.
| Tool | Erstellung | Bearbeitbare .pptx | Templating | Lizenz |
|---|---|---|---|---|
| reveal.js | HTML oder Markdown | Nein (PDF→PPTX sind verlustbehaftete Bilder) | Themes = CSS/Sass; Community-Templates | MIT |
| Slidev | Markdown + Vue | Nein (Bild-/PDF-Export) | Vue-Komponenten + Themes | MIT |
| Marp | Nur Markdown | Nein (PDF/PPTX als Bilder) | Markdown-Themes (CSS) | MIT |
| Open Design | Beschreibe es deinem Agenten | Ja — bearbeitbare Ausgabe gegen ein Design-System | Eigene Deck-Vorlagen | Apache-2.0 |
Slidev ist der philosophisch engste Verwandte: Es setzt auf Markdown zuerst mit Vue-Komponenten darunter und tauscht so etwas von der rohen HTML-Freiheit von reveal.js gegen einen strukturierteren, entwicklerfreundlicheren Erstellungsfluss. Wenn du in der Vue/Vite-Welt lebst und Live-Coding-Demos willst, ist Slidev die naheliegende Wahl. Marp geht in die andere Richtung — nur Markdown, bewusst minimal, keine Komponenten —, was es zum schnellsten Weg macht, wenn deine Folien überwiegend Text sind und du nie über ein Framework nachdenken willst.
Alle drei sind Code-First-Frameworks mit derselben grundlegenden Form: Du schreibst das Deck, du präsentierst im Browser, und bearbeitbare PowerPoint-Ausgabe ist nicht wirklich der Punkt. Die Wahl zwischen ihnen geht vor allem darum, welche Erstellungsoberfläche du willst (rohes HTML, Vue-Markdown oder reines Markdown) — nicht um Fähigkeiten, die eines hat und die anderen fehlen.
Wo Open Design hineinpasst
Hier die ehrliche Grenze. reveal.js verlangt von dir, das Deck zu schreiben — jede Folie, im Code. Das ist ein Vorteil, wenn du handgemachte HTML-Kontrolle willst, und nichts hier ersetzt das, wenn das dein Ziel ist.
Open Design ist eine andere Schicht, und es ist ein Produkt, das wir machen, also lies dies mit diesem Hinweis im Hinterkopf. Es ist ein quelloffenes (Apache-2.0), lokal-orientiertes Agent-Native Design Workspace mit Bring-your-own-Key, das außerhalb des Coding-Agenten sitzt, den du ohnehin schon nutzt — Claude Code, Codex oder Cursor. Statt HTML von Hand zu verfassen, beschreibst du das gewünschte Deck, und der Agent generiert ein bearbeitbares gegen ein Design-System, sodass es markenkonform herauskommt und bearbeitbar bleibt, statt als gerendertes Artefakt einzufrieren. Open Design liefert außerdem eigene Deck-Vorlagen, mit denen du starten kannst.
Es ist kein Ersatz für reveal.js, wenn du Folien als Code mit voller CSS-Kontrolle schreiben willst — das ist reveal.js' Heimspiel, und darin ist es exzellent. Open Design ist für den Fall gedacht, in dem du lieber einen Agenten briefst, als Markup zu schreiben, in dem die Ausgabe über viele Decks hinweg zu einem Design-System passen soll und in dem du am Ende bearbeitbare Dateien willst, die dir gehören. Greif zu reveal.js, wenn das Deck der Code ist, den du schreibst; greif zu einem Workspace, wenn das Deck eine markenkonforme Ausgabe unter vielen ist, die ein Agent für dich produziert.
FAQ
Ist reveal.js kostenlos? Ja. reveal.js ist Open Source unter der MIT-Lizenz — kostenlos kommerziell nutzbar, ohne Konto, ohne Wasserzeichen und ohne Export-Limits. Du hostest das HTML selbst.
Wie füge ich ein reveal.js-Theme hinzu oder ändere es? reveal.js bringt eingebaute Themes mit (Black, White, League, Sky, Night, Serif und mehr), die du durch das Ändern eines Stylesheet-Links tauschst. Ein eigenes Theme bedeutet, eine CSS/Sass-Datei mit deinen eigenen Schriften und Farben zu schreiben oder zu forken — es gibt keinen Theme-Store zum Durchstöbern.
Kann ich reveal.js nach PowerPoint exportieren? Nicht in eine bearbeitbare .pptx. reveal.js exportiert sauber nach PDF (füge ?print-pdf hinzu und drucke aus dem Browser nach PDF). Dieses PDF in PowerPoint umzuwandeln ist möglich, aber verlustbehaftet — jede Folie landet als flaches Bild, nicht als bearbeitbarer Text und Formen. Wenn du eine bearbeitbare PowerPoint brauchst, ist reveal.js nicht die richtige Quelle.
reveal.js vs. Slidev vs. Marp — welches sollte ich nutzen? Alle drei sind Open Source, Code-First und MIT-lizenziert. Wähle reveal.js für rohe HTML-Kontrolle, Slidev für Markdown-plus-Vue-Komponenten (großartig für Live-Demos) und Marp für die einfachsten reinen Markdown-Decks. Keines zielt auf bearbeitbare PowerPoint-Ausgabe.
Muss ich programmieren können, um reveal.js zu nutzen? Im Grunde ja. reveal.js ist ein Entwickler-Framework — du arbeitest in einem Texteditor mit HTML, Markdown und CSS, nicht in einem Drag-and-drop-GUI. Wenn du stattdessen ein Deck in einfacher Sprache beschreiben willst, ist das die Lücke, die ein agent-natives Workspace wie Open Design füllt.
Das Fazit
reveal.js verdient seine 71,9k Sterne: Es ist ein kostenloser, MIT-lizenzierter, HTML-nativer Weg, Folien zu bauen, die überall dort laufen, wo ein Browser läuft — mit echten Themes, sauberem PDF-Export und voller CSS-Kontrolle. Geh nur mit offenen Augen hinein — es ist ein Framework, in dem du schreibst, keine App, durch die du klickst, und „Export in bearbeitbare PowerPoint“ ist nichts, was es kann. Wenn du Decks als Code verfassen willst, ist reveal.js (oder Slidev / Marp) ein großartiges Zuhause. Wenn du lieber ein Deck beschreibst und deinen Agenten ein bearbeitbares, markenkonformes generieren lässt, das dir gehört, dann übernimmt genau dort ein Agent-Native Design Workspace.