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 exact click-to-source 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 your source files.
- Live preview — see what you're editing as you edit it.
From there they diverge. Onlook describes itself as "Cursor for Designers": you prompt AI to build React components on a canvas.
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 — any project that ends up as HTML and CSS. (Kerf Pro also has a React Native component editor.) Onlook is React-first.
- Click-to-source precision. Clicking an element in the preview jumps to the exact source line, and 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, that color changes. There's no API key and no metered usage.
- Free core, simple price. Kerf's editor is free with no account; Pro is a flat $96/year, $10/mo, or $149 once — no AI usage metering or per-seat cloud billing.
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 treats the canvas as the source of truth, with code as continuous output. Kerf inverts that: the code is the source of truth, and the canvas tracks 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, static projects; React Native components (Pro) | 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 — local desktop app | Cloud + local options |
| Account required | No (free tier) | Yes (for cloud) |
| Pricing | Free / $96 yr / $10 mo / $149 once | Open-source; paid cloud |
| Deploy | One-click Vercel (Pro) | Built-in hosting |
Pricing
Kerf
- Free tier: full visual editor, no account.
- Pro: $96/year, $10/mo, or $149 lifetime.
- Pro adds Vercel deploy, snippets, design token consolidation, an accessibility audit, and a React Native editor.
Onlook
- Open-source — free to self-host; paid cloud + AI plans.
- Pricing scales with AI usage.
- Verify current pricing at onlook.com/pricing.
Which one to pick
Pick Onlook if you're a designer working in React and you want AI to produce the implementation. Its bet is that generated code can match your design system; if that holds for your project, it's a good fit.
Pick Kerf if you already have a codebase and want a visual editor that works within it: clicks land on the right line, edits write to the right file, and there's no generation step. That covers most static sites that don't need a React build.