HTML Viewer

What this HTML viewer does

Paste HTML on the left and the HTML viewer renders it on the right, the way a browser would, updating as you type. It takes a full document with <html> and <head>, or a fragment such as a single table or an email template. Inline <style> blocks render straight away, and <script> tags run once you tick Run JavaScript, so you can check a component, a saved page or a snippet from a pull request without creating a file or starting a dev server.

The preview width buttons resize the frame to 768px for a tablet and 375px for a phone, which is enough to see whether a layout collapses the way it should. The page title from <title> shows in the preview header, and Open file loads an .html file from your computer without uploading it.

Viewing HTML emails and untrusted pages safely

The preview runs in a sandboxed frame with its own isolated origin and its own JavaScript scope. Code inside it cannot read this page, your cookies or your local storage, cannot redirect this page, and cannot open popups, submit forms or show dialogs. Images, scripts, stylesheets and fonts hosted on other sites are blocked, and so are fetch requests, WebSockets, WebRTC connections, connection hints such as preconnect, and writes to your clipboard. With JavaScript off, which is the default, nothing in the preview can contact another server. That matters for HTML emails: most marketing emails carry a 1×1 tracking pixel that tells the sender when and where the message was opened. Here, that pixel never loads. The viewer counts the remote resources it blocked and tells you under the editor.

To see an image in the preview, embed it as a data URI. The Image to Base64 converter gives you a ready-made <img> tag. Only tick Run JavaScript for HTML you trust. Even inside the sandbox, a script written for the purpose can sometimes make the browser open a connection that reveals your IP address to another server. It still cannot read anything from this page.

HTML formatter and beautifier

Format HTML (or Ctrl+Enter) rewrites the markup with one element per line and consistent indentation, using 2 or 4 spaces. Inline elements such as <strong> and <a> stay on their line, and the contents of <pre> and <textarea>are left exactly as they were. Embedded CSS and JavaScript are indented too. It is the quickest way to read minified HTML from a build tool, a CMS export or a browser's view source.

<nav><ul><li><a href="/">Home</a></li><li><a href="/docs">Docs</a></li></ul></nav>

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Docs</a></li>
  </ul>
</nav>

How to use

1. Paste HTML into the editor, click Open file, or click Load an example to see how it works.
2. Watch the preview update as you edit. Switch between full width, tablet and mobile at the top.
3. Click Format HTML to indent the code, choosing 2 or 4 spaces first.
4. Copy the code from the editor header, or click Download .html to save it as a file.

Frequently Asked Questions