How to use HTML Viewer
-
Paste your markup into the editor on the left, press
Import from file (⌘O), or drag an
.html file anywhere onto the page.
-
The preview on the right renders as you type — no save, no refresh,
no build step.
-
Drag the ruler above the preview to set an exact viewport width, or
click a notch at 375, 768 or 1024 px to check a device size.
-
Keep the result: Export (⌘S) saves
an HTML file, Copy (⌘⇧C) puts
the source on your clipboard, and ⌘P prints the
preview or saves it as a PDF.
Working in the editor
- Format (⌘⇧F) re-indents minified or messy markup so it can be read.
- Minify (⌘⇧M, in the overflow menu) strips it back down and reports how much it saved.
- Find and replace (⌘F) searches the document, including regular expressions.
- Folding collapses whole elements — ⌘K then 0 to fold everything, ⌘K then J to unfold.
- The warnings counter at the bottom left lists malformed markup — unclosed tags, stray end tags, duplicate attributes.
- Sample loads a demo document if you just want to see the tool work; Clear empties the editor and offers an undo.
Working in the preview
- Rendered shows the page as a browser paints it. Computed DOM shows the tree the browser actually built — the fastest way to see how malformed HTML gets repaired.
- Zoom (⌘= / ⌘-) scales the preview without changing the layout width, so a 1024 px design stays a 1024 px design.
- Open in new tab gives the document a full window of its own.
- Drag the divider between the panes — or focus it and use the arrow keys — to give either side more room.
What people use it for
- Previewing an HTML email or newsletter template before it goes out.
- Opening an
.html report, invoice or export that someone sent you, without trusting it to a random online converter.
- Checking HTML generated by an AI assistant, a CMS or a script before pasting it into a project.
- Learning and teaching HTML — change a tag, see the result in the same second.
- Testing responsive behaviour at exact pixel widths without opening developer tools.
- Tidying up minified markup, or shrinking a document before shipping it.
- Inspecting how a browser repairs broken markup, using the computed DOM view.
Best practices
- Use absolute URLs for images, stylesheets and fonts. A relative path such as
img/logo.png has no folder to resolve against here, so it will not load.
- Inline your CSS in a
<style> block to keep the document self-contained and portable.
- Format before you read, minify before you ship. Reading minified HTML is a waste of your attention.
- Check the warnings counter before blaming your CSS — an unclosed tag explains a surprising share of broken layouts.
- Keep documents under about 1 MB if you want them restored automatically. Larger files render fine but are not saved.
- Compare rendered output against the computed DOM whenever the result does not match what you wrote.
Frequently asked questions
How do I view an HTML file without uploading it anywhere?
Paste the markup in, or drag the file onto the page. The file is read
by your own browser and rendered locally — no copy is sent anywhere,
which is why this works on confidential documents.
Is HTML Viewer free?
Yes. No account, no sign-up, no watermark and no limit on how many
documents you open.
Is my HTML uploaded to a server?
No. The site is a static page; once it has loaded, nothing you type or
open produces a network request carrying your document. You can
confirm it in the network tab of your browser's developer tools.
Does the preview run JavaScript?
Yes. The preview is a sandboxed frame that runs scripts, forms and
popups, but it is denied same-origin access — so a document cannot
read cookies or storage, and cannot reach this page or your data.
Why don't my images or stylesheets appear?
They are almost certainly referenced by relative path. Your files are
never uploaded, so there is no folder alongside the document for
styles.css or img/logo.png to point at.
Switch to absolute https:// URLs, inline the CSS, or
embed images as data: URIs.
What is the difference between rendered output and computed DOM?
Rendered output is the visible page. The computed DOM is the element
tree the browser built from your source — after it has silently closed
your unclosed tags and moved misplaced ones. When the two disagree
with your expectations, the DOM view shows why.
Can I edit HTML here, or only view it?
Both. The left pane is a full editor with syntax highlighting, code
folding, find and replace, and undo — the preview simply keeps up with
it.
Which file types can I open?
.html, .htm and .txt, by import
or by dragging them onto the window.
How do I convert HTML to PDF?
Press ⌘P and choose Save as PDF as the
destination. The preview is printed on its own, without the interface
around it.
Will I lose my work if I close the tab?
No. The document is kept in your browser's local storage on this
device and restored the next time you open the page. Documents over
about 1 MB are not stored, and clearing the editor can always be
undone from the toast that appears.
How large a file can it open?
Multi-megabyte documents work; a progress bar appears past 1 MB
while formatting or minifying. The practical ceiling is your browser's
appetite for rendering, not a limit imposed here.
Can I use it on a phone or tablet?
Yes. Below 720 px the editor and preview stack vertically and the
toolbar collapses into a menu; everything else behaves the same.
Do I need to install anything?
No. It runs in any current browser — Chrome, Safari, Firefox or Edge —
with nothing to download and no extension to add.
