Kerf vs Phoenix Code.
Both edit a live page and the code behind it. The real difference is philosophy: Phoenix Code is the visual-first continuation of Adobe Brackets, with a browser edition and a deep free tier; Kerf is a code-first, Monaco-based desktop editor built around exact click-to-source precision.
At a glance
Phoenix Code is the official open-source successor to Adobe Brackets, maintained by the team that took it over in 2022 — it even lives at brackets.io. Kerf is a newer, closed-source desktop app from SmoothGrain. Both give you live preview and the ability to move between the rendered page and the source. They diverge on the editor engine, how visual editing works, what's free, and whether you can run it in a browser.
Kerf is better for
- Living in the code. Kerf runs on Monaco — the VS Code engine — with the autocomplete, multi-cursor, and keybindings you already know. Click any element in the preview and you land on its exact source line. If you think in code first and want the page as a window onto it, that's Kerf's entire model.
- A visual model that fits how developers think. Phoenix's editing is visual-first — drag elements, swap images on the canvas. Kerf's is precise and deterministic: select an element, see the real cascade, type the value. If a visual-first editor never matched the way you work, Kerf is the other philosophy.
- Framework work. Kerf auto-detects Tailwind and Bootstrap and gives framework-aware completions inline, and CSS hot-swaps into the preview as you type — no reload, no lost scroll position.
- Dev-grade Pro tooling. One-click Vercel deploy, design-token consolidation, and a five-category accessibility audit — built in, not assembled from extensions.
Phoenix Code is better for
- Brackets, continued. If what you want is Brackets itself — same lineage, same team, modernized — Phoenix Code is literally that. Kerf is informed by that world but isn't a continuation of it.
- A deep free tier. Git, Emmet, code formatting, a tab bar, snippets, and an extension marketplace are all free in Phoenix. Kerf's free tier is the editor and its visual tools; it has no Git and no extension ecosystem.
- Editing anywhere. Phoenix runs in the browser at phcode.dev — including on Chromebooks and tablets — as well as on native desktop. Kerf is a native desktop app for macOS and Linux (Windows in progress).
- Open source and extensibility. Phoenix is open-source with a community extension marketplace. Kerf is a curated, closed product with no plugin system.
Feature comparison
| Feature | Kerf | Phoenix Code |
|---|---|---|
| Editor engine | Monaco (VS Code engine) | CodeMirror (Brackets lineage) |
| Live preview | Yes — CSS hot-swap, no reload | Yes |
| Click-to-source | Bidirectional, exact line | Via Live Preview (in-place editing is Pro) |
| Visual editing model | Code-first — select, see cascade, type | Visual-first — drag, swap, rearrange |
| Framework-aware completions | Tailwind, Bootstrap (auto) | Via extensions |
| Git | — | Built-in (free) |
| Extension marketplace | — | Yes |
| Design-token consolidation | Yes (Pro) | — |
| Accessibility audit | Five-category (Pro) | — |
| One-click Vercel deploy | Yes (Pro) | — |
| Runs in a browser | — | Yes (+ Chromebook, tablet) |
| Platforms | macOS, Linux (Windows soon) | Windows, macOS, Linux, ChromeOS |
| Open source | — | Yes |
Pricing
Kerf
- Free tier: the full editor — click-to-source, live preview, layers, visual property editing.
- Pro: $96/year or $10/mo.
- Pro adds Vercel deploy, snippets, design token consolidation, and the accessibility audit.
Phoenix Code
- Free: editor, live preview, visual editing, Git, Emmet, formatting, extensions.
- Phoenix Pro: from $9/mo for Live Preview Edit.
- Verify current pricing at phcode.io/pricing.
The honest answer
Choose Phoenix Code if you want the genuine continuation of Brackets, a free tier with Git, Emmet, and an extension marketplace, or the ability to edit in a browser or on a Chromebook. It's the open-source heir, and it's capable.
Choose Kerf if you live in code and want exact-line precision on the Monaco engine, framework-aware completions for Tailwind and Bootstrap, and dev-grade Pro tools like design-token consolidation, an accessibility audit, and one-click deploy. And if you've tried a visual-first editor and it never matched how you actually work — Kerf is built on the opposite instinct: code first, the page as its mirror.
Both have real free tiers, so the fastest way to decide is to open each one on a file you actually work on and see which gets out of your way.