Skip to main content

What is Phoenix Code?

Phoenix Code is a lightweight, web-first code editor built by the same team behind Brackets. It's a front-end editor centered on Live Preview: edit your HTML and CSS and watch the page render as you type, or edit the rendered page directly and let Phoenix Code update your source code automatically.

This page covers what Phoenix Code is, why you might use it, and where to go next.

Why Phoenix Code​

Here's what sets Phoenix Code apart.

  • Live Preview — Edit your HTML and CSS and watch the page update in real time. Phoenix Code goes a step further: edit the preview directly to change text, add and rearrange elements, or swap images, and your source code updates automatically.
  • AI assistant — A built-in AI agent (powered by Claude Code) works alongside you. It reads and edits your files, runs terminal commands, and because it's wired into Live Preview, it can see your running page, take screenshots, and verify its own work. Plan, Edit, and Full Auto modes keep you in control, and every change it makes is reversible.
  • Runs everywhere — Native desktop apps for macOS, Windows, and Linux from phcode.io, or the full editor in your browser at phcode.dev with nothing to install.
  • Built-in tools — Git, Terminal, Emmet, Beautify, and code hints all ship in the editor, so you can start working right away.
  • Visual editing — Color pickers, gradient editors, and draggable number scrubbing let you adjust CSS values directly and see the result immediately.
  • Extensions — Add features, themes, and language support from the built-in Extension Manager, with a marketplace of community extensions and themes.
  • Open source — Phoenix Code is open source, released under the AGPL-3.0 license.

Free vs Pro​

You can build complete websites for free. The core editor, Live Preview, Design Mode, Git, Terminal, and code tools are all included at no cost.

Phoenix Pro adds:

  • Live Preview Edit — edit the rendered page directly and sync changes back to your source automatically.
  • AI — unlimited AI use (free users get a daily and monthly chat limit).
  • Device Preview — check how your page looks at phone, tablet, and desktop sizes.
  • Measurements — ruler lines from a selected element to the edges of the page, labeled with exact pixel positions, for precise alignment.
  • Image Gallery — browse stock images from providers like Unsplash and Pexels and embed or download them into your project without leaving Phoenix Code.
  • Markdown Editor — edit Markdown directly in the preview with a full rich-text editor that keeps your source in sync.

See plans on the pricing page.

Phoenix Pro is free for students and educators. If you have a .edu or .ac.* email, or your school requests an educational volume license, you get the full Pro feature set at no cost. See Phoenix Pro for Education.

Who it's for​

Phoenix Code is for anyone building for the web, and especially:

  • Front-end developers who work in HTML, CSS, and JavaScript.
  • Web designers who want to edit a page visually and see changes immediately.
  • Students and educators who need a capable, no-cost editor that also runs in the browser.

Next steps​

Want to skip installing? Open phcode.dev and start coding in your browser. Prefer the desktop app? Download it from phcode.io.