About the HTML Viewer
HTML Viewer is a small playground for web pages. Type or paste HTML, CSS and JavaScript into three boxes and the page appears beside them, updating as you type. A console panel shows what console.log, console.warn and console.error print, and reports errors from your script. You can switch the preview to tablet or phone width, turn JavaScript off, download everything as a single page.html file or copy it. The preview runs in a sandboxed frame that has no access to this site, your cookies or other tabs. Code you paste still runs in your browser, so run only code you trust.
Updated September 2026
How to use the HTML Viewer
- 1Type or paste your HTML, CSS and JavaScript into the three boxes, or press Try a sample.
- 2Watch the preview update. Turn off auto-refresh if you prefer to press Refresh yourself.
- 3Choose Full, Tablet 768 or Phone 375 to test the width.
- 4Read the console below the preview, then download or copy your page.
Preview HTML, CSS and JavaScript live
On a wide screen you see the three code boxes stacked next to the preview. On a phone, tabs let you switch between HTML, CSS and JavaScript so each box gets the whole screen. As you type, the preview refreshes after a short pause so the page is not rebuilt on every keystroke.
The sample loads a heading, a button and a small script. Click the button in the preview and the message changes, and the console records each click. Untick auto-refresh if your code is slow, and press Refresh when you are ready.
How the sandbox keeps you safe
The preview is an iframe with the sandbox attribute set to allow scripts and nothing else. It is treated as a different origin from this website, so your code can't reach this page, its storage or your cookies. It can't submit forms, open windows, start downloads or navigate the page around it.
The console works through a small message bridge. The page around the frame accepts only messages that come from that frame and that have the expected shape. When JavaScript is switched off, the frame is sandboxed completely and no script is included at all.
Testing phone and tablet widths
Add a viewport meta tag and responsive CSS, then try each width to see media queries respond. Real devices differ in fonts and browser behaviour, so treat this as a quick check.
- Full uses the whole width of the preview area.
- Tablet 768 narrows the frame to 768 pixels, a common tablet width.
- Phone 375 narrows it to 375 pixels, the width of many phones.
- If the area is narrower than the chosen width, the frame scrolls sideways instead of shrinking.
Saving and sharing your page
Download HTML merges your three boxes into a single file. Your CSS goes into a style tag and your JavaScript into a script tag, and the console bridge is left out so the file is clean. If you pasted a full page, the styles and script are inserted before the closing head and body tags.
Relative links and files on your computer are not available inside the preview. To tidy code before you preview it, try Code Minifier for the opposite job, JSON Formatter for data, or Online Notepad for notes. When you want smaller code for a live page, run it through the HTML, CSS & JS Minifier, and test a pattern against the markup with the Regex Tester.
Features
- Live preview of HTML, CSS and JavaScript
- Console panel for log, warn, error and uncaught errors
- Full, tablet and phone preview widths
- Sandboxed preview frame
- Switch JavaScript off with one tick
- Download or copy the merged page
Frequently asked questions
How do I preview HTML online?
Paste your HTML into the HTML box and the preview updates after a moment. Add styles in the CSS box and behaviour in the JavaScript box. You can also paste a complete page starting with <!doctype html>, and the CSS and JavaScript boxes are added to it.
Is it safe to run my code here?
The preview is sandboxed. It can't read this site, your cookies or other tabs, and it can't submit forms, open pop-ups or navigate away. But the code still runs in your browser, so it can use your processor, load images and scripts from the internet and draw whatever it likes inside the frame. Run only code you trust.
Can I use JavaScript?
Yes. “Run JavaScript” is on by default. Untick it to see the page without any script, which is handy for checking how it looks when scripts are blocked. Output from console.log appears in the console panel.
Why doesn't my form or alert work?
The sandbox blocks them on purpose. Forms can't be submitted, alert, confirm and prompt boxes are blocked, and links can't open new windows. Use console.log and on-page messages to test instead.
Can I save my page?
Press Download HTML to get one file called page.html with your CSS and JavaScript merged in, or Copy HTML to paste it elsewhere. Nothing is stored on a server, so download your work before you close the tab.
Can I test how it looks on a phone?
Choose Phone 375 or Tablet 768 above the preview. The frame is narrowed to that width so media queries respond as they would on a small screen. It is an approximation and not a replacement for testing on a real device.
What if my script freezes the preview?
A loop that never ends will freeze the preview frame. Remove the looping code and press Refresh. The rest of the page is not affected.