phoenix: Open Source IDEs & Code Editors

What is phoenix?

Phoenix is a free, open-source text editor for web developers that runs in the browser and aims to make editing JavaScript, HTML, and CSS feel as approachable as playing a video game.

What it is

Phoenix is a modern open-source and free software text editor, written in JavaScript and released under the AGPL-3.0 licence, that lives in the web ecosystem rather than on the desktop. It is built on a set of explicit tenets: it targets web development, with JavaScript, HTML and CSS enjoying special status; it treats code editing with a game-like user experience aimed at a school kid who would play it after skipping the tutorial; it stays light-weight; and it keeps an uncompromised local development experience while supporting pluggable remote back-ends. Development status is listed as Stable/Active.

The concrete problem Phoenix solves is that it removes the install-and-compile barrier typical of editors and IDEs: the Phoenix core works from a static web server, and the build process is compile-step-less, meaning most code changes during development do not need to be recompiled. It also replaces the Brackets editor as the extension platform it inherits from — Phoenix maintains full compatibility with Brackets extensions, except brackets-node extensions — so developers moving off Brackets keep their existing extensions while gaining an editor that runs from a static host.

Key capabilities

Runs entirely from a static web server, with the Phoenix core requiring no server-side runtime of its own.
Provides pluggable remote back-ends alongside an uncompromised local development experience.
Maintains full compatibility with Brackets extensions, excluding only brackets-node extensions.
Prioritises JavaScript, HTML and CSS editing with first-class support for those three languages.
Offers a compile-step-less build process in which most development code changes require no recompilation.
Ships release artifacts to a dist folder through the npm run release:dev, npm run release:staging and npm run release:prod commands.
Includes a Phoenix Builder MCP setup for Claude Code and Codex clients, with repository configuration to control and test a Phoenix dev build.

Who uses it and how

Web developers editing HTML, CSS and JavaScript locally, serving the editor from http://localhost:8000/src in Chrome or Edge after a build.
Brackets users migrating their existing extension library to a maintained editor.
Contributors building the project themselves, using npm run build for release-like builds or npm run build:debug for debug builds with extra debug symbols.
Teams running the Jasmine/Mocha test suite headlessly in Playwright, in either Chromium or Firefox, including inside GitHub Actions via npm run testChromium.
Agent-assisted workflows, where Claude Code or Codex drives a Phoenix dev build through the Phoenix Builder MCP configuration.

Getting started

Install the gulp CLI once globally (sudo npm install -g gulp-cli on Mac/Linux, npm install -g gulp-cli on Windows), then run npm install, npm run build, and npm run serve, navigating Chrome or Edge to http://localhost:8000/src.

How it compares

Phoenix is the direct successor to Brackets in this registry: it explicitly promises full compatibility with Brackets extensions apart from brackets-node extensions, so the migration path is one of continuity rather than replacement of the extension ecosystem. Where Brackets was a desktop application, Phoenix instead runs from a static web server with pluggable remote back-ends and a compile-step-less development loop, which makes it deployable as a hosted page as well as locally.

When to use it — and when not

A self-hoster must build and operate the static site itself — installing gulp-cli, running the npm build, and hosting the dist output — and contributors are asked to run SonarLint from WebStorm or another IDE, since it is not yet available as a Brackets extension. It should not be picked by developers working outside web development, since JavaScript, HTML and CSS are deliberately privileged, nor by anyone needing brackets-node extensions; note also that the repository carries 266 open issues, which is worth scanning before committing to it as a daily driver.

project readme (upstream, from github) — read inline

Welcome to Phoenix!

Website: https://phcode.dev

Phoenix is a modern open-source and free software text editor designed to make coding as simple and fun as playing a video game.

Code Guardian

commit msg linted by git-commit-msg-linter

Error and App stability monitoring powered by

Development status: Stable/Active.

Screenshot from 2022-09-20 13-35-03

Tenets

Targeted for web development. Js, html and CSS enjoy special status.
Game UX - Approach code editing like a game that a school kid would play after skipping the tutorial.
Light-weight editor.
Extension support maintaining full compatibility with Brackets extensions (except brackets-node extensions).
Uncompromised local development experience.
Support for pluggable remote back-ends.
Phoenix core will work from a static web server.
Compile step less build process. Code changes in phoenix do not need to be recompiled for most cases for development.
Prioritize simplicity and ease of development.

Contributing/ Feedback

Building Phoenix

Source Repository

Install gulp globally once.
- In Mac/Linux: sudo npm install -g gulp-cli
- In Windows: npm install -g gulp-cli
run npm install
To build after npm install:
- npm run build - generate builds close to release builds locally.
- or npm run build:debug to build debug builds for development with more debug symbols.

Running phoenix

run npm run serve in the terminal.
Use chrome/edge browser to navigate to http://localhost:8000/src

IDE Setup

SonarLint static code analysis checker is not yet available as a Brackets extension. Use sonarLint plugin for webstorm or any of the available IDEs from this link before raising a pull request: https://www.sonarlint.org/

For Claude Code or Codex, see Phoenix Builder MCP setup. The repository includes configuration for both clients to control and test a Phoenix dev build.

Building Release artifacts

run npm install
To build the release artifacts, run one of the following commands depending on what build you want:
- npm run release:dev, npm run release:staging, npm run release:prod
The release artifacts to host will be in dist folder.

Running and debugging tests in browser

This is the easiest and preferred way to run Phoenix tests.

run npm run build in the terminal.
- NB: this will setup all the required files for test
Use chrome/edge browser to navigate to Phoenixhttp://localhost:8000/src/index.html
In Phoenix Menu, select Debug > Phoenix Code Diagnostic Tools > Run Phoenix Code Tests To open the test runner.
Run tests as required.
- NB: To reset test data files, click on reset and reload tests option in the test runner.
You can use the browser dev tools to debug.

Running and debugging tests in playwright headless mode or in GitHub Actions

We use Playwright to run the headless version of our tests. Please note that we do not use Playwright as our actual test framework, but as a headless browser(chrome and firefox) to run our tests written in Jasmine/Mocha.

run npm run test in the terminal to run the unit tests run in GitHub actions. Eg. npm run testChromium.
To debug the tests, npm run testDebug. Eg. npm run testFirefoxDebug. However, we recommend using the above Running tests in browser section to actually fix/debug tests that are failing in the pipeline. It has much better debug UX and fixing it directly in the browser will almost certainly fix it in playwright.
To run integration tests use command: npx cross-env TEST_ENV= npm run test
- The allowed integration test suite names are: integration, LegacyInteg, mainview, livepreview. You can get these suite names from the test runner.
- Eg: npx cross-env TEST_ENV=integration npm run testChromium
To debug integration tests use command: npx cross-env TEST_ENV= npm run testDebug
- Eg: npx cross-env TEST_ENV=mainview npm run testChromiumDebug

Running tests in dev staging and prod stacks in playwright

To run tests against these stacks locally, follow these steps:

Build the release using npm run release:. Eg: npm run release:dev
Run the unit tests using format: npm run testDist. Eg. npm run testChromiumDist.
Run the integration tests using the format: npx cross-env TEST_ENV= npm run testDist. Eg. npx cross-env TEST_ENV=mainview npm run testChromiumDist.

To run tests against these dev/staging/prod in the browser

Build the release using npm run release:. Eg: npm run release:dev
Run npm run serve to start the server.
Go to http://localhost:8000/dist-test/test/SpecRunner.html in the browser to run tests that was built for the stage above.

Browsing the virtual file system

To view/edit the files in the browser virtual file system in Phoenix: debug menu> Open Virtual File System

Clean and reset builds

clean builds only: npm run clean

Acknowledgements

Phoenix is based on the Brackets code editor by Adobe. Find out more on Adobe Brackets here.
Our main code editor library https://codemirror.net/
Inspired by previous work from the Mozilla Thimble project to port brackets to the web. https://github.com/mozilla/brackets
In browser server based on nohost by https://github.com/humphd/

License

GNU AGPL-3.0 License

This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License along with this program. If not, see https://opensource.org/licenses/AGPL-3.0.

Frequently asked questions

Is phoenix free to use?

phoenix is open source under the AGPL-3.0 licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does phoenix do?

The text editor designed to make coding as simple and fun as playing a video game

What is phoenix written in?

phoenix is primarily written in JavaScript. Its source is publicly available at https://github.com/phcode-dev/phoenix, and it has 2,998 GitHub stars.