Productivity · Docs and wikis

Notion-style app

Illustrative system design for a docs and wikis app like Notion: 5 topics to read, from requirements to deep dives.

Every keystroke is a write.

Illustrative design, not Notion’s actual implementation. Arrowbox is not affiliated with Notion’s owner. Disclaimer

Editor

Block editorAdvanced · 46 min read · Sign in to read
A page as a tree of typed blocks: split, merge, turn into, drag to reorder, undo and redo.
Slash commandsIntermediate · 44 min read · Sign in to read
A command menu at the caret: detect '/', filter as you type, keyboard select, convert the block.

Sidebar page treeIntermediate · 44 min read · Sign in to read
A lazy-loaded nested page tree: expand, add sub-page, drag to move with undo, sync across tabs.
Database viewsAdvanced · 46 min read · Sign in to read
One dataset, many views: a virtualised table with inline edits, filters and sorts, and a drag board.

Multiplayer cursorsAdvanced · 46 min read · Sign in to read
Presence and remote carets in a shared page: throttled updates, positions mapped through edits.