Foliotype Split
Split two-column content section pairing copy with a supporting visual.
Deep dive
Two ways Foliotype changes how you work.
Focus
Write without the noise
A canvas tuned for reading, with everything else tucked away until you reach for it.
- ✓Typewriter scrolling and focus mode
- ✓Keyboard-first commands
- ✓Zero-config typography
Ship
Publish the moment it's ready
Send finished pieces to the web, your newsletter, or an API without touching a settings page.
- ✓One-click publish targets
- ✓Custom domains and RSS
- ✓Scheduled releases
The full source is for members
Sign in and choose a plan to view and copy foliotype-split.tsx. The live preview above is free to explore.
How to use. Copy foliotype-split.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.