When to use the online HTML editor
This online HTML editor is meant for producing markup: drafting a component before it goes into a template, adjusting an email layout, rebuilding a landing page section or correcting a broken file. It runs the same editor and sandboxed renderer as the HTML Viewer. If you only want to see what an existing file or snippet looks like, open it there; if you plan to write or change the code, the workflow below is the one to follow.
What the editor does while you type
- Syntax highlighting for HTML, including CSS inside
<style>and JavaScript inside<script>. - Autocompletion of tag and attribute names, plus automatic closing tags when you finish an opening tag.
- Bracket matching, code folding and undo history, with Ctrl/⌘ + F to search and Tab to indent.
- A line and character count in the input panel header.
- Layout and fullscreen buttons: switch between side-by-side and stacked panels on wide screens, or expand the preview to check a section at a larger size.
Building a snippet or page section
Components are easier to get right in isolation. Paste only the part you are working on, wrap it in the smallest document that gives it the right context, and add a temporary rule that outlines every box:
<style>
* { outline: 1px solid rgba(220, 38, 38, .35); }
.plan { max-width: 18rem; padding: 1.25rem; border: 1px solid #ddd; }
</style>
<section class="plan">
<h2>Team</h2>
<p><strong>$12</strong> per user / month</p>
<ul><li>Shared folders</li><li>Priority support</li></ul>
<a href="#">Choose plan</a>
</section>The outlines reveal unexpected margins, elements that overflow their parent and wrappers you forgot to close. Delete the rule before you copy the snippet back into your project. Testing structure this way also shows whether headings and lists nest the way you intended, which matters for screen readers as much as for looks.
Editing HTML email markup
Email layouts are usually tables with inline styles and a fixed width of around 600 pixels, because many mail programs ignore stylesheets and modern layout properties. The editor lets you adjust cell padding, colours and alignment and see the effect straight away. Keep two limits in mind: the preview is a web browser, so it shows how a standards-based engine draws the message rather than how a particular mail program will, and images must use absolute URLs. Send a real test message before any campaign goes out.
How the preview is sandboxed and when it updates
Your markup is placed in an <iframe> through its srcdoc attribute, with the sandbox flags allow-scripts, allow-forms, allow-popups and allow-modals. Same-origin access is not granted, which has practical consequences:
- Scripts run, and
alert()orconfirm()dialogs work, but the code cannot reach this website, its cookies or its storage. localStorage,sessionStorageanddocument.cookieare unavailable and throw errors.- Relative URLs resolve against this site's address instead of your project folder, so local images and stylesheets do not load.
With Auto update ticked, the preview is rebuilt about 350 milliseconds after your last keystroke, or about 900 milliseconds when the document is longer than 200,000 characters. Each rebuild replaces the whole document, so scripts start again and form input is lost. When you are writing JavaScript that needs to keep state, untick Auto update and refresh with the Run button or Ctrl/⌘ + Enter.
Finishing and exporting your markup
Copy puts the source on your clipboard. Download saves it as html-editor.html; rename it, for example to index.html, before publishing. Save & Share stores the code and gives you a link. When someone opens a shared link, the code appears in the editor but is not rendered until they press Run, so nobody runs another person's scripts by accident.
Before the markup leaves the editor, tidy the indentation with the HTML Formatter, check for unclosed or misnested tags with the HTML Validator, and compress the final version with the HTML Minifier if file size matters.