My Tool Studio
Developer

HTML Viewer

This HTML viewer shows what your code looks like as a web page while you edit it. Paste HTML, open an .html file, or load the source of a live page by its URL, and the preview on the right updates as you type. Check a layout at phone, tablet, laptop or desktop width, make the preview shorter or taller, and switch JavaScript on when you want buttons and scripts to run. Format tidies messy markup, Minify shrinks it, and you can copy the code, download it or open the page in a new tab. The preview runs in a sandboxed frame with no access to this site or your cookies, so HTML from an email, a CMS or a colleague is safe to look at.

Always freeNo sign upRuns in your browser
HTML (19 lines, 630 characters)
Preview (scripts blocked)

The preview runs in a sandboxed frame with no access to this site, your cookies or your storage, even when JavaScript is on.

How to use

01

Add your HTML

Paste code into the HTML editor, click Open .html file, or type a page address and click Load page source. The editor starts with a small sample card you can change.

02

Watch the preview

The preview updates a moment after you stop typing. Untick Update preview as I type to use a Run button instead, and tick Run JavaScript in the preview for scripts and onclick handlers.

03

Check sizes and save

Pick a Preview width to test phone and tablet layouts and a Height that suits the page. Then copy the code, download it, or click Open in new tab for a full-window view.

Why HTML Viewer

What the HTML viewer can and cannot show

The preview is a real browser frame, so HTML and CSS render exactly as they would on a page. The limits come from the sandbox that keeps you safe and from files the frame cannot see.

A common case is an HTML email template. Paste it in, set the width to Phone, and you see how the single-column layout holds up before sending a test. For a full web page, Load page source is usually quicker than copying the source by hand.

ContentIn the preview
HTML and CSS in style tags or style attributesShown as the browser renders it
Images, fonts and stylesheets with full https:// linksLoaded, if the other site allows it
Relative file pathsOnly after Load page source, which adds a base link
JavaScriptOnly with Run JavaScript in the preview ticked
Cookies, logins and storageNot available; the frame is isolated
Forms that submitBlocked by the sandbox

HTML viewer, beautifier and minifier compared

These three tools work on the same markup for different jobs. Many people use them together: view the page, tidy it for editing, then shrink it for shipping.

ToolMain jobWhen to use it
HTML ViewerSee and edit a page liveChecking a template, an email or a snippet from a colleague
HTML BeautifierReadable, consistently indented codeBefore editing or reviewing markup
HTML MinifierSmaller file sizeBefore publishing or pasting into an email platform

Common questions

How do I view an HTML file in my browser without saving it?
Paste the code into the editor or open the file with Open .html file, and the rendered page appears in the preview at once. Open in new tab shows it full size. Nothing is saved or uploaded unless you click Download.
Is it safe to preview HTML I got from someone else?
Yes, within limits. The preview is a sandboxed frame with no access to this site, your cookies or your storage, and scripts are blocked unless you tick Run JavaScript in the preview. Even with scripts on, the frame cannot read anything outside itself. Still, do not type passwords into forms inside unknown HTML.
Why do images or styles not show in the HTML preview?
Relative paths such as images/logo.png or style.css point to files on your computer or server, which the preview cannot reach. Use full https:// addresses, or put the CSS in a style tag. Pages loaded with Load page source get a base link added, so their relative files load from the original site.
Can I see how my HTML looks on a phone?
Choose Phone (375 px) or Large phone (414 px) under Preview width. The frame narrows to that width, so media queries react as they would on a device of that size. It is a quick check rather than a full emulator, so test on a real phone before launch.
How do I load the HTML source of a website?
Type the address into the URL box and click Load page source. This site's server fetches the page, because browsers block reading other sites directly, and the source appears in the editor. Pages that build their content with JavaScript may look empty until you tick Run JavaScript in the preview.
Does the HTML viewer run JavaScript?
Only when you tick Run JavaScript in the preview. Scripts then run inside the sandboxed frame, so alerts, click handlers and DOM changes work, but the code cannot reach this page or your cookies. Leave it off when you only need to check layout.
What is the difference between the HTML Viewer and the HTML Beautifier?
The viewer is for seeing a page and editing it live, with a quick Format button. The HTML Beautifier is for cleaning code, with options for indentation, line wrapping and attribute layout. Use the viewer to check how markup looks and the beautifier to prepare it for a repository.
Can I edit HTML online and download the result?
Yes. Edit in the code box, watch the preview, then click Download to save the file under its original name, or page.html for pasted code. Copy HTML puts the code on your clipboard instead.
Why does the preview look different from my live site?
Your site may load CSS, fonts and scripts from other files, and those are missing when you paste only part of a page. Browser extensions and being logged in also change what the live site shows. Load the full page source, or add the missing stylesheet links, to get closer.

More Developer tools

View all

JSON Formatter

Beautify, minify and browse JSON as a tree

Developer

JSON Validator

Find JSON errors by line and fix them

Developer

JSON Minifier

Minify JSON and see the bytes saved

Developer

JSON to CSV Converter

Convert JSON arrays to CSV or Excel

Developer