Write HTML, CSS and JavaScript in separate tabs and see a live, sandboxed preview as you type. Console output, ready-made snippets, projects with snapshots and diff, responsive widths, Prettier formatting, and HTML, zip or PDF export. Free, no signup.
Using this tool in an article, lesson or report? Copy a ready-made link or citation.
HTML link
<a href="https://www.toolnova.org/dev-tools/html-editor">Live HTML Editor</a> by ToolNova
APA
ToolNova. (2026, October 30). Live HTML Editor [Online tool]. https://www.toolnova.org/dev-tools/html-editor
MLA
“Live HTML Editor.” ToolNova, 30 Oct. 2026, www.toolnova.org/dev-tools/html-editor.
Write and preview HTML in real time
This online HTML editor with live preview renders your HTML, CSS and JavaScript beside the code about 300ms after you stop typing. Keep markup, styles and script in separate HTML, CSS and JS tabs, read console.log output and errors below the editor, and insert ready-made sections such as a navbar or pricing table. Check the layout at desktop, tablet (768px) and mobile (375px) widths, tidy the code with Prettier, and export one .html file, a zip of separate files, or a PDF. Projects and snapshots save in this browser only and are never uploaded.
This live HTML editor renders your markup beside the code as you type, so you can prototype layouts, test snippets and learn by experimenting without setting up a project. It uses Monaco (the editor engine behind VS Code) for syntax highlighting and autocompletion, and it runs entirely in your browser with no signup.
Features
Real-time sandboxed preview with Split, Code & Preview modes
Snippet menu: navbar, hero, pricing, forms and more
Multiple projects and named snapshots with a diff view
Saved in this browser's local storage, never uploaded
Export one .html file, a zip of files, or a PDF
How to use Live HTML Editor
1
Paste or write your HTML
Type a full document or a fragment in the HTML tab. Use the CSS and JS tabs for styles and script, or keep them inline in <style> and <script> tags. Libraries can load from a CDN over https.
2
Watch the live preview
The preview pane re-renders about 300ms after you stop typing. Use Split, Code or Preview view to arrange the workspace.
3
Check responsive widths
Switch between desktop (full width), tablet (768px) and mobile (375px) to see how the layout reflows.
4
Prettify the markup
Click Prettify to reindent the document with Prettier (2-space indent, 100-character lines).
5
Read the console
Open Console to see console.log output and runtime errors from your page without opening browser developer tools.
6
Add a section from Snippets
Open Snippets and pick a starter page, navbar, hero, feature grid, card, pricing table, testimonial, contact form, call to action or footer. It is inserted at your cursor.
7
Save projects and snapshots
Keep several projects, save a named snapshot before a risky change, and compare any snapshot with your current code in a side-by-side diff.
8
Export your work
Download one self-contained .html file, a zip with index.html, style.css and script.js, Print → Save as PDF for selectable multi-page text, or the PDF button for a quick image capture.
Common use cases
A beginner types an HTML tag and immediately sees what it does.
A developer isolates a broken snippet and debugs it without spinning up a project.
A marketer previews an HTML email or landing-page block at 375px before sending it for review.
A teacher shows code and rendered output side by side in class.
A freelancer mocks up a component and sends the client an .html file, a zip of separate files or a PDF.
A learner keeps HTML, CSS and JavaScript in their own tabs and watches console.log output while they experiment.
A designer snapshots a layout before trying a bolder version and compares the two in a diff.
Detailed guide
How to test HTML code online
Paste your code into the editor and the preview updates automatically, with no Run button to press. You can paste a complete document with <!DOCTYPE html>, <head> and <body>, or just a fragment such as a <div> with a few styles, and the browser fills in the missing structure. Switch to Preview view to see the result full size, or Code view when you want room to write. If something doesn't look right, click Prettify first: clean indentation makes an unclosed tag or a misplaced </div> much easier to spot.
Write HTML, CSS and JavaScript together
The editor has three tabs: HTML, CSS and JS. Styles typed in the CSS tab and script typed in the JS tab are linked into the preview for you, so you can write them the way a real project is organised. You can still use a <style> block or inline style attributes in the HTML tab, a <script> block at the end of the <body>, or event attributes like onclick. You can also load a library or framework from a CDN, such as a Google Font, Tailwind's Play CDN or a charting library, with a normal <link> or <script src> tag pointing at an https URL. The preview runs your scripts in a real browser engine, so DOM events, timers, canvas and fetch calls to CORS-enabled APIs all behave as they would on a live page.
Test responsive layouts at phone and tablet widths
Use the device buttons above the preview to constrain its width. Include <meta name="viewport" content="width=device-width, initial-scale=1"> in your <head> so media queries respond to the preview width the same way they would on a phone.
Preset
Preview width
What to check
Desktop
Full pane width
Max-width containers, multi-column grids, hover states
Tablet
768px
The common md breakpoint: nav collapsing, 2-column layouts
Mobile
375px
Text wrapping, tap-target size, images overflowing, horizontal scroll
What the live preview can and can't do
The preview is a sandboxed frame loaded from your code. For safety it has an opaque origin: your scripts can't read this site's cookies or storage, and this site can't read your page. That design leads to a few predictable limits, listed below so you don't lose time debugging the editor instead of your code.
Works
Doesn't work (and why)
Inline <style>, style attributes and <script>
Relative paths like src="img/logo.png": there is no folder on a server to resolve them against. Use full https URLs or data URIs
CSS and JS from a CDN over https
localStorage, sessionStorage and cookies inside your script: the sandbox blocks them (they throw a SecurityError)
alert(), confirm(), forms and links opening in a new tab
fetch() to APIs that don't send CORS headers: the browser blocks the response, just as it would on a real site
Images and fonts from public URLs
Extra files beyond HTML, CSS and JS, npm imports or build steps: it is a three-file editor, not a project IDE
Prettify runs Prettier's HTML formatter in your browser. It reindents nested tags with 2 spaces, wraps long lines at 100 characters, and puts attributes on their own lines when a tag gets too wide. It's tuned for HTML structure, so the contents of <style> and <script> blocks are left largely as you wrote them. It doesn't change what your page renders. If the markup has a syntax error Prettier can't parse, you'll see a message and your code is left exactly as it was.
See console output and errors
Open the Console panel to read what your page logs. console.log, warnings and errors from your script appear below the editor, along with uncaught runtime errors, so you can debug without opening your browser's developer tools. Errors show the message only, not a line number, because the editor combines your three tabs into one page before running it. Clear the panel between runs to keep it readable.
Start from ready-made sections
The Snippets menu inserts a complete section at your cursor: a starter page, navbar, hero, feature grid, card, pricing table, testimonial, contact form, call to action or footer. They are plain HTML and CSS with no framework, so you can edit every line, restyle them or take them apart to see how they work.
Keep several projects in one browser and switch between them from the project menu, or rename, duplicate and delete them. Before a risky change, save a named snapshot. Opening a snapshot shows a side-by-side diff against your current code for each file, and you can restore it with one click. Use the backup button to download every project as a file and restore it on another device or after clearing your browser data. Projects and snapshots are stored in this browser only.
Export to HTML or PDF
There are four export options, each suited to a different job. The .html download is one self-contained file with your CSS and JavaScript included, ready to open in a browser or drop into a project. The zip download gives you index.html, style.css and script.js as separate files linked together. Print sends the rendered preview to your browser's print dialog: choose Save as PDF to get selectable text, working multi-page breaks and anything your JavaScript drew. The PDF button is a one-click shortcut that captures the static HTML and CSS as an image, splits it across A4 pages and downloads it. Because it's an image, its text isn't selectable, and content created by JavaScript won't appear. If the quick PDF fails, the usual cause is an external image without CORS headers; use Print instead.
Preview HTML email templates
Email clients support far less HTML and CSS than browsers do, so email templates follow older conventions: a table-based layout, a content column about 600px wide, inline style attributes rather than <style> blocks, and images with fixed width attributes. Build that way here and switch to the 375px preset to check how the email stacks on a phone. The preview shows how a modern browser renders your email, which is a good first check. Some clients, especially Outlook on Windows, will render it differently, so always send a test to real inboxes before a campaign goes out.
Starter snippets to paste in
Short patterns you can type in and adapt. Each one needs only a few lines and shows its result immediately in the preview.
Nothing you type is sent to a server. To keep your work between visits, the editor saves your projects and snapshots to this browser's local storage on this device, so they are still there after a refresh but are not synced to other devices or other browsers. Download a backup if you want a copy that survives clearing your browser data. Clicking Reset returns the open tab to its starting content (the sample page for HTML, empty for CSS and JS). On a shared computer, delete your projects before you leave.
When to use a full code playground instead
This editor is built for fast, private work on one page: testing a snippet, learning HTML, checking a layout at phone width or previewing an email block, with no account needed. If you need more than HTML, CSS and JS files, npm packages, a framework build step, a shareable link or real-time collaboration, a full playground such as CodePen, JSFiddle or PlayCode is the better fit. Many developers use both: a quick scratchpad for checks like these, and a full playground for projects they want to share.
Type or paste your HTML into the editor. The preview re-renders about 300ms after you stop typing, showing how a real browser displays your code. There's no Run button, no install and no signup.
Can I include CSS and JavaScript in the HTML editor?
Yes. The editor has HTML, CSS and JS tabs, and what you type in the CSS and JS tabs is linked into the preview automatically. You can also use a <style> block, style attributes, a <script> block or event attributes like onclick in the HTML tab, and load libraries and fonts from a CDN with an https URL.
How do I beautify HTML code online?
Paste your messy or minified HTML and click Prettify. Prettier reindents nested tags with 2 spaces and wraps long lines at 100 characters without changing how the page renders. If the HTML has a syntax error Prettier can't parse, your code is left untouched and you'll see a message.
Can I export my HTML code as a PDF?
Yes, two ways. Print → Save as PDF uses your browser's print engine, which gives selectable text, multi-page output and anything your JavaScript rendered. The PDF button is a quick one-click image capture of the static HTML and CSS, split across A4 pages; its text isn't selectable and JavaScript output isn't included.
Is my HTML code saved anywhere?
Only in your own browser. Your projects and snapshots are saved to this browser's local storage so your work survives a refresh, but nothing is uploaded to a server and it isn't synced to other devices. Download a backup to keep a copy, or clear this site's data to remove everything.
How do I see console.log output in the HTML editor?
Click Console to open the panel below the editor. It shows console.log, warnings and errors from your page, plus uncaught runtime errors, so you don't need your browser's developer tools. Errors show the message but not a line number.
Can I keep more than one project or go back to an earlier version?
Yes. Create, rename, duplicate and delete projects from the project menu. Save a named snapshot before a big change, open it later to compare it with your current code in a side-by-side diff, and restore it if you prefer the old version.
Can I download my HTML, CSS and JS as separate files?
Yes. The zip download contains index.html, style.css and script.js linked together. If you would rather have one file, the .html download is self-contained with the CSS and JavaScript included.
Why doesn't my image or external CSS file load in the preview?
Relative paths like img/logo.png or styles.css have no folder to resolve against, because the preview is built from your code rather than from files on a server. Use a full https URL, paste the CSS into a <style> block, or turn a small image into a data URI.
Why does localStorage throw an error in my script?
The preview runs in a sandboxed frame with an opaque origin, so it can't touch this site's data. As a result, localStorage, sessionStorage and cookies are unavailable to your code there and throw a SecurityError. Test storage logic in a local file or a full playground.
Can I use this HTML editor to learn HTML as a beginner?
Yes. Type a tag and see the result immediately. Start with basic structure (<h1>, <p>, <a>, <img>), then add a <style> block and experiment with colors and layout. That instant feedback is much faster than editing a file and refreshing a browser tab.
Does it work as a responsive preview?
Yes. Switch the preview between desktop (full width), tablet (768px) and mobile (375px). Add a viewport meta tag to your <head> so your media queries respond the way they would on a real phone.
