Click the preview, land in code
Click any element on the rendered page and Kerf opens its exact source line in the editor. No hunting through the file tree first.
Kerf · Bidirectional web editor
A visual editor for static sites that edits the source files directly.
Kerf puts the Monaco editor next to a live preview and keeps the two in sync. Click an element on the page to open its source line; edit the code and the page updates.
Other platforms
Free tier
The core editor is free.
The editor, the live preview, the layers panel, semantic editing, and framework detection all work without an account. Kerf Pro adds five tools on top.
Features
Code and preview, wired together.
The core of Kerf is the link between the rendered page and the source behind it.
Full Monaco, side by side
Syntax highlighting, autocomplete, and multi-cursor editing from the VS Code editor engine, in the same window as the live preview.
CSS updates without a reload
Style changes appear in the preview as you type, without a page refresh and without losing your scroll position.
Pro
What Pro adds.
Five tools on top of the free editor: deploy, snippets, token cleanup, an accessibility audit, and a React Native preview.
One-click deploy to Vercel
Link your Vercel project once; after that, publishing the current workspace is a single button in the toolbar.
Snippet library
A named library of the HTML and CSS blocks you reuse, insertable in any project.
Design token consolidation
Find the values your CSS repeats and merge them into custom properties in one step.
Accessibility audit
Five WCAG checks, from contrast to focus order, flagged inline with the offending elements highlighted.
React Native editor
Preview React Native components with react-native-web — no simulator — and click through to the JSX that produced them.
Pricing
Pricing.
The core editor is free, with no time limit and no usage caps. Kerf Pro is $96/year, $10/month, or $149 once, and billing hasn't opened yet.
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
$96/yr
The free editor plus the five Pro tools.
Coming soon
- One-click deploy to Vercel
- Snippet library
- Design token consolidation
- Full accessibility audit
- React Native editor
$10/month month-to-month, or $149 once for a lifetime license.
Compare
Kerf vs. the alternatives.
How Kerf lines up against five other tools, including where each of them is the better pick.
- Kerf vs. Phoenix Code →
The maintained open-source successor to Adobe Brackets.
- Kerf vs. Dreamweaver →
Adobe's veteran visual editor.
- Kerf vs. Polypane →
The multi-viewport responsive-testing browser.
- Kerf vs. Pinegrow →
A full visual builder with component libraries.
- Kerf vs. Onlook →
A canvas-first editor that generates React with AI.
Writing
Writing.
Occasional longer pieces on tokens, accessibility, and deploying.
- Design tokens in existing CSS →
Getting tokens into a stylesheet that grew without them.
- An accessibility audit inside the editor →
Contrast, alt text, headings, landmarks, and focus order, checked as you edit.
- Ship to Vercel without the terminal →
Deploying a local folder from inside the editor.
Download
Download Kerf free.
The download is the full free editor, for macOS and Linux, with Windows coming. Open a folder and start editing.
Questions? See support →