Rich Editor
Document editor
Best for
Docs, knowledge bases, long-form writing — a page with its toolbar on top
Anatomy
Basic toolbar · headings, body, lists, keyboard-shortcut chips · checklist · quote · live selection states
Designing calm, capable editors
A rich text editor should get out of the way. Select any text to format it — the toolbar buttons above light up to match what's under your cursor. Try bold, italic
What good tools share
Three things separate an editor you tolerate from one you reach for:
- Formatting that maps to muscle memory — ⌘B ⌘I ⌘K all work.
- Blocks you can turn into anything: headings, lists, quotes, code.
- Quiet defaults, with power a keystroke away.
The best interface is the one you stop noticing.
Comment thread
Best for
Reviews, discussions, activity feeds — read the thread, reply in place
Anatomy
Thread header · comment rows with avatar, time and @mention tag · composer with font, size, colour, B I U · Send
Design review
3 comments
Reaction chip states match the kit. One question on the composer — should
@mentionsFloating toolbar
Best for
Distraction-free writing — formatting appears where you select, not at the top
Anatomy
Editable page · compact pill that follows the selection · font, size, colour · B I U S · attach
The quiet power of a good editor
Highlight this sentence and the floating toolbar comes to it — font, size, colour, bold, italic and more, right where you're working. No reaching for a bar at the top of the screen.
Blocks on demand
Start a fresh line below and type / to turn it into a heading, list, quote, code block, or divider.
The best interface is the one you stop noticing.
Basic toolbar
Best for
The full formatting row as a pill — pin it above any editor
Anatomy
Font · size · colour · B I U S · bullet, numbered, check lists · align · mention, link, info · more
Large toolbar
Best for
Touch and focus modes — 48px filled controls in a ringed pill
Anatomy
Font · size · colour orb · B I U S · assignee avatar · attach
Segmented toolbar
Best for
Two pills — type settings on the left, formatting on the right — for wide editors
Anatomy
Font, size, colour pill · formatting pill with B I U S, lists, align, mention, link, info, more
Be first in,
and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.Rich Editor
Document editor
Best for
Docs, knowledge bases, long-form writing — a page with its toolbar on top
Anatomy
Basic toolbar · headings, body, lists, keyboard-shortcut chips · checklist · quote · live selection states
Designing calm, capable editors
A rich text editor should get out of the way. Select any text to format it — the toolbar buttons above light up to match what's under your cursor. Try bold, italic
What good tools share
Three things separate an editor you tolerate from one you reach for:
- Formatting that maps to muscle memory — ⌘B ⌘I ⌘K all work.
- Blocks you can turn into anything: headings, lists, quotes, code.
- Quiet defaults, with power a keystroke away.
The best interface is the one you stop noticing.
Comment thread
Best for
Reviews, discussions, activity feeds — read the thread, reply in place
Anatomy
Thread header · comment rows with avatar, time and @mention tag · composer with font, size, colour, B I U · Send
Design review
3 comments
Reaction chip states match the kit. One question on the composer — should
@mentionsFloating toolbar
Best for
Distraction-free writing — formatting appears where you select, not at the top
Anatomy
Editable page · compact pill that follows the selection · font, size, colour · B I U S · attach
The quiet power of a good editor
Highlight this sentence and the floating toolbar comes to it — font, size, colour, bold, italic and more, right where you're working. No reaching for a bar at the top of the screen.
Blocks on demand
Start a fresh line below and type / to turn it into a heading, list, quote, code block, or divider.
The best interface is the one you stop noticing.
Basic toolbar
Best for
The full formatting row as a pill — pin it above any editor
Anatomy
Font · size · colour · B I U S · bullet, numbered, check lists · align · mention, link, info · more
Large toolbar
Best for
Touch and focus modes — 48px filled controls in a ringed pill
Anatomy
Font · size · colour orb · B I U S · assignee avatar · attach
Segmented toolbar
Best for
Two pills — type settings on the left, formatting on the right — for wide editors
Anatomy
Font, size, colour pill · formatting pill with B I U S, lists, align, mention, link, info, more
Be first in, and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.