Online HTML Editor

How to use the HTML editor

1. Write or paste HTML in the HTML tab. Add styles in the CSS tab and scripts in the JS tab.
2. The preview updates automatically as you type. Turn Auto preview off if you prefer to update it yourself with Run (Ctrl + Enter, or ⌘ + Enter on a Mac).
3. Use Format to tidy indentation, Copy to copy the code in the current tab, or Download HTML to save everything as one .html file.
4. Use Open preview to view the result in its own tab, or Fullscreen to fill the screen. On a phone, switch between the code and the result with the Preview tab.

What this editor does

It works as a live HTML and CSS editor: change a color, a margin or a heading and the preview updates while you type, so you never switch windows or reload a page. As an HTML CSS editor with JavaScript support, it covers everything from a quick snippet to a complete page.

This online HTML editor combines your HTML, CSS and JavaScript into a single web page and renders it right next to your code, so you can see the effect of every change immediately. It is useful for trying out an idea, testing a snippet from a tutorial, building a small demo, or debugging a layout without setting up a project.

As an HTML code editor it gives you syntax highlighting, line numbers, automatic indentation and a formatter — everything you need to edit HTML online with a live preview, on a desktop or a phone.

Everything runs locally in your browser. Your code is not uploaded, and it is saved automatically in your browser so a refresh does not lose your work. Use Reset to return to the starter example.

Working with complete HTML documents

You can write just a fragment of HTML — for example a single <div> — and the editor wraps it in a valid HTML5 page for you. You can also paste a complete document:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My page</title>
</head>
<body>
  <h1>My page</h1>
</body>
</html>

In that case your document is used as-is. CSS from the CSS tab is added at the end of <head>, and JavaScript from the JS tab is added at the end of <body>, so it runs after your page content has loaded.

Want a picture inside a single self-contained file? Turn it into a data URI with the image to Base64 converter and paste the generated <img> tag into the editor.

JavaScript and the console

Scripts run inside the preview, in a sandboxed frame that is isolated from this site. Messages from console.log(), console.warn() and console.error(), as well as uncaught errors, are shown in the Console panel below the preview. If you mainly want to run and debug scripts, the HTML compiler runs code on demand with the console open.

From first draft to published page

The editor is the centre of a set of free HTML tools that share the same fast, private approach:

• Have an existing file? Open it in the HTML viewer to see the rendered page at desktop, tablet and phone widths.
• Inherited messy or minified markup? The HTML formatter re-indents it so it's readable.
• Before publishing, the HTML validator finds unclosed tags, duplicate IDs and missing alt text, and the HTML minifier makes the final file smaller.
• Styling the page? Find exact HEX and RGB values with the color picker, or look up names like tomato and steelblue in the HTML color codes list.
• Need a printable document? Turn your page into a PDF with the HTML to PDF converter, then add notes or a signature in the PDF editor.

See every tool on the all tools page.