Free tool
HTML Viewer With Live Preview, Device Widths and a Console
Paste a snippet or open a whole page, and a sandboxed preview draws it next to the code. You can test narrow screens, read what a script logs, and tidy or shrink the markup before you copy it.
The page shows here.
Paste HTML on the left, or open a file.
What the page logs with console.log shows here, and its errors.
The page
Scripts can run code and open pop-ups. Switch this on only for code you trust. The frame cannot reach this page, your cookies or anything stored in this browser.
Code
Keys
- Cmd Enter Format
- Cmd Shift Enter Minify
- Cmd S Download
- Tab Indent
- Esc Tab Leave the box
Your HTML is shown by your browser inside a frame that cannot reach this page. It is not uploaded or saved. Only your settings, such as indent size, are kept on this device.
Checking a snippet before it goes on a live page
A common job is a block of embed code or a bit of markup from a client, and you want to see it before it lands in a page builder. Paste it into the HTML box and the preview updates. Open files loads one or more files from your computer, including the pictures and style sheets that sit beside them.
Three examples are built in: pricing cards, a contact form and a click counter. They are a fast way to see how the screen behaves, and Clear empties the box.
Why the preview is sandboxed
Pasted code is not always yours, so the frame is locked down. Scripts are off until you tick Allow scripts. The frame cannot read this page, your cookies or anything stored in this browser. Pictures, styles and fonts from other sites are also blocked unless you tick the box that loads them.
Switch scripts on only for code you trust, because a script can open pop-ups and run code in the frame.
Seeing it at different screen sizes
| Control | What it does |
|---|---|
| Fit | The preview fills the available width |
| Phone, Tablet, Laptop | The preview narrows to a fixed device width |
| A typed width | Any width you enter |
| Reload | Draws the page again from the code |
| Full screen | Gives the preview the whole window |
| Side by side or Stacked | Places code and page next to each other or one above the other |
| Code or Page | Shows only one of the two |
These widths only change the frame. They are a quick check, not a replacement for opening the real site on a real phone.
The console, Format and Minify
The strip under the preview prints whatever a script writes with console.log, and also its errors. With scripts allowed, a click counter example shows the idea at once.
Format rewrites the markup with line breaks and indents, which makes a squashed block readable. Minify does the opposite and shortens it, with an option to strip comments first. The indent can be 2 spaces, 4 spaces or tabs, and Undo brings back the previous text. Download .html saves the code, and Copy code puts it on the clipboard.
- Cmd or Ctrl with Enter formats.
- Cmd or Ctrl with Shift and Enter minifies.
- Cmd or Ctrl with S downloads.
- Esc then Tab leaves the code box, since Tab alone indents.
Quick recipes for everyday checks
- Test a narrow layout. Paste the markup, press Phone, and watch whether columns stack or overflow.
- Find a broken tag. Press Format. Lines that indent strangely often point to a tag that was never closed.
- Shrink before pasting. Use Minify with comments removed when a builder box has a size limit.
- Inspect a script. Tick Allow scripts, add console.log lines and read them in the console strip.
- Compare drafts. Keep two browser tabs open, one for each version of the markup.
Because the frame is cut off from the rest of the page, you can try odd snippets with little worry about the page around it.
Limits to know about
The preview is your own browser drawing the page, so it shows what your browser does and no other. It will not show how Safari, Firefox or an email app treats the same markup. Relative links to files you did not open will not resolve.
If the snippet is meant for a site builder, check it there as well. Our Webflow development page covers how we bring custom code into a build.
Frequently asked questions
Can I run JavaScript in the preview?
Yes, once you tick Allow scripts. It is off by default, and the frame still cannot reach this page or your stored data.
Why are my pictures missing?
Pictures that point to other sites are blocked until you tick the option to load files from other sites. Files you opened with Open files are included automatically.
Can I preview an email template?
You can see how your browser draws the HTML. Mail apps use their own, stricter engines, so test in the app too.
What does Minify remove?
It shortens whitespace in the markup, and with the option ticked it also removes comments.
Is my code stored anywhere?
No. The code is held only while the page is open. Settings such as indent size are remembered on your device.
Can I save the result?
Yes. Download .html saves a file, and Copy code copies the text.
More free tools
- Markdown editor: Write Markdown with a live preview, then save it as .md, HTML or PDF.
- Diff checker: Compare two texts or files side by side, merge changes and export a diff.
- Code to image: Turn pasted code into a syntax coloured picture in a window frame on a gradient.
- Regex tester: Test a JavaScript regex with live matches, groups, a replace preview and an explanation.
- XML formatter: Indent, minify and check XML, repair common slips, or turn it into JSON.