Notion HTML-Blöcke sind ein neuer Block-Typ, mit dem du vollständig interaktives HTML, CSS und JavaScript direkt in jede Seite einbetten kannst — Taschenrechner, Charts, Whiteboards und sogar ein laufendes Tetris-Spiel. Das ist eines der aufregendsten Features, die Notion seit Langem geliefert hat, denn es verwandelt deinen Workspace in eine Leinwand für fast alles, was du sonst im Web findest. In diesem Guide erfährst du, was HTML-Blöcke leisten, wie du einen hinzufügst, welche Pläne sie unterstützen und welche Einschränkungen du kennen solltest, bevor du anfängst.
Was sind HTML-Blöcke in Notion?
HTML-Blöcke sind ein nativer Notion-Block, der dein eigenes HTML, CSS und JavaScript direkt auf einer Seite rendert. Alles, was du für das Web bauen kannst, kann jetzt direkt in Notion leben.
Das umfasst zwei große Kategorien: statische Visuals wie individuelle Charts und Diagramme — und interaktive Elemente wie Taschenrechner, Whiteboards und Mini-Games.
💡 Du musst nicht coden können. Tools wie Claude und ChatGPT sind hervorragend darin, diese Dateien für dich zu generieren — und Notion AI kann auf einen einfachen Prompt hin einen Block bauen.
Wie fügst du einen HTML-Block hinzu?
Du hast drei Möglichkeiten, einen HTML-Block auf deiner Seite einzufügen:
- Tippe /HTML und füge deinen Code direkt ein
- Lade eine externe HTML-Datei hoch (zum Beispiel ein Artefakt, das du in Claude generiert hast)
- Bitte Notion AI, einen für dich aus einer Beschreibung zu erstellen
Sobald er auf der Seite ist, verhält sich ein HTML-Block wie ein Embed. Du kannst ihn verschieben, in Toggles einbetten und in der Breite anpassen. Für detailliertere Inhalte öffne ihn im Pop-up-Modus, damit du alles auf einen Blick siehst.
Welche Notion-Pläne unterstützen HTML-Blöcke?
HTML-Blöcke anzeigen und einbetten funktioniert auf jedem Notion-Plan — auch im Free-Tier. Einen mit Notion AI generieren erfordert einen Business-Plan oder höher.
Das ist wichtig, wenn du Templates baust oder teilst. Du kannst einen Block anderswo generieren (zum Beispiel mit Claude Code) und hochladen — und jeder, mit dem du das Setup teilst, kann damit interagieren, egal welchen Plan er hat.
Was kannst du mit HTML-Blöcken bauen?
Eine Menge. Hier sind die Use Cases, die sofort den größten Mehrwert liefern:
- Interaktive Taschenrechner — ROI-Tools, bei denen du Eingaben anpasst (gesparte Stunden, Kosten pro Person, Rollout-Größe) und den Wert live aktualisieren siehst
- Visuelle Reports und individuelle Charts — gehe über Notions native Charts hinaus, wenn du eine bestimmte Visualisierung brauchst
- Konzept- und Flow-Diagramme — bilde einen Prozess wie Machbarkeit → PRD → Engineering-Schritte ab, damit er sofort verständlich ist, statt als Textwand
- Interaktive Elemente — Whiteboards zum Zeichnen, Drag-and-drop-Canvases und einfache Spiele
💡 Pro-Tipp: Greife zu HTML-Blöcken, wenn ein Visual etwas schneller erklärt als Text. Ein schnelles Flow-Diagramm oder eine Timeline vermittelt ein Konzept oft viel besser als drei dichte Absätze.
Was sind die Grenzen von HTML-Blöcken?
HTML-Blöcke laufen in einer sicheren Sandbox. Sie können weder aus deinem Workspace lesen noch in ihn schreiben — und sie können nicht auf das offene Web zugreifen. Das hält sie sicher, bestimmt aber, was du bauen solltest und was nicht.
Sie können keine Notion-Daten lesen oder schreiben
Ein HTML-Block kann keine Live-Daten aus deinen Notion-Seiten abrufen und nichts zurückschreiben. Ein Report, den du erzeugst, ist ein Snapshot — korrekt zum Zeitpunkt der Erstellung.
AI kann deine Daten beim Erstellen des Blocks abrufen, aber wenn du danach drei weitere Rechnungen hinzufügst, aktualisiert sich der Block nicht von selbst. Einfach neu generieren, um die Zahlen zu aktualisieren. Für ein wirklich Live-Dashboard brauchst du ein Custom-Tool wie Notion Workers.
Sie können keine externen API-Aufrufe machen
Die Sandbox blockiert externe Anfragen — du kannst also kein Live-Wetter-Widget einbauen, das eine externe API anspricht. Alles, was komplett innerhalb des Blocks läuft, ist möglich; alles, was nach Hause telefonieren muss, nicht.
Speicher ist nur lokal
Manche Blöcke fühlen sich an, als würden sie sich an Dinge erinnern — deine Whiteboard-Zeichnung überlebt einen Refresh, ein Klick-Counter hält seinen Wert. Aber dieser Zustand wird lokal in deinem Browser gespeichert, auf genau diesem einen Gerät.
Er ist nicht mit deinem Notion-Konto verknüpft und wird nicht geteilt. Ein Teammitglied sieht nicht, was du gezeichnet hast — und ein Gerätewechsel löscht alles. Ideal für spontane Interaktion; aber noch kein gemeinsames Canvas für Teams.
Die Blöcke sind gesperrt
Du kannst den Code eines HTML-Blocks nicht direkt bearbeiten. Um etwas zu ändern, lade die Datei neu hoch — oder, wenn du ihn mit AI gebaut hast, bitte die AI, die Änderung vorzunehmen, und tausche ihn aus.
Wie arbeiten AI und HTML-Blöcke zusammen?
Wenn du einen Block mit Notion AI generierst, wirkt er standardmäßig nativ. Das liegt daran, dass Notion seinen eigenen Style Guide in die Generierung einfließen lässt, sodass der Output zum Workspace-Look passt.
Das lässt sich leicht überschreiben — sag der AI, sie soll stattdessen deine Brand Guidelines verwenden, und sie stylt den Block in deinen Farben und Schriften.
Noch etwas steht bevor: MCP- und API-Zugang für die Erstellung von HTML-Blöcken wird gerade ausgerollt. Bald wirst du ein Artefakt in Claude fertigstellen und direkt als HTML-Block in Notion pushen können — für das gesamte Team sichtbar.
HTML-Blöcke auf einen Blick
Hier die Kurzreferenz für das, was HTML-Blöcke heute können und nicht können:
| Capability | Supported? | Notes |
|---|---|---|
| Embed & view on any plan | ✅ Yes | Free plan included |
| Generate with Notion AI | ✅ Yes | Business plan or higher |
| Interactive elements (calculators, games, whiteboards) | ✅ Yes | Runs inside the sandbox |
| Read live data from Notion | ❌ No | Snapshot at creation; regenerate to refresh |
| Write data back to Notion | ❌ No | Blocked for security |
| External API calls | ❌ No | No live web widgets |
| Shared or persistent memory | ⚠️ Local only | Stored per browser, not synced or shared |
| Edit code in place | ❌ No | Re-upload or ask AI to change |
| Create via MCP / API | 🔜 Rolling out | Coming soon |
Alles zusammen macht Notion richtig mächtig: auf der einen Seite ein Arbeitstier für Daten und Business-Logik, auf der anderen HTML-Blöcke als visuelle Schicht. 🚀
💼 Brauchst du die Unterstützung zertifizierter Notion Berater? Mein Team und ich helfen gerne! → https://matthiasfrank.de/en/notion-consulting/
📬 Willst du mehr Notion-Updates und praktische Guides wie diesen? → Hol dir 41 kostenlose Notion-Ressourcen
Häufig gestellte Fragen
Was sind HTML-Blöcke in Notion?
HTML-Blöcke sind ein nativer Block-Typ, mit dem du eigenes HTML, CSS und JavaScript direkt in eine Notion-Seite einbetten kannst. Du kannst sie für interaktive Tools, individuelle Charts, Diagramme und mehr verwenden. Füge einen hinzu, indem du /HTML tippst, eine Datei hochlädst oder Notion AI bittest, einen zu bauen.
Sind HTML-Blöcke kostenlos nutzbar?
Ja — HTML-Blöcke anzeigen und einbetten funktioniert auf jedem Notion-Plan, auch im Free-Tier. Einen mit Notion AI zu generieren erfordert einen Business-Plan oder höher — aber du kannst jederzeit einen Block mit einem externen Tool erstellen und auf jedem Plan hochladen.
Kann ein HTML-Block Live-Daten aus meinen Notion-Seiten abrufen?
Nein. HTML-Blöcke sind sandboxed und können weder aus deinen Notion-Inhalten lesen noch in sie schreiben. Alle Daten in einem Block sind ein Snapshot vom Zeitpunkt der Erstellung — um ihn zu aktualisieren, einfach neu generieren.
Speichern HTML-Blöcke, was ich zeichne oder ändere?
Nur lokal. Zustände wie eine Whiteboard-Zeichnung oder ein Klick-Counter werden in deinem Browser auf diesem spezifischen Gerät gespeichert — nicht in deinem Notion-Konto. Sie synchronisieren nicht geräteübergreifend, und Teammitglieder sehen sie nicht.
Kann ich den Code eines HTML-Blocks direkt bearbeiten?
Nein, die Blöcke sind nach dem Platzieren gesperrt. Um Änderungen vorzunehmen, lade die Datei neu hoch — oder, wenn du ihn mit AI gebaut hast, bitte die AI, ihn anzupassen, und tausche die neue Version ein.
