Write HTML, CSS and JavaScript and see the page update as you type. Free, with no sign-up.
Press Control or Command plus Enter to run. When Tab inserts indentation, press Escape and then Tab to move focus out of the editor.
Type in the editor or press Run to render it.
This online HTML editor gives you three files, index.html, style.css and script.js, with a live preview beside them. Type or paste code and the page runs automatically, or press Run (Ctrl/Cmd + Enter) to run it straight away. It does what people look for in an HTML compiler or code runner, although nothing is compiled: your browser renders the HTML, applies the CSS and runs the JavaScript just as it would for a real web page.
The preview updates about half a second after you stop typing. Each new version loads in the background and replaces the old one only when it is ready. Switch between responsive, desktop, tablet and mobile widths to check a layout. Open the console for console.log output and JavaScript errors; click a file and line when a location is available.
This editor processes your code and saves your draft in your browser. It does not upload your code. The preview blocks links, form submissions, pop-ups, fetch and XMLHttpRequest. HTTPS scripts, stylesheets, images and fonts can still load. Code and libraries you run can send data through those resources, including page contents. Run only code you trust.
This page is made for quick experiments and learning. When a page grows into a project, Phoenix Code is a free, open-source code editor for web development. It runs in your browser at web.phcode.dev and as a desktop app for Windows, Mac and Linux.
| Feature | This online editor | Phoenix Code |
|---|---|---|
| Files | index.html, style.css and script.js | Whole projects, with folders and any number of files |
| Preview | Sandboxed live preview on this page | Live Preview that highlights the element you are editing |
| Saving | A draft in this browser, and one HTML file to download | Your files, saved in your project folder |
| Coding help | Autocomplete and a console | Code hints, Emmet and HTML validation, plus Git in the desktop app |
| Cost | Free, no sign-up | Free Community Edition, with optional Phoenix Pro features |
Paste your code into index.html. The preview runs it automatically when you stop typing, or you can press Run or Ctrl/Cmd + Enter to run it immediately. CSS in style.css and JavaScript in script.js are added to the page for you.
HTML isn't compiled. People search for an HTML compiler or code runner when they want to see what their code does, and that is what this editor shows: your browser renders the HTML and runs the JavaScript directly. JavaScript errors appear in the console; HTML and CSS are not checked for validity.
Yes. Link them from an https URL, for example a Bootstrap or Tailwind CDN link in index.html. Network requests made by your own code, such as fetch or XMLHttpRequest, are blocked in the preview.
It is free and needs no account. This tool does not upload your code. Code and external resources you run can contact other servers and send data. A draft is kept in this browser so you can return to it.
Download index.html to save one file with your CSS and JavaScript included, or use Copy all. To continue in Phoenix Code, select Copy code to continue, then Open Phoenix Code after the copy succeeds. Close the welcome screen if shown, open index.html in a project, replace its contents with the copied page, save, and open Live Preview. Your code is not transferred automatically.
The best one is the one that fits how you work. Phoenix Code is a free, open-source HTML editor for Windows, Mac and Linux that also runs in the browser. It is the successor to Adobe Brackets and comes with Live Preview, code hints and Emmet built in.
Last updated:
Work with whole projects and Live Preview in the free Community Edition. Phoenix Pro adds visual editing of text, images and styles. The desktop app includes a 7-day Pro trial; Community stays free afterward.