Online HTML Editor & Code Runner with Live Preview
Write HTML, CSS and JavaScript and see the page update as you type. Free, with no sign-up.
Local editing — external resources may send data
HTML editor workspace
ReadyChanges waitingRunning…Preview updatedUpdated with errorsPreview not updatedAuto-run pausedThe page took too long to load, so the preview wasn't updated. Check for an endless loop, then press Run.The page tried to open another address. Navigation is blocked in the preview, so the previous version is still shown.Your code is over 2 MB, which is too large to preview or save in this browser. Download it and open it in Phoenix Code instead.Auto-run is off for code over 1 MB. Press Run to update the preview.The last run didn't finish, possibly because of an endless loop. Auto-run is paused: fix the code, then press Run.Console output from your page will appear here.index.html code editorstyle.css code editorscript.js code editorThis file is very large, so highlighting and autocomplete are off to keep typing fast.Code copied as one HTML file.Couldn't copy. Download index.html instead, or select the code and copy it.Code copied. In Phoenix Code, close the welcome screen if shown, replace index.html with your copied page, save, and open Live Preview.Copy code to continueOpen Phoenix CodeCopying code…Your code changed. Copy it again before continuing.index.html downloaded, with your CSS and JavaScript included.Couldn't create the download. Use Copy all instead.Starter files restored.This browser isn't saving your draft. Download your code to keep it.alert() from your pageconfirm() returned false in the previewprompt() returned null in the previewNetwork requests such as fetch are blocked in the preview.Links don't open in the preview:Form submission is blocked in the preview. Handle the submit event in script.js to test your form.Pop-up windows are blocked in the preview.Couldn't load:Console output was limited to keep the preview responsive.The page reported an unknown error.Stopped a loop that ran for more than a second without pausing. It may never end.Live preview of your page
HTML, CSS & JavaScriptYour draft is saved in this browser
Ready
CSS and JS load automaticallyEsc, then Tab, leaves the editor
Press Control or Command plus Enter to run. When Tab inserts indentation, press Escape and then Tab to move focus out of the editor.
Live preview
Your page will appear here
Type in the editor or press Run to render it.
Console
How to create an HTML file
An HTML file is a plain text file saved with the .html extension. To create one, open a text editor, type the page skeleton below, save the file as index.html, and open it in a browser. The starter page in the editor above already contains this skeleton, so you can also edit it there and press Download.
Open a plain text editor: Notepad on Windows, TextEdit on Mac (choose Format, then Make Plain Text first), or a code editor such as Phoenix Code or VS Code (File, then New File).
Type the HTML skeleton: the doctype line, then the html, head and body tags, with a title inside the head and your text inside the body. Copy the example below to start.
Save it as index.html. In Notepad, set Save as type to All Files first, or the file becomes index.html.txt and opens as plain text instead of a web page. Any name works as long as it ends in .html and has no spaces.
Open the file: double-click it and your browser renders the page. To make an HTML file without saving anything on your computer, paste the skeleton into the editor above and press Download.
The same steps cover every way of asking the question. Creating a file in HTML, making an HTML document, or starting a new .html file all mean typing this skeleton and saving it with the .html extension.
<!doctype html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, world</h1>
<p>This is my first web page.</p>
</body>
</html>
Run HTML, CSS and JavaScript online
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.
A real-time HTML editor with live preview
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.
Test HTML code in a private sandbox
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.
How to run an HTML file
Paste your HTML into index.html, or edit the starter page. Put CSS in style.css and JavaScript in script.js; both are added to the page automatically.
Watch the preview update as you type, or press Run (Ctrl/Cmd + Enter).
Open the console to check for errors. Click an error's location to jump to that line.
Download index.html to get one file with your CSS and JavaScript included. Open it in any browser, or in Phoenix Code to keep building.
Online HTML editor or Phoenix Code?
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
HTML editor questions
How do I run HTML code online?
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.
Is this an HTML compiler?
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.
Can I use CSS frameworks and JavaScript libraries?
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.
Is it free, and do I need an account?
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.
How do I save my code or keep working in Phoenix Code?
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.
What is the best free HTML editor for Windows, Mac or Linux?
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.
How do I create an index.html file?
Create a new plain text file, paste in the HTML skeleton, and save it with the exact name index.html. In Notepad set Save as type to All Files so it does not become index.html.txt. Web servers open index.html first, which is why a site's home page uses that name. In this editor the starter file is already called index.html, so pressing Download gives you one.
Last updated:
Build the whole site in Phoenix Code
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.