How the HTML editor and preview work
The left pane is a CodeMirror 5 editor in HTML mode. It highlights tags and attributes, adds the closing tag when you type an opening one (type <section> and </section> appears after the cursor), closes quotes and brackets, and lets you fold any element from the arrows in the gutter.
The right pane is an <iframe> that receives your code through its srcdoc attribute. It re-renders about half a second after you stop typing, so there is no Run button. The frame is sandboxed with scripts allowed, which has practical consequences:
- Inline
<script> code runs, but alert(), confirm(), and prompt() are silently ignored.
localStorage and cookies are unavailable. Reading localStorage throws a SecurityError.- Forms do not submit.
- External CSS and JavaScript only load from hosts this site allows, such as
cdn.jsdelivr.net and cdnjs.cloudflare.com. A link to another CDN is blocked.
- Relative paths like
href="styles.css" resolve against this site, not your project, so they return 404.
Worked example: cleaning up pasted markup
Markup copied from a CMS, an email template, or a minified page often arrives as one long line. Paste it in and click Beautify HTML:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Pricing</title></head><body><section class="plan"><h2>Pro plan</h2><p>Billed <strong>yearly</strong>, cancel anytime.</p><ul><li>10 projects</li><li>Priority support</li></ul><a class="btn" href="/signup?plan=pro">Start trial</a></section></body></html>
The formatter (js-beautify 1.14) produces:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pricing</title>
</head>
<body>
<section class="plan">
<h2>Pro plan</h2>
<p>Billed <strong>yearly</strong>, cancel anytime.</p>
<ul>
<li>10 projects</li>
<li>Priority support</li>
</ul><a class="btn" href="/signup?plan=pro">Start trial</a>
</section>
</body>
</html>
Indentation is two spaces, <head> and <body> are indented inside <html>, and long lines are never wrapped. Notice the <a> stays glued to </ul>: links are inline elements, and adding a line break there could add a visible space. The contents of code, pre, em, strong, and span are left exactly as written.
HTML mistakes the preview will not tell you about
Browsers repair broken HTML instead of showing an error, so the preview can look right while the markup is wrong. Watch for these:
Block elements inside a paragraph
<p>Intro <div class="note">Read this</div></p>
A <div> cannot live inside <p>. The parser closes the paragraph before the div, leaves an empty <p></p> after it, and your CSS selector p .note never matches. Use a <div> or <span> as the wrapper.
Unescaped ampersands and angle brackets in text
<p>Price < $10 & free shipping</p>
This usually renders, but a < followed by a letter starts a tag and swallows text. Write < and &, or run the text through the HTML Encoder.
Missing alt text and labels
An <img> without alt or an <input> without a <label> looks identical in the preview but is invisible to screen readers. Use alt="" for purely decorative images.
Duplicate id attributes
Two elements with the same id render fine, but document.getElementById returns only the first, so a script in the preview appears to "ignore" the second element.
Limitations
- No validation or linting. Autocomplete of tag names is not available in this editor.
- Code inside
<style> and <script> is not highlighted as CSS or JavaScript. For that, use the dedicated editors below.
- Minify HTML is a simple whitespace collapse. It flattens
<pre> blocks, joins <b>12</b> <i>items</i> into "12items", and turns an inline script's // comment into a comment that hides the rest of the script.
- Import URL fetches the file from your browser, so it only works when the remote server allows cross-origin requests and the host is permitted by this site's security policy. If it fails, download the file and use Import File.
When to use a different tool
Frequently asked questions
Why does my external stylesheet or script not load in the preview?
The preview runs under this site's Content Security Policy, which only allows scripts and stylesheets from a few hosts, including cdnjs.cloudflare.com and cdn.jsdelivr.net. Files from other CDNs are blocked. Relative paths such as styles.css also fail, because they resolve against this site and not your project folder. Paste the CSS into a style tag or load the library from one of the allowed CDNs.
Why does alert() do nothing in the live preview?
The preview is a sandboxed iframe that allows scripts but not modal dialogs, form submission, or access to storage. alert, confirm, and prompt are ignored, and localStorage throws a SecurityError. Use console.log and your browser developer tools, or write output into the page with textContent.
Does this editor validate my HTML?
No. It highlights syntax, closes tags as you type, and renders a preview, but it does not report errors such as unclosed elements or invalid nesting. Browsers silently repair broken markup, so a page can look fine in the preview and still be invalid. Use the W3C Markup Validation Service for a real check.
Is it safe to use the Minify button on a full page?
Only for simple markup. Minify collapses every run of whitespace, including inside pre and textarea elements and inline scripts, and removes whitespace between tags. A line comment in an inline script will then comment out the rest of that script, and words separated only by a space between two inline tags get joined. Keep a copy before minifying.
Where is my code saved?
In your browser's localStorage on this device. It is saved when you press Ctrl+S (Cmd+S on Mac) and automatically every two minutes, and restored when you reopen the page. Nothing is uploaded. Clearing site data or clicking Clear removes it, so download a copy of anything you want to keep.