Foliotype Bento
Bento-style grid layering multiple feature highlights in varied tiles.
Why Foliotype
A workspace that disappears behind your words.
Editor
A calm canvas built for long-form focus
No floating toolbars, no clutter. Just typographic defaults tuned for reading, a quiet interface, and keyboard-first controls that stay out of the way until you need them.
Structure
Outline mode
Drag sections to reorder your whole piece in seconds.
History
Every version saved
Scrub back to any draft. Nothing you write is ever lost.
Publish
From draft to published in one click
Ship to your own domain, a newsletter, or an API endpoint. Foliotype handles the formatting so your words arrive exactly as written.
The full source is for members
Sign in and choose a plan to view and copy foliotype-bento.tsx. The live preview above is free to explore.
How to use. Copy foliotype-bento.tsx into your project (it's self-contained — the styles ship with it and dedupe across instances in React 19). Theme it by setting --sdf-* tokens on any ancestor. No dependencies, no build step.
