Online HTML editor with live preview
Write HTML, CSS and JavaScript in three tabs and watch the page update next to your code. Your work is saved in your browser and downloads as one file.
Runs in your browser. Nothing you enter is uploaded.
How to use the online HTML editor
- Write your markup in the HTML tab, styles in CSS and scripts in JavaScript.
- The preview on the right updates as you type; untick Auto-run to update only when you click Run.
- Press Ctrl + Enter in any tab to run immediately.
- Click Download .html to save everything as a single index.html file, or Reset to start over.
How does the live preview work?
The editor combines your three tabs into one page: your CSS goes into a <style> tag in the head, your HTML into the body, and your JavaScript into a <script> tag at the end of the body, so it runs after the elements exist. That page is loaded into the preview frame, which reloads each time the code changes.
If you paste a complete document that already has its own <html>, <head> and <body>, the editor keeps it as it is and adds your CSS just before </head> and your JavaScript just before </body>. The Download button saves exactly this combined page as index.html.
Is the preview safe?
The preview runs in a sandboxed frame. Scripts and alert boxes work, but the code cannot read this site's storage or cookies, open pop-up windows or send this page to another address. That makes it a comfortable place to paste a snippet from a tutorial or a forum and see what it does before using it in a real project.
What is it good for?
Quick experiments: trying a CSS layout, checking how a form looks, testing a small script that changes the page, or building a minimal example for a bug report or a question. For larger projects with several files, frameworks or build steps, a code editor on your computer is the better fit; for one-page ideas, this is faster.
Frequently asked questions
Is my code saved?
Yes, in your own browser. Every time the preview runs, your HTML, CSS and JavaScript are stored in local storage, so they are still there when you reload or come back later on the same device. Nothing is uploaded. Reset replaces your code with the starter example.
Can I use external libraries or fonts?
Yes. Add a <link> or <script src> tag pointing at a public CDN to the HTML tab, just as you would in a normal page, and the preview loads it from the internet. The editor itself does not upload your code; only the preview frame fetches the files you link to.
Why does my JavaScript not find an element?
Your script runs once each time the preview reloads, after the HTML in the body. If document.querySelector returns null, check that the id or class in the script matches the HTML exactly, including upper and lower case. Errors appear in your browser's developer console for the preview frame.
How do I save my work as a file?
Click Download .html. You get one index.html file with your CSS and JavaScript included, which opens in any browser and can be uploaded to any web host as it is.
Does the editor support keyboard shortcuts?
Ctrl + Enter (or Cmd + Enter on a Mac) runs the preview, and the Tab key inserts two spaces instead of moving to the next field, so you can indent code naturally.