Online HTML editor

What this editor is good for

Trying something out. It is a scratchpad with a live preview — the fastest way to check how an element behaves, test a snippet before pasting it into a real project, or show someone what you mean.

The preview runs in a sandboxed frame, so scripts in your snippet execute but cannot reach the rest of the page. Styles you write apply only inside the preview.

What it is not is a project editor. There is no file tree, no autosave, no version history and no collaboration. Close the tab and the work is gone. For anything you intend to keep, write it in a real editor and use this to test fragments.

How to use it

• Update as I type re-renders on every keystroke. Turn it off and press Run if you are typing something that would be noisy mid-edit — an unclosed tag, a loop with an alert in it.
• Format code runs the same formatter as the rest of the site over your source.
• Download saves what is in the code panel as an .html file.
• Preview only hides the source and gives the render the full width — useful for checking a responsive layout.

A starting skeleton

If you are learning, this is the minimum a valid HTML5 document needs. Everything else is optional.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page title</title>
  </head>
  <body>
    <h1>Heading</h1>
    <p>Content.</p>
  </body>
</html>

The charset declaration must appear within the first 1024 bytes of the document, which is why it goes first. The viewport meta tag is what makes a page behave sensibly on a phone. The lang attribute tells screen readers which language to pronounce.

Questions about the editor

Related tools

Learn the why, not just the how

Longer reading on formatting, indentation and minification.