Workspaces MonaHilft GlassKit New workspace Search⌘K Home Inbox Favourites Project overview NotionKit MVP Voice-Office-Hub Workspace Knowledge base Onboarding Playbooks Design system Editorial plan Client projects Team spaces GlassKit BeautyStar Settings Trash πŸ“Š Project overviewπŸš€ NotionKit MVP Last edited 2 min ago Share ⭐ NotionKit MVP πŸ‘€ Marcel Karas πŸ“… Created 12 May 2026 🏷️ Design system

A calm UI framework in the Notion idiom – as web components, without a build step. This page is the living preview: sidebar, page tree, callouts, todos, toggles and database views in one shell.

Core idea: NotionKit supplies the look and the shell; the editor is mounted through <nk-block-host> (BlockNote, say), and the data comes from your own API. Three layers, cleanly separated. βœ… Next steps Sketch the component scope Build the preview with light/dark Prioritise the MVP scope Define the data model for tree & database πŸ—ƒοΈ Project database 🧩 More building blocks

Everything else a Notion-like system needs – calm, drop-in elements. Try them out.

ℹ️ This page is a component preview – every element follows the same design tokens.Open palette ⚠️ The β€œProject overview” database has 2 overdue entries.View βœ“ All changes have been synced.

Inline elements

Running text can link SL Sara Lindt, pages such as πŸ“„ Knowledge base and dates such as πŸ“… 20 May – and just as easily nk-database as code.

Emoji picker

Context menu (β‹―)

Page Rename Duplicate Copy link Move to … Move to trash

Page tabs

πŸ“ Notes βœ… Tasks πŸ“Ž Files
Free-form notes on the project – meeting minutes, ideas, rough drafts.
Tasks for this project, linked to the database below.
Attached files and exports.

Template buttons

Insert week plan Insert meeting minutes Insert retro board

Stat cards

Synced block

Our mission: Take real weight off the working day – calm, clear, effective. This text appears identically on three pages and is maintained in one place.

Segmented control

For time ranges, perspectives or density levels.

Avatar group & presence

MK SL TW 5 people have access

Loading skeleton

Empty state

οΌ‹ New entry

Comment thread

The board view already feels very close to the original. πŸ‘ KII have flagged the overdue entries and prepared a summary.

AI assistant embedding

Summarise the open tasks for this project. Two tasks are open: the Table-View sits at 65 % (due 20 May), the Board with drag and drop is planned. I would nail down the MVP scope first.
One script tag is enough – no bundler, no framework lock-in: <nk-app> <nk-sidebar slot="sidebar">…</nk-sidebar> <nk-page icon="πŸ“Š"> <nk-page-title>Project overview</nk-page-title> <nk-database id="db">…</nk-database> </nk-page> </nk-app> The text editor itself. With <nk-block-host> only the optical shell – TipTap, BlockNote or Novel is mounted as the editor. <nk-editor>, a thin TipTap wrapper, follows in v1.1.
✍️ Editor surface

From here on you are typing into real TipTap, mounted into an nk-block-host – with no editor CSS of its own. Hover a block for οΌ‹ / β Ώ, drag it, select text, or type /.

This is no longer a preview: this paragraph is editable. The title above, the callout, the todos and the database are NotionKit elements – and this block is the same look, only alive.

  • Mount the editor into a block host
  • Move a block with β Ώ
  • Pick a new block with /
NotionKit supplies the look and the shell, the editor supplies the behaviour. Three layers, cleanly separated.
Upload image Remove

Details

Builds calm knowledge systems and AI-native ways of working.
Save changes Discard

Comfort

By email

Mentions and comments Weekly digest Product news

Push

Model

Mona Standard Recommended Custom model API

Reply style

Calm & concise Detailed & explanatory Bullet points only
Save Test connection
Delete
Invite