Ein ruhiges UI-Framework im Notion-Look – als Web Components, ohne Build-Step. Diese Seite ist die lebende Preview: Sidebar, Seitenbaum, Callouts, Todos, Toggles und Datenbank-Views in einem Gerüst.
💡
Leitidee: Optik & Gerüst liefert NotionKit, den Editor hängt man über <nk-block-host> ein (z. B. BlockNote), die Daten kommen aus der eigenen API. Drei Ebenen, sauber getrennt.
Alles, was ein Notion-artiges System sonst noch braucht – als ruhige, drop-in-fähige Elemente. Interaktiv ausprobierbar.
ℹ️ Diese Seite ist eine Komponenten-Preview – alle Elemente folgen denselben Design-Tokens.
⚠️ Die Datenbank „Projektübersicht“ hat 2 überfällige Einträge.
✓ Alle Änderungen wurden synchronisiert.
Inline-Elemente
Im Fließtext lassen sich SL Sara Lindt,
Seiten wie 📄 Wissensdatenbank und Daten wie
📅 20. Mai verlinken – ebenso nk-database als Code.
Emoji-Picker
😀🌿🍕🚀💡❤️🎲
Kontextmenü (⋯)
Seite
✏️Umbenennen⌘⇧R
📋Duplizieren⌘D
🔗Link kopieren⌘L
📁Verschieben nach …
🗑️In den Papierkorb⌫
Seiten-Reiter
📝 Notizen✅ Aufgaben📎 Dateien
Freie Notizen zum Projekt – Meeting-Mitschriften, Ideen, Rohfassungen.
Aufgaben dieses Projekts, verknüpft mit der Datenbank unten.
Angehängte Dateien und Exporte.
Template-Buttons
Statistik-Karten
Aktive Seiten
128
▲ 12 diese Woche
KI-Anfragen
847
▲ 23 %
Offene Aufgaben
14
▼ 5 seit gestern
Synced-Block
⟳ 3 Orte
Unsere Mission: Arbeitsalltag spürbar entlasten – ruhig, klar, wirksam. Dieser Text erscheint identisch auf drei Seiten und wird zentral gepflegt.
Segment-Auswahl
Für Zeiträume, Sichtweisen oder Dichtestufen.
Avatar-Gruppe & Anwesenheit
MKSLTW+2
5 Personen haben Zugriff
Lade-Skelett
Leerzustand
🗂️
Noch keine Einträge
Lege den ersten Eintrag an oder importiere vorhandene Daten.
Kommentar-Faden
SL
Sara Lindt · vor 1 Std.
Die Board-Ansicht fühlt sich schon sehr nah am Original an. 👍
✨
MonaKI · vor 20 Min.
Ich habe die überfälligen Einträge markiert und eine Zusammenfassung vorbereitet.
KI-Assistenten-Einbettung
Fasse die offenen Aufgaben dieses Projekts zusammen.
✨
Mona · KI
Zwei Aufgaben sind offen: Der Table-View steht bei 65 % (Fälligkeit: 20. Mai), das Board mit Drag-and-Drop ist geplant. Ich empfehle, den MVP-Umfang zuerst festzuziehen.
✨
Wie sieht die Einbindung aus?
Ein Script-Tag genügt – kein Bundler, kein Framework-Zwang:
Der eigentliche Text-Editor. NotionKit stellt mit <nk-block-host> nur die optische Hülle – als Editor wird BlockNote oder Novel eingehängt. So bleibt das Kit schlank und der Editor austauschbar.
✍️ Editor-Fläche
Ab hier tippst du in echtem TipTap, eingehängt in einen nk-block-host – ohne editor-eigenes CSS. Fahre über einen Block für ＋ / ⠿, zieh ihn, markiere Text, oder tippe /.
Das ist keine Vorschau mehr: Dieser Absatz ist editierbar. Die Überschrift oben, das Callout, die Todos und die Datenbank sind NotionKit-Markup – und dieser Block ist derselbe Look, nur lebendig.
Editor in einen Block-Host hängen
Einen Block mit ⠿ verschieben
Mit / einen neuen Block wählen
Optik und Gerüst liefert NotionKit, das Verhalten der Editor. Drei Ebenen, sauber getrennt.
https://notionkit.jungherz.com
