How to use the Online HTML Editor with Live Preview
- 1. Write in the tabsPut markup in HTML, styles in CSS and scripts in JavaScript.
- 2. Run the previewPress Run preview, then tick Auto-refresh to update while you type.
- 3. Download the pageSave everything as one index.html file you can open anywhere.
How the preview is built
When you press Run, the editor joins your three tabs into a single HTML document: the CSS goes into a <style> tag in the head, the HTML goes into the body and the JavaScript goes into a <script> tag at the end of the body. Putting the script last means the elements already exist when your code looks for them, so document.getElementById works without waiting for a load event.
The preview runs in a sandboxed iframe. Your script can change the preview page but cannot reach this page, your cookies or other sites' data. Pop-ups such as alert() are blocked inside the sandbox, so print messages into the page instead.
Starter example: a click counter
The editor opens with a small project. The HTML has a heading, a button with id btn and an empty paragraph with id out. The CSS colours the heading orange. The JavaScript keeps a counter n and on each click sets the paragraph to Clicked 1 times, Clicked 2 times and so on. Click it three times in the preview and you will see Clicked 3 times.
Ideas to practise next:
- Add a Reset button that sets
nback to 0. - Build a to-do list with an input, an Add button and a
<ul>. - Style a card with flexbox, using the Flexbox Playground to get the CSS.
Your three tabs are saved in this browser's local storage, so a refresh will not lose your work. Use Reset to start again.
Frequently asked questions
Can I link external CSS or JS libraries?
Yes. Add a link or script tag pointing to a CDN in the HTML tab. It loads inside the preview frame.
Why does alert() not work?
The preview is sandboxed for safety and pop-up dialogs are blocked. Write messages into the page or use the JavaScript compiler's console.
Where is my code saved?
Only in your own browser's local storage. Clearing site data or using a private window will remove it.
Does it cost anything?
No. Typing code is open to all. Running the preview the first time asks for your name and WhatsApp number once, then the editor and every other Uncodemy tool work freely.