Kerf vs Phoenix Code.
Both edit a live page and the code behind it. Phoenix Code is visual-first, with a browser edition and a deep free tier; Kerf is a code-first, Monaco-based desktop editor built around exact click-to-source sync.
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. Kerf assumes the code is where you work and the page is where you check the result.
- Deterministic visual editing. Phoenix's editing is visual-first — drag elements, swap images on the canvas. Kerf's is precise: select an element, see the real cascade, type the value. If visual-first editing has never fit how you work, Kerf takes the opposite approach.
- 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.
- Pro tooling. One-click Vercel deploy, design-token consolidation, and a five-category accessibility audit, built in rather than added through extensions.
Phoenix Code is better for
- Brackets, continued. If what you want is Brackets itself — same lineage, same team, modernized — Phoenix Code is exactly that.
- Git and extensions. Phoenix has built-in Git, a tab bar, and a community extension marketplace, all free. Kerf has no Git integration and no extension system.
- Editing anywhere. Phoenix runs in the browser at phcode.dev — including on Chromebooks and tablets — as well as on the desktop. Kerf is a desktop app for macOS and Linux (Windows in progress).
- Open source. Phoenix's code is open; Kerf's is private.
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, $10/mo, or $149 lifetime.
- Pro adds Vercel deploy, snippets, design token consolidation, the accessibility audit, and a React Native editor.
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.
Which one to pick
Choose Phoenix Code if you want the continuation of Brackets, a free tier with Git and an extension marketplace, or the ability to edit in a browser or on a Chromebook.
Choose Kerf if you want exact-line click-to-source on the Monaco engine, framework-aware completions for Tailwind and Bootstrap, and the Pro tools — design-token consolidation, the accessibility audit, and one-click deploy.
Both have real free tiers, so the quickest way to decide is to open the same project in each and see which one you keep using.