Click the preview, land in code
Click any element on the rendered page to jump straight to its source. No digging through the file tree — just click and land in code.
Kerf · A precision cut
Edit the page you see, without losing the code you trust.
Kerf pairs Monaco with a live preview and bidirectional sync. Click something on the page, land in the code. Edit the code, see the page update.
Other platforms
Free tier
Free to use, fully capable.
The editor, the live preview, the layers panel, semantic editing, framework detection — no account required. Kerf Pro adds tooling for shipping, reuse, cleanup, and accessibility on top.
Core
Features
Code and preview, wired together.
Every feature in Kerf is about closing the gap between what you see on the page and what you edit in the source.
Full Monaco, side by side
Syntax highlighting, autocomplete, and multi-cursor editing right next to the live preview — not buried behind a tab.
CSS updates without a reload
Change a color, adjust spacing, tweak a layout — the preview updates as you type. No page refresh, no lost scroll position.
Pro
Pro
The work after the first draft.
Tools for what comes next — shipping, reuse, cleanup, and accessibility.
One-click deploy to Vercel
Connect a Vercel project once, then ship the current workspace to production from inside Kerf. No terminal, no separate dashboard — edit, then deploy.
Snippet library
Save the HTML and CSS fragments you reuse, then drop them back in by name. A personal library that stays with you across projects.
Design token consolidation
Scan your project for repeated colors, spacing, and typography. Consolidate them into CSS custom properties with one click.
Accessibility audit
WCAG contrast, alt text, heading hierarchy, landmark, and focus order checks — with per-issue detail and element highlighting.
Pricing
Pricing
Start free. Upgrade when you need to.
The core editor is free forever — bidirectional sync, Monaco, live preview, CSS hot-swap, framework detection, and diagnostics. Pro unlocks tools for shipping, reuse, cleanup, and accessibility.
Kerf
$0
The core editor with code-preview sync.
- Bidirectional click-to-source sync
- CSS hot-swap without reload
- Live preview and diagnostics
- Tailwind and Bootstrap detection
- Design token scanning
- Semantic visual editing
- Layers panel
- Visual property editing
Kerf Pro
$10/mo
Everything in Free, plus tools to ship what you build.
Coming soon
- One-click deploy to Vercel
- Snippet library
- Design token consolidation
- Full accessibility audit
Also available: $89 lifetime
Writing
Writing
Read the why.
Essays on design tokens, accessibility, and shipping — plus an honest comparison with Polypane.
- Design tokens in existing CSS →
Consolidate repeated colors, spacing, and typography without a rewrite.
- An accessibility audit inside the editor →
Five WCAG checks that run as you edit, not after you deploy.
- Ship to Vercel without the terminal →
One-click deploy from inside Kerf — no CLI, no Git setup.
- Kerf vs. Polypane →
Honest side-by-side: Kerf's source-file model, Polypane's multi-viewport testing.
Download
Download Kerf free.
The core editor with bidirectional sync, Monaco, and live preview — no account required. Upgrade to Pro in-app when you need advanced tools.
Questions? See support →