HTML Viewer

How can I view HTML code as a rendered page?

Paste the markup into this viewer and click View. The HTML is written into a sandboxed frame below the output box, and your browser renders it exactly as it would render a page: headings, tables, inline styles and <style> blocks all apply. Scripts never run, so it's a safe way to see what unfamiliar HTML looks like without opening it as a file.

Using the viewer

1. Paste a full document or just a fragment, such as a <table> or an email signature, into the input box.
2. Click View.
3. The rendered result appears in a 256-pixel-tall preview frame. Scroll inside it to see more.
4. The output box holds your HTML unchanged, so Copy gives you the same markup back.

Fragments are fine. Browsers wrap stray content in the <html>, <head> and <body> elements automatically, following the HTML parsing rules, so <p>Hi</p> on its own renders as a normal paragraph.

What the sandbox blocks

The preview is an <iframe> with sandbox="", the most restrictive setting there is. Each permission a sandbox can grant is turned on by a keyword, and an empty value grants none of them. The MDN iframe reference lists every keyword; these are the ones that matter for pasted HTML:

Plugins via <embed> and <object> are blocked as well. The content still renders as normal, so CSS layout, fonts, colors, flexbox and grid all show correctly.

What still happens: remote resources

A sandbox stops code, not network requests. If the HTML contains <img src="https://..."> or a <link rel="stylesheet" href="https://...">, your browser fetches those files when the preview renders. Usually that's what you want. With HTML from a marketing email it's worth knowing that tracking pixels are just tiny remote images, so previewing the raw source here can register an "open" just as your mail client would. Delete remote <img> tags first if you'd rather not.

Paths, images and styles

The HTML is loaded through the frame's srcdoc attribute, and per the HTML standard such a document takes this page's address as its base URL. So a relative path like css/site.css or ../img/logo.png points at this website, where your files don't exist, and shows up broken. Some options:

• Use absolute URLs (https://yoursite.example/img/logo.png).
• Put CSS in a <style> block or in style attributes.
• Embed small images as data URLs, which you can create with Image to Base64.

Example: checking an email signature

Paste this:

<table style="font-family: Arial, sans-serif; font-size: 14px">
  <tr>
    <td style="padding-right: 12px; border-right: 2px solid #2563eb">
      <strong>Sam Patel</strong><br>Head of Support
    </td>
    <td style="padding-left: 12px">
      +44 20 7946 0958<br>
      <a href="https://example.com">example.com</a>
    </td>
  </tr>
</table>

Click View and the signature renders as two columns divided by a blue line, as a mail client would show it. Table layout with inline styles is the usual approach for email because many mail clients ignore <style> blocks, so a viewer that applies inline styles faithfully is a quick first check. The real client may still differ.

When to use something else

If you're learning the language itself, the HTML lessons start from the basic document structure this viewer fills in for you.