ArbeitsbereicheMonaHilftGlassKitNeuer WorkspaceSuche⌘KStartEingangFavoritenProjektübersicht
NotionKit MVPVoice-Office-HubWorkspaceWissensbasis
OnboardingPlaybooksDesignsystemRedaktionsplanKundenprojekteTeam-BereicheGlassKitBeautyStarEinstellungenPapierkorb☰📊 Projektübersicht🚀 NotionKit MVPZuletzt bearbeitet vor 2 Min.Teilen⭐NotionKit MVP👤 Marcel Karas📅 Erstellt am 12. Mai 2026🏷️ Designsystem
Ein ruhiges UI-Framework im Notion-Stil – als Web Components, ohne Build-Schritt. Diese Seite ist die lebende Vorschau: Sidebar, Seitenbaum, Callouts, Todos, Toggles und Datenbank-Ansichten in einer Hülle.
Kernidee: NotionKit liefert Look und Hülle; der Editor wird über <nk-block-host> eingehängt (etwa BlockNote), die Daten kommen aus deiner eigenen API. Drei Schichten, sauber getrennt.✅ Nächste SchritteKomponentenumfang skizzierenVorschau mit Hell/Dunkel bauenMVP-Umfang priorisierenDatenmodell für Baum & Datenbank festlegen🗃️ Projektdatenbank🧩 Weitere Bausteine
Alles, was ein Notion-artiges System sonst braucht – ruhige Drop-in-Elemente. Probier sie aus.
ℹ️ Diese Seite ist eine Komponenten-Vorschau – jedes Element folgt denselben Design-Tokens.Palette öffnen⚠️ Die Datenbank „Projektübersicht“ hat 2 überfällige Einträge.Ansehen✓ Alle Änderungen wurden synchronisiert.
Inline-Elemente
Fließtext kann SL Sara Lindt verlinken,
Seiten wie 📄 Wissensbasis und Daten wie
📅 20. Mai – und ebenso leicht nk-database als Code.
Emoji-Auswahl
Kontextmenü (⋯)
SeiteUmbenennenDuplizierenLink kopierenVerschieben nach …In den Papierkorb
Seiten-Tabs
📝 Notizen✅ Aufgaben📎 Dateien
Freie Notizen zum Projekt – Protokolle, Ideen, Entwürfe.
Aufgaben zu diesem Projekt, verknüpft mit der Datenbank oben.
Unsere Mission: Dem Arbeitstag echtes Gewicht nehmen – ruhig, klar, wirksam. Dieser Text erscheint identisch auf drei Seiten und wird an einer Stelle gepflegt.
Segment-Schalter
Für Zeiträume, Perspektiven oder Dichtestufen.
Avatar-Gruppe & Präsenz
MKSLTW5 Personen haben Zugriff
Lade-Skelett
Leerzustand
＋ Neuer Eintrag
Kommentar-Faden
Die Board-Ansicht fühlt sich schon sehr nah am Original an. 👍KIIch habe die überfälligen Einträge markiert und eine Zusammenfassung vorbereitet.
KI-Assistent eingebettet
Fasse die offenen Aufgaben dieses Projekts zusammen.Zwei Aufgaben sind offen: die Table-View steht bei 65 % (fällig 20. Mai), das Board mit Drag-and-Drop ist geplant. Ich würde zuerst den MVP-Umfang festzurren.
Ein Script-Tag genügt – kein Bundler, kein Framework-Zwang:
<nk-app>
<nk-sidebar slot="sidebar">…</nk-sidebar>
<nk-page icon="📊">
<nk-page-title>Projektübersicht</nk-page-title>
<nk-database id="db">…</nk-database>
</nk-page>
</nk-app>Der Texteditor selbst. Mit <nk-block-host> nur die optische Hülle – TipTap, BlockNote oder Novel wird als Editor eingehängt. <nk-editor>, ein dünner TipTap-Wrapper, folgt in v1.1.✍️ Editorfläche
Ab hier tippst du in echtes TipTap, gemountet in einen nk-block-host – ohne eigenes Editor-CSS. Fahre über einen Block für ＋ / ⠿, ziehe ihn, markiere Text oder tippe /.
Das hier ist keine Vorschau mehr: Dieser Absatz ist editierbar. Der Titel oben, das Callout, die Todos und die Datenbank sind NotionKit-Elemente – und dieser Block ist derselbe Look, nur lebendig.
Editor in einen Block-Host mounten
Einen Block mit ⠿ verschieben
Mit / einen neuen Block wählen
NotionKit liefert Look und Hülle, der Editor das Verhalten. Drei Schichten, sauber getrennt.
Bild hochladenEntfernen
Details
Baut ruhige Wissenssysteme und KI-native Arbeitsweisen.
Änderungen speichernVerwerfen
Komfort
Per E-Mail
Erwähnungen und KommentareWöchentliche ZusammenfassungProduktneuigkeiten