HTML Viewer
An online HTML file viewer and reader: paste markup or open an .html file and see it rendered as you type, at phone, tablet or desktop width, with JavaScript on or off. The preview runs in a sandbox, so it is a safe way to test HTML code or open an HTML attachment. Free, no sign-up, nothing leaves your browser.
The preview is a sandboxed iframe with its own origin. Scripts inside it cannot read this page or your browsing data.
Drag the bottom edge of the preview to make it taller. Links inside the preview open in a new tab.
What this HTML viewer does
It renders HTML the way a browser would, without saving a file or leaving the page. Paste a snippet, a whole document, or the source of an email template, and the preview updates on every keystroke. Open an .html file from your computer to read it as a page rather than as code. Fragments without <html> and <body> tags are wrapped in a minimal document so they still display, and every link is retargeted to open in a new tab so the preview itself never navigates away.
Alongside the preview, the source summary reports the document title, size, element count, how many inline and external scripts and stylesheets it uses, and every external host it references. That list is the quickest way to tell whether an HTML attachment is a plain newsletter or something that phones home before you decide to run its scripts.
Preview widths
| Preset | Width | Approximates |
|---|---|---|
| Desktop (fill) | Whatever the preview panel allows; use Fullscreen for the full window | Laptop and desktop browsers |
| Tablet | 768 px | iPad portrait and the classic tablet breakpoint |
| Phone | 375 px | iPhone widths from the 6 through the 13 mini and most Android phones in CSS pixels |
Width presets change the iframe's CSS width, so media queries in the pasted CSS respond exactly as they would on a device of that width. They do not emulate touch, device pixel ratio or a mobile user agent, so a page that serves different HTML to phones will still show its desktop version.
Why some things do not render
- Relative paths.
src="images/hero.jpg"orhref="style.css"refer to files next to the original document, which the preview does not have. Use absolute URLs, inline the CSS, or embed images as data URIs (the Base64 encoder makes those). - Mixed content. This page is served over https, so browsers block
http://images and scripts inside it. Switch the URL to https if the server supports it. - Sites that refuse embedding. Some hosts send headers that stop their assets or pages loading inside another origin's frame.
- Storage and cookies. The sandbox has an opaque origin, so scripts that depend on localStorage or cookies from a specific site will not find them.
- Scripts turned off. With Run scripts unchecked, anything JavaScript builds after load will be missing. That is often what you want when checking an unknown file.
HTML viewer, formatter or editor?
Use this viewer when the question is "what does this markup look like". Use the HTML formatter when the question is "why is this markup so hard to read", and paste the tidied result back here to check nothing changed visually. A full online editor adds syntax highlighting and multi-file projects, which is more than a quick preview needs; this page loads in under a second and works offline, which an editor usually does not.
Frequently asked questions
Is it safe to preview HTML from an email or an unknown file here?
Reasonably so. The preview runs in a sandboxed iframe with its own opaque origin, so any script inside it cannot read this page, your cookies, or anything else on calcwren.com, and nothing you paste is sent to a server. It is still a real browser rendering, so images and links can point at external servers, which is why the source summary lists every external host before you open anything. Turn scripts off if you only want to see the layout.
Why do my images or stylesheets not show in the preview?
Relative paths such as images/logo.png or css/site.css point at files next to the original document, and the preview has no such folder. Absolute URLs to a public server work; local file paths do not. Some sites also block their assets from being embedded by other pages, and browsers refuse http:// resources inside an https:// page. Inline styles and data: URIs always render.
Can I view the HTML source of a website URL?
Not from this page: browsers do not allow one site to fetch another site's HTML, so a URL fetcher would need a server, and this tool deliberately has none. For a live site, prefix its address with view-source: in the address bar, or press Ctrl+U, then paste the markup here to preview it.
Does the HTML viewer run JavaScript?
Yes when the Run scripts option is on, which is the default, so buttons, forms and inline scripts behave as they would on a real page. Switch it off to render the markup and CSS only. In both cases the code runs inside the sandbox and cannot reach this page.
Is my HTML uploaded anywhere?
No. The source stays in your browser, the preview is generated locally with the iframe srcdoc attribute, and the page keeps working offline once it has loaded. Only resources your HTML itself references, such as an image on a CDN, are fetched from the internet.