▣ Überblick
✍ Visueller Editor
WYSIWYG-Bearbeitung mit Formatierungswerkzeugen, Zweispalten-Layout, Callout-Boxen und Hintergrundbilder pro Folie.
📋 Referenten-Ansicht
Folien auf dem Beamer, Sprechernotizen und Steuerung auf einem zweiten Gerät – verbunden über WebSocket im lokalen Netz.
✦ KI-Generierung
Ganze Präsentationen automatisch erstellen lassen – mit Thema, Stil, Zielgruppe und Folienanzahl als Vorgaben.
🎨 Design-Vorlagen
20 fertige Farbpaletten mit passenden Schriftarten für schnelle visuelle Konsistenz.
📁 Präsentationen
Neue Präsentation anlegen
Klicke auf + Neu in der Kopfzeile. Es erscheint ein Dialog zur Eingabe des Namens. Der Name wird gleichzeitig als Dateiname auf dem Server verwendet.
Präsentation laden
Alle gespeicherten Präsentationen erscheinen in der linken Seitenleiste unter Präsentationen. Klick auf einen Eintrag lädt ihn in den Editor.
Speichern
Klicke auf Speichern oder drücke Strg+S. Der Titel oben im Editor kann jederzeit bearbeitet werden – er ist unabhängig vom Dateinamen.
Präsentation löschen
In der Seitenleiste erscheint beim Hovern über einen Eintrag ein ×-Button. Ein Klick darauf löscht die Präsentation nach einer Bestätigungsabfrage dauerhaft vom Server.
▣ Folien verwalten
Folie hinzufügen
Klicke auf + über der Folienliste in der Seitenleiste. Die neue Folie wird am Ende eingefügt und sofort ausgewählt.
Folie löschen
Klicke auf − (rot) neben der Folienliste. Eine Bestätigung ist erforderlich. Jede Präsentation benötigt mindestens eine Folie.
Folientitel
Das Textfeld Folientitel über dem Editor benennt die Folie in der Seitenleiste. Er erscheint nicht automatisch im Folieninhalt – der Titel ist nur zur Navigation.
Hintergrundbild
Das Feld Hintergrundbild-URL unter dem Folientitel setzt ein individuelles Hintergrundbild für diese eine Folie. Die URL muss direkt auf eine Bilddatei zeigen (jpg, png, webp usw.). Das Bild überlagert die Hintergrundfarbe des Themes.
Sprechernotizen
Im unteren Bereich des Editors befindet sich das Feld Sprechernotizen. Diese Texte sind in der Präsentation nicht sichtbar, erscheinen aber in der Referenten-Ansicht auf dem zweiten Gerät.
✍ Editor
Visueller Modus (WYSIWYG)
Der Standard-Modus zeigt den Folieninhalt so ähnlich an, wie er später präsentiert wird. Text kann direkt eingegeben und mit der Toolbar formatiert werden. Verhalten entspricht einem einfachen Texteditor – Zeilenumbrüche mit Enter, Listen über die Toolbar-Buttons.
HTML-Modus
Klicke auf </> HTML oben rechts in der Toolbar, um in den Quelltext-Modus zu wechseln. Hier kann der HTML-Code der Folie direkt bearbeitet werden. Der Modus eignet sich für komplexe Layouts, Tabellen oder das Einfügen von benutzerdefinierten Strukturen.
<html>, <head> oder <body>. Das Präsentations-CSS wird automatisch angewendet.
Vorschau
Die rechte Hälfte des Editors zeigt eine Echtzeit-Vorschau der aktiven Folie. Die Vorschau aktualisiert sich automatisch nach jeder Änderung (mit kurzer Verzögerung).
🔧 Toolbar-Elemente
Textformatierung
| Schaltfläche | Funktion |
|---|---|
| H1 H2 H3 | Überschriften der Ebenen 1–3. H1 eignet sich für Folientitel, H2 für Abschnitte, H3 für Unterpunkte. |
| ¶ | Normaler Absatz-Text. |
| B | Ausgewählten Text fett formatieren. |
| I | Ausgewählten Text kursiv formatieren. |
| • Liste | Aufzählungsliste einfügen. |
| 1. Liste | Nummerierte Liste einfügen. |
| code | Ausgewählten Text als Inline-Code formatieren. |
| 🔗 | Link einfügen. Es erscheint ein Dialog zur URL-Eingabe. |
Layouts & Boxen
| Schaltfläche | Beschreibung |
|---|---|
| ⇄ 2 Spalten | Zweispaltiges Raster einfügen. Beide Spalten können unabhängig voneinander mit beliebigem Inhalt gefüllt werden. |
| 📌 Info | Info-Box (blau/akzent) – für Hinweise, Fakten oder ergänzende Informationen. |
| ⚠ Achtung | Warn-Box (gelb) – für Warnungen, Einschränkungen oder wichtige Hinweise. |
| ✓ Hinweis | Erfolgs-Box (grün) – für positive Punkte, Empfehlungen oder Zusammenfassungen. |
<div class="callout callout-info"> mit optionalem <strong>-Titel und einem oder mehreren <p>-Absätzen.
🎨 Design & Vorlagen
Klicke auf 🎨 Vorlagen in der Kopfzeile, um die Vorlagen-Galerie zu öffnen. Ein Klick auf eine Karte überträgt sofort Hintergrundfarbe, Textfarbe, Akzentfarbe und Schriftart auf die aktuelle Präsentation.
Es stehen 20 vorgefertigte Themes zur Auswahl:
🌙 Dunkle Themes
Mitternacht, Nachtblau, Galaxy, Ozean, Polarlicht, Smaragd, Amethyst, Rosé, Feuer, Sonnenuntergang, Kaffee, Technik
☀ Helle Themes
Arktis, Monochrom, Silber, Himmel, Lavendel, Frühling, Kirsche, Wüste
bg, text und accent im JSON-Format nehmen beliebige CSS-Farbwerte (Hex, Gradient) entgegen.
⚙ Präsentationsoptionen
Die Einstellungsleiste erscheint unterhalb des Präsentationstitels, sobald eine Präsentation geöffnet ist.
Folienübergang
| Wert | Effekt |
|---|---|
| — Kein Übergang | Folie wechselt sofort ohne Animation. |
| Einblenden | Sanftes Ein-/Ausblenden (Standard). |
| Von rechts / links schieben | Folie gleitet horizontal ins Bild. |
| Von unten / oben schieben | Folie gleitet vertikal ins Bild. |
| Zoom ein / aus | Folie vergrößert oder verkleinert sich beim Erscheinen. |
| Kippen | 3D-Dreheffekt um die Y-Achse. |
| Weichzeichner | Folie blendet aus einem unscharfen Zustand ein. |
Schriftart
Wähle eine Schriftart für alle Folien. System (Standard) verwendet die Systemschrift des Geräts. Alle anderen Schriften werden von Google Fonts geladen und benötigen eine Internetverbindung bei der Präsentation.
Fortschrittsanzeige
| Wert | Darstellung |
|---|---|
| Balken | Dünner Balken am oberen Bildschirmrand, wächst mit jeder Folie. |
| Punkte | Kleine Punkte am unteren Rand, aktiver Punkt ist hervorgehoben. |
| Zahl | Aktuelle Foliennummer / Gesamtzahl, z. B. 3 / 12. |
| Kein | Keine Fortschrittsanzeige. |
Format (Seitenverhältnis)
| Wert | Beschreibung |
|---|---|
| Füllen | Folien füllen den gesamten Browserfenster aus. |
| 16:9 | Letterbox-Modus – Folien halten exakt 16:9, schwarze Balken füllen den Rest. |
| 4:3 | Klassisches Präsentationsformat, ebenfalls mit Letterbox. |
Ausrichtung
← Linksbündig – Folieninhalt beginnt links (Standard für textlastige Folien).
↔ Zentriert – Inhalt wird horizontal und vertikal zentriert (ideal für Titelfolien und einfache Aussagen).
Klick-Einblenden
Wenn aktiviert, werden Listenelemente und Folienelemente einzeln eingeblendet – jeweils per Mausklick, Leertaste oder Pfeiltaste. Erst wenn alle Elemente einer Folie sichtbar sind, wechselt der nächste Klick zur nächsten Folie.
Auto-Animation
Wenn aktiviert, erscheinen alle Elemente einer Folie leicht zeitversetzt von unten ins Bild (Stagger-Animation). Dieser Effekt ist deaktiviert, wenn gleichzeitig Klick-Einblenden aktiv ist.
▶ Präsentationsmodus
Klicke auf ▶ Präsentieren in der Kopfzeile. Die Präsentation öffnet sich in einem neuen Browser-Tab. Kein Server nötig – die Folien sind vollständig in der Seite eingebettet.
Steuerung im Präsentationsmodus
| Eingabe | Aktion |
|---|---|
| → ↓ Leertaste | Nächste Folie (oder nächstes Element bei Klick-Einblenden) |
| ← ↑ | Vorherige Folie |
| Pos1 | Erste Folie |
| Ende | Letzte Folie |
| F | Vollbildmodus ein/aus |
| Esc | Vollbild beenden oder Tab schließen |
| Wischen (Touch) | Links wischen = nächste Folie, rechts = zurück |
| Klick (bei Klick-Einblenden) | Nächstes Element einblenden |
Die Navigationsschaltflächen (◀ ▶ und Vollbild-Button) erscheinen unten rechts auf der Folie und blenden sich dezent ein.
📋 Referenten-Ansicht
Die Referenten-Ansicht ermöglicht es, Folien auf einem Gerät (PC / Beamer) zu zeigen und sie gleichzeitig von einem zweiten Gerät (iPad, Smartphone) aus zu steuern – mit Anzeige der Sprechernotizen und einem integrierten Timer.
Session starten
Der Server erstellt eine Session und öffnet die Präsentation in einem neuen Tab (für den Beamer).
Es erscheint ein großer Session-Code (z. B. AB3K7X) und eine vollständige URL.
Kopiere die URL mit 📋 URL kopieren oder tippe den Session-Code manuell ein: http://<Server-IP>:3048/presenter/<Code>
Sobald die Verbindung steht, wechselt der Statuspunkt in der Referenten-Ansicht von gelb auf grün.
Referenten-Ansicht (iPad)
| Element | Funktion |
|---|---|
| ◀ Zurück / Weiter ▶ | Schalten die Folien auf dem Beamer weiter. |
| Sprechernotizen | Zeigen die hinterlegten Notizen zur aktuellen Folie. |
| Folie X / Y | Aktueller Stand der Präsentation. |
| Timer + Reset | Laufende Zeit seit Session-Start, zurücksetzbar. |
| Statusanzeige | Grün = verbunden, Gelb = Verbindung unterbrochen (reconnect läuft automatisch). |
Wiederverwendung einer Session
Eine einmal gestartete Session bleibt aktiv, solange die Präsentation unverändert ist. Ein erneuter Klick auf 📋 Referenten öffnet die Präsentation erneut und zeigt das Modal mit der gleichen URL – die iPad-Seite muss nicht neu geladen werden.
Sobald die Präsentation verändert wird (Folie, Einstellungen, Notizen), wird beim nächsten Klick automatisch eine neue Session mit neuem Code erstellt.
Session-Gültigkeit
Sessions werden nach 4 Stunden ohne aktive Verbindungen automatisch vom Server gelöscht. Für eine neue Präsentationsrunde einfach wieder auf 📋 Referenten klicken.
✦ KI-Präsentation
Klicke auf ✦ KI-Präsentation in der Kopfzeile. Der Button ist nur sichtbar, wenn der Server mit einem gültigen ANTHROPIC_API_KEY gestartet wurde.
Felder im KI-Dialog
| Feld | Beschreibung |
|---|---|
| Thema * | Das Hauptthema der Präsentation. Je konkreter, desto besser das Ergebnis. |
| Anzahl Folien | Gewünschte Folienanzahl (3–20). Standard: 8. |
| Sprache | Deutsch, Englisch, Französisch oder Spanisch. |
| Zielgruppe | Für wen die Präsentation gedacht ist (z. B. Manager, Schüler, Entwickler). |
| Stil | Professionell · Kreativ · Minimalistisch · Technisch · Akademisch · Inspirierend |
| Zusätzliche Hinweise | Besondere Inhalte, Schwerpunkte oder Anforderungen. |
Klicke auf ✦ Erstellen. Die KI generiert eine vollständige Präsentation inklusive passendem Farbthema und HTML-Inhalten für jede Folie.
Prompt für externe KI
Wer keinen API-Key hat oder die Präsentation lieber in Claude.ai, ChatGPT oder Gemini generieren möchte: Der Button 📋 Prompt kopieren erstellt einen vollständigen, optimierten Prompt. Die Ausgabe der externen KI (JSON) kann anschließend über die Import-Funktion direkt geladen werden.
⇵ Import & Export
Export
Klicke auf ↓ Export. Die gesamte Präsentation wird als eigenständige HTML-Datei heruntergeladen – ohne Server, ohne App, einfach im Browser öffnen und präsentieren.
Import
Klicke auf ⇮ Import. Im Dialog kann Inhalt eingefügt oder aus der Zwischenablage gelesen werden. Erkannte Formate werden automatisch angezeigt.
| Format | Beschreibung |
|---|---|
| JSON (App-Export) | Vollständiges Präsentationsobjekt, wie es diese App erzeugt. Ideal zum Teilen oder Sichern. |
| JSON-Array | Einfaches Array aus Folienobjekten [{title, content}, …]. |
HTML mit <section class="slide"> | HTML-Export dieser App – jede section.slide wird eine Folie. |
HTML mit <section> | Generisches HTML mit Section-Tags als Folientrenner. |
HTML mit <h1> | Jede <h1>-Überschrift beginnt eine neue Folie. |
| Beliebiges HTML | Der gesamte Body-Inhalt wird als einzelne Folie importiert. |
⚓ Tastaturkürzel
Editor
| Kürzel | Aktion |
|---|---|
| Strg+S | Präsentation speichern |
| Strg+B | Fett (im visuellen Editor) |
| Strg+I | Kursiv (im visuellen Editor) |
| Tab | 2 Leerzeichen einrücken (im HTML-Editor) |
| Enter | Präsentation generieren (im KI-Themenfeld) |
| Esc | Offenes Modal schließen |
Präsentationsmodus
| Kürzel | Aktion |
|---|---|
| → ↓ Leertaste | Nächste Folie / nächstes Element |
| ← ↑ | Vorherige Folie |
| Pos1 | Erste Folie |
| Ende | Letzte Folie |
| F | Vollbild ein/aus |
| Esc | Vollbild beenden / Tab schließen |
Referenten-Ansicht (iPad)
| Kürzel | Aktion |
|---|---|
| → Leertaste | Nächste Folie |
| ← | Vorherige Folie |
| Wischen links / rechts | Nächste / vorherige Folie |