|
| 1 | +--- |
| 2 | +title: "Phoenix Code Is Brackets — Rebuilt for 2026" |
| 3 | +description: "Phoenix Code is the next generation of Brackets, built by the same team. Same philosophy, same live preview DNA, massively upgraded. Here's everything that's new." |
| 4 | +authors: [charly] |
| 5 | +tags: |
| 6 | + - brackets |
| 7 | + - comparison |
| 8 | + - migration |
| 9 | + - code-editor |
| 10 | + - live-preview |
| 11 | + - open-source |
| 12 | +--- |
| 13 | + |
| 14 | +If you've used Brackets, Phoenix Code will feel immediately familiar. |
| 15 | + |
| 16 | +Built by the same team behind Brackets, Phoenix Code keeps Live Preview and fast visual front-end development at its core — now rebuilt on a modern foundation. |
| 17 | + |
| 18 | +Phoenix Code isn’t a tribute or a spiritual successor. It’s the natural continuation of the ideas that started with Brackets. |
| 19 | + |
| 20 | +Here’s what’s changed — and how to switch. |
| 21 | + |
| 22 | +--- |
| 23 | + |
| 24 | +## Brackets vs Phoenix Code: What's New |
| 25 | + |
| 26 | +Here's the quick comparison. The left column is what you know. The right column is where we are now. |
| 27 | + |
| 28 | +| Feature | Brackets | Phoenix Code | |
| 29 | +|---------|----------|-------------| |
| 30 | +| Live Preview | Basic (view only) | Full live preview (editing in preview with [Pro](/docs/Pro%20Features/live-preview-edit)) | |
| 31 | +| Visual Editing | Limited | Color pickers, number dials, gradient editors, drag-and-drop | |
| 32 | +| Git Integration | Required third-party extension | Built-in | |
| 33 | +| Browser Version | No | Yes — [phcode.dev](https://phcode.dev), no install needed | |
| 34 | +| Chromebook / Tablet Support | No | Yes | |
| 35 | +| Extension Marketplace | No longer maintained | Active and growing | |
| 36 | +| Active Development | In maintenance mode since 2021 | Regular releases, active team | |
| 37 | +| Open Source | Yes | Yes (AGPL-3.0) | |
| 38 | +| Built-in Image Library | No | Yes — stock photos you can drag into projects | |
| 39 | +| Price | Free | Free ([Pro](https://phcode.dev/pricing) from $9/mo for Live Preview Edit) | |
| 40 | + |
| 41 | +The free version of Phoenix Code covers everything Brackets did and more — Git, the browser edition, visual editing tools, all included. [Phoenix Pro](/docs/Pro%20Features/live-preview-edit) adds Live Preview Edit, and exists to help sustain full-time development by a small indie team. |
| 42 | + |
| 43 | +--- |
| 44 | + |
| 45 | +## Why We Rebuilt Brackets |
| 46 | + |
| 47 | +Brackets was built on CEF (Chromium Embedded Framework) — a technology choice that made sense in 2014 but became increasingly difficult to maintain. Security patches, OS compatibility, performance work — it all got harder every year. We hit a ceiling. |
| 48 | + |
| 49 | +Rather than keep patching an aging foundation, we modernized the platform so it can run anywhere — in browsers, on desktop with Electron or Tauri, pretty much any modern system. One codebase that works everywhere, from [phcode.dev](https://phcode.dev) in your browser to a native desktop app. |
| 50 | + |
| 51 | +The architecture changed. The team didn't. The design philosophy didn't. |
| 52 | + |
| 53 | +--- |
| 54 | + |
| 55 | +## What Carried Over from Brackets |
| 56 | + |
| 57 | +If you're wondering whether Phoenix Code will feel familiar — it will. |
| 58 | + |
| 59 | +**Live Preview** is still the core of the experience. Edit HTML or CSS and watch the browser update in real time, no manual refresh. This is the feature that defined Brackets, and it's still front and center. |
| 60 | + |
| 61 | +**The lightweight workflow** is intact. Open a folder, start editing. No massive install, no mandatory plugins, no project configuration files to set up first. |
| 62 | + |
| 63 | +**Web-first focus.** HTML, CSS, JavaScript — that's the sweet spot. Phoenix Code is purpose-built for front-end work, not trying to be a general-purpose IDE. |
| 64 | + |
| 65 | +**Keyboard shortcuts and UI layout** are familiar. If you had muscle memory in Brackets, most of it still applies. |
| 66 | + |
| 67 | +--- |
| 68 | + |
| 69 | +## What's New in Phoenix Code |
| 70 | + |
| 71 | +These are the features the Brackets community asked for — and we finally built them. |
| 72 | + |
| 73 | +### Edit Directly in the Live Preview (Pro) |
| 74 | + |
| 75 | +Brackets' live preview was view-only. You could see changes reflected in real time, but you always had to make edits in the code. With [Phoenix Pro](/docs/Pro%20Features/live-preview-edit), you can click on any element in the live preview and edit it right there — change text, swap images by dragging, rearrange elements visually. The source code updates automatically. |
| 76 | + |
| 77 | + |
| 78 | + |
| 79 | +### Visual CSS Editing |
| 80 | + |
| 81 | +Brackets had inline color pickers — Phoenix Code keeps those and adds number dials you can scrub to adjust CSS values like margins, padding, font sizes, and more. Hover over a number, drag to adjust, and see the result update in live preview instantly. |
| 82 | + |
| 83 | + |
| 84 | + |
| 85 | +### Built-in Git |
| 86 | + |
| 87 | +Phoenix Code ships with native Git support based on the familiar Brackets Git extension, addressing many of its earlier limitations with a simpler UX and improved reliability. Commit, push, pull, diff, and branch management, all built in. |
| 88 | + |
| 89 | + |
| 90 | + |
| 91 | +### Runs in Your Browser |
| 92 | + |
| 93 | +Open [phcode.dev](https://phcode.dev) and start editing — no install or admin privileges needed. Works on Chromebooks, tablets, shared computers, anywhere you have a browser. The web app runs the same core as the desktop app, so for website editing and live preview it's just as capable. For Git, AI features, and the full experience, grab the [native app](https://phcode.dev/download). |
| 94 | + |
| 95 | +### Measurement and Inspection Tools |
| 96 | + |
| 97 | +Inspect spacing between elements, measure distances, and check alignment directly in the live preview. If you work from design mockups, this replaces the constant back-and-forth between your editor and a separate design tool. |
| 98 | + |
| 99 | + |
| 100 | + |
| 101 | +--- |
| 102 | + |
| 103 | +## How to Switch from Brackets |
| 104 | + |
| 105 | +Short version: open your project folder in Phoenix Code. That's it. |
| 106 | + |
| 107 | +**No migration needed.** Your project files work as-is. No config conversion, no import wizard. Just open the folder. |
| 108 | + |
| 109 | +**Extensions.** Most heavily used Brackets extensions — Emmet, Git, Beautify/Prettier, editor tabs — are now built in and actively supported. The extension marketplace is also growing for anything else you need. |
| 110 | + |
| 111 | +**Learning curve.** Minimal. The UI layout is familiar, the shortcuts are similar, and all the new features are additive — nothing you relied on was removed. You'll be productive in minutes. |
| 112 | + |
| 113 | +--- |
| 114 | + |
| 115 | +## Try Phoenix Code |
| 116 | + |
| 117 | +Phoenix Code was built for the Brackets community by the team behind Brackets. |
| 118 | +If you've been waiting for the update Brackets deserved, this is it. |
| 119 | + |
| 120 | +- **[Open Phoenix Code in your browser](https://phcode.dev)** — no install, start immediately |
| 121 | +- [Download the desktop app](https://phcode.dev/download) |
| 122 | +- [Live Preview documentation](/docs/Features/Live%20Preview/live-preview) |
| 123 | +- [Edit Mode (Pro)](/docs/Pro%20Features/live-preview-edit) |
| 124 | +- [Read more about the Brackets legacy](/blog/Blog-Legacy) |
0 commit comments