An online HTML viewer with live CSS and JavaScript
This HTML viewer is a small live code playground. Type or paste HTML, CSS and JavaScript into three tabs and see the rendered page update beside your code — no files, no setup and no account. Output from console.log, warnings and uncaught errors appear in a console panel underneath, so you can debug scripts without opening the browser’s developer tools, which is especially handy on a phone or tablet.
Use it to view an HTML snippet someone sent you, try a CSS layout idea, test a JavaScript function against real DOM elements, or check how a page behaves at mobile, tablet and desktop widths. Your code is saved automatically in your own browser, and you can download the result as a single .html file whenever you are happy with it.
How to use the HTML Viewer
- Pick a starter template, or paste your own markup into the HTML tab. A full document with
<html>and<head>works too. - Add styles in the CSS tab and scripts in the JS tab — they are injected into the page for you.
- Watch the preview update as you type (Auto-run), or turn Auto-run off and press Run or Ctrl+Enter when you are ready.
- Switch the preview between 375 px, 768 px and full width to check responsive behaviour.
- Read logs and errors in the Console panel, then press “Download .html” to save a clean, standalone file.
HTML Viewer features
Safe sandboxed preview
Code runs in an iframe with sandbox="allow-scripts allow-modals allow-forms" and no same-origin access, so it cannot read this site’s cookies or storage.
Built-in console
console.log, info, warn and error, uncaught exceptions with JS line numbers and unhandled promise rejections are captured.
Device widths
Preview at phone (375 px) or tablet (768 px) width, scaled to fit your screen, or at full width.
Comfortable editing
Line numbers, Tab and Shift+Tab indentation, auto-indent on Enter and Ctrl+Enter to run.
Autosave and download
Work is kept in local storage on this device, and downloads are clean HTML without any of the tool’s helper code.
How the live preview works
When you run your code, the viewer builds one HTML document: your CSS goes into a <style> tag in the head, your JavaScript into a <script> at the end of the body (so the elements already exist when it runs), and a tiny console bridge is added that forwards log messages to the panel with postMessage. The document is loaded into a fresh sandboxed iframe through its srcdoc attribute, so timers and event listeners from the previous run never pile up.
Because the sandbox gives the page a unique, opaque origin, a few things behave differently from a normal website: localStorage and cookies are blocked, pop-up windows are not allowed, and links cannot navigate the main page. Alerts, prompts and form submissions do work. External libraries load normally — add a <script src="…"> or stylesheet link from a CDN to the HTML tab.
Keyboard shortcuts
- Tab / Shift+Tab — indent or outdent the current line or every selected line by two spaces.
- Enter — new line that keeps the current indentation, adding a level after
{,(,[or an opening tag. - Ctrl+Enter (Cmd+Enter on Mac) — run the code now.
- Esc, then Tab — leave the editor with the keyboard, so Tab never traps your focus.
- Left/Right arrows on the HTML, CSS and JS tabs — switch editors.
Tips for testing pages
- Always include
<meta name="viewport" content="width=device-width, initial-scale=1">in full documents — without it, phones render the page as a zoomed-out desktop layout. - Tidy messy markup with the code beautifier before pasting it, and shrink the final file with the HTML minifier.
- If nothing appears, check the console panel first: a single syntax error stops the whole script.
- Pick colours for your CSS with the color picker.
HTML Viewer FAQ
Is it safe to run HTML and JavaScript I found online here?
Much safer than opening it as a page on a real website. The HTML viewer runs code in a sandboxed iframe without same-origin access, so it cannot read your cookies, local storage or anything on this site. It can still use your network connection and show dialogs, so do not enter passwords into code you do not trust.
Where is my code saved?
In your browser’s local storage on this device only. It is never uploaded. Clearing your browser data or using a private window removes it, so download the .html file to keep a permanent copy.
Why does localStorage throw an error in my preview?
The preview runs on an opaque origin for security, and browsers block storage there. Your code will work normally once it is saved as a file and opened from a real website or a local server.
Can I use libraries like React, Vue or Tailwind?
Yes, by loading them from a CDN with a script or link tag in the HTML tab. There is no build step, so JSX, TypeScript or Sass need an in-browser compiler build of the library, or plain JavaScript and CSS instead.
Can I paste a complete HTML document?
Yes. If your HTML includes <html> or a doctype, the viewer keeps your head and body and injects the CSS and JS tabs into them instead of wrapping your code in a new page.
Does it work on phones?
Yes. The editors stack above the preview on small screens, the preview can be switched between widths, and the console replaces the developer tools that mobile browsers lack.