About this HTML editor
This is an online HTML editor with a live preview. Write HTML, CSS and JavaScript in the three tabs and the page you are building redraws beside them as you type, with a console underneath for everything your script logs and every error it throws.
It all runs in your own browser, so there is nothing to install, no account and no server in between. When you are happy with it, download the lot as one .html file that opens anywhere.
How to use it
- Write your markup in the HTML tab, your styles in CSS and your script in JS. Leave out
<html>,<head>and<style>tags: the editor adds them. - Run shows your page in the preview. With auto-run on, it then updates a moment after you stop typing. Ctrl+Enter (⌘+Enter on a Mac) runs it from the keyboard.
- Console under the preview shows what your script logs with console.log(), console.warn() and console.error(), and any error it throws.
- Stop throws the preview away, which is how you get out of an infinite loop. It stays stopped until you press Run.
- Download saves everything as one .html file. Your code is also kept in this browser between visits; Reset puts the starter page back.
Frequently asked questions
Is this online HTML editor free?
Yes, with no sign-up and no limits. Everything runs in your browser, so your code is never uploaded anywhere.
How does the live preview work?
The editor builds one web page from your three tabs, with the CSS in the head, the HTML in the body and the JavaScript after it, and shows it in a frame next to the code. With auto-run on it rebuilds a moment after you stop typing. Turn auto-run off to update it only when you press Run.
Why did alert() or a form submit not do anything?
The preview is a sandboxed frame that is allowed to run scripts and nothing else, so pop-ups such as alert(), confirm() and prompt(), form submissions and new windows are blocked. Use console.log() to see values instead, and handle forms with a submit listener that calls event.preventDefault().
What happens if my JavaScript has an infinite loop?
A loop that never ends keeps the preview busy and can slow the whole page down. Press Stop to throw the preview away, fix the loop, then run it again. The editor never runs your code by itself when the page loads, so a saved loop cannot lock you out.
Can I use my code in a real website?
Yes. Download saves a single .html file with your CSS in a <style> tag and your JavaScript in a <script> tag. Open it in any browser, or split it into separate files for a larger project.
Is my code saved?
Your code is kept in this browser, so it is still here next time you visit, and nowhere else. Clearing your site data or pressing Reset removes it.