Kerf vs. Onlook.
Both tools call themselves visual code editors, but they're built for different jobs. Onlook leans on AI to generate React components from a design canvas. Kerf edits the HTML and CSS you already have, with click-to-source precision and no LLM in the loop.
At a glance
Both Kerf and Onlook offer:
- Visual editing — manipulate elements directly on the rendered page.
- Code output — changes write back to source files, not a CMS database.
- Live preview — see what you're editing as you edit it.
From there, the philosophies diverge. Onlook positions itself as "Cursor for Designers" — AI-assisted, React-shaped, designed for design-to-code creation. Kerf is framework-agnostic and deliberately not AI-driven; it's a precision tool for editing code that already exists.
Kerf is better for
- Editing existing static sites. If you have an HTML/CSS site — landing pages, marketing pages, documentation, a personal site — Kerf opens the folder and edits the files. Onlook expects a React project with a build step.
- Framework-agnostic work. Kerf works on plain HTML, Tailwind, Bootstrap, static-site generator output, anything that renders to HTML and CSS. Onlook is React-first.
- Click-to-source precision. Click any element on the rendered page and Kerf jumps to the exact source line. The change writes to that file, not to a generated component.
- Predictable, deterministic edits. Kerf doesn't ask an LLM to interpret your intent — when you change a color, the color changes. There's no token budget, no API key, no hallucinated CSS.
- Lifetime pricing. $89 once. Onlook's plans are subscription-only.
Onlook is better for
- Designers building React apps from scratch. If you're starting a project, want to drag components onto an infinite canvas, and have AI fill in the implementation, Onlook is built for that. Kerf doesn't generate code from prompts.
- Teams already on a React + design-system stack. Onlook constrains AI to your existing components so output matches your design system. If your codebase is a React monorepo with a tight component library, Onlook fits that shape.
- Design-to-code workflows. Onlook's pitch is treating the canvas as the source of truth, with code as a continuous output. Kerf's pitch is the opposite — code is the source of truth, and the canvas is a window onto it.
- AI-assisted iteration. If you want to type "make this section more modern" and have a tool figure out what that means, Onlook does that. Kerf doesn't.
Feature comparison
| Feature | Kerf | Onlook |
|---|---|---|
| Edits existing source files | HTML, CSS, any static project | React components |
| Click-to-source sync | Bidirectional, exact line | Component-level |
| AI generation | — | Core feature |
| Framework support | HTML, Tailwind, Bootstrap, framework-agnostic | React (Next.js, Vite) |
| Editor engine | Monaco (VS Code engine) | Visual canvas + code panel |
| Local-first | Yes, native desktop app | Cloud + local options |
| Account required | No (free tier) | Yes |
| Pricing | Free / $10 mo / $89 lifetime | Subscription tiers |
| Deploy | One-click Vercel (Pro) | Built-in hosting |
Pricing
Kerf
- Free tier: full visual editor, no account.
- Pro: $10/mo or $89 lifetime.
- Pro adds Vercel deploy, snippets, design token consolidation, accessibility audit.
Onlook
- Subscription-only plans.
- No lifetime license.
- Verify current pricing at onlook.com/pricing.
The honest answer
Pick Onlook if you're a designer working in React and you want AI to bridge the design-to-code gap. Onlook's bet is that AI can produce code that matches your design system; if that lands for your workflow, it's a powerful loop.
Pick Kerf if you already have a codebase and you want a visual editor that respects it — clicks land on the right line, edits write to the right file, and there's no generation step. Kerf is for the long tail of static sites that don't need a React build, and for developers who want code fidelity over code generation.