See what HTML code really looks like
Reading raw HTML is hard: nested tags, inline styles and long attribute lists hide what the page actually shows. This HTML viewer renders your code the way a browser does, right next to the source. It is useful for checking a snippet from documentation, opening an HTML attachment, previewing an email template or looking at a saved web page without launching a local server.
What you can view
- Complete documents with
<!DOCTYPE html>,<head>, embedded<style>blocks and scripts. - Fragments such as a single table, form or card component.
- HTML email templates, which rely on inline styles and tables. The preview shows how a standards-based browser renders them (email clients such as Outlook may still differ).
- Exported reports from test runners, coverage tools or analytics exports that produce stand-alone HTML files.
How the sandbox protects you
The preview is an <iframe> with the sandbox attribute and a unique, opaque origin. Scripts in your HTML can run, so interactive demos work, but they:
- cannot read or change this website, its cookies or its storage;
- cannot access
localStorage,sessionStorageor cookies of their own (these throw errors in an opaque origin); - cannot navigate the main window away from the page.
That makes it reasonably safe to open HTML files you received from someone else and want to inspect before opening them directly in your browser.
Why something might look different
- Relative paths –
<img src="images/logo.png">or<link href="style.css">refer to files next to the original document, which the viewer does not have. Use absolute URLs or embed small images as data URIs with the image to Base64 tool. - Blocked resources – some external fonts, scripts or APIs refuse to load inside an iframe or from a sandboxed origin.
- Storage-dependent scripts – code that relies on cookies or
localStoragefails in the sandbox; test it on a local web server instead. - Fonts – web fonts load only if the document links to them with a full URL; otherwise the browser falls back to a default font.
Viewing HTML emails
Email templates are a special case. They are usually built with nested tables and inline styles because many email clients ignore modern CSS. The viewer shows how a standards-compliant browser renders the template, which is a good first check for broken tables, missing images and typos. Always send a test message to real inboxes too, since desktop mail programs apply their own rendering rules.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body { font-family: system-ui, sans-serif; padding: 2rem; }
.badge { background: #2563eb; color: #fff; padding: .25rem .6rem; border-radius: 999px; }
</style>
</head>
<body>
<h1>Hello <span class="badge">new</span></h1>
<button onclick="this.textContent = 'Clicked!'">Click me</button>
</body>
</html>Paste this and you see a styled heading with a blue badge and a working button.
Next steps
If the source is hard to read, tidy it with the HTML formatter. Check it for markup errors with the HTML validator. When you want to build a page rather than just look at one, the online HTML editor is set up for writing and downloading complete documents.
The HTML is rendered locally in your browser and is not uploaded or stored.