HTML viewer and live preview
Paste HTML or open an .html file and see the page rendered as you type. Add CSS and JavaScript in their own tabs, check the layout at phone, tablet and laptop width, read console messages and errors, and get a list of markup problems such as unclosed tags, duplicate IDs and images without alt text. Format messy code, minify it, download it as a file or share it as a link. The preview runs in a sandbox, separate from this site.
Free · No sign-up
How to use it
- Paste HTML into the box, open an .html file, or load an example.
- Add CSS or JavaScript in their tabs if you have them.
- Watch the preview, switch to Phone or Tablet width, and read the console.
- Fix anything listed in Code check, then download, copy or share the result.
Why use this tool
Live preview
The page updates as you type, with HTML, CSS and JavaScript in separate tabs.
Phone and tablet widths
See the page at 375, 768 or 1280 pixels to test responsive layouts.
Console
console.log output, warnings and JavaScript errors appear under the preview.
Code check
Finds unclosed tags, duplicate IDs, missing alt text, missing title and more, with line numbers.
Format and minify
Tidy indentation for reading, or strip spaces and comments for a smaller file.
Safe sandbox
Code runs in an isolated frame with no access to this site, and nothing is uploaded.
How to view an HTML file
Any browser can open an .html file, but then you only see the result. Here you see the code and the page side by side, can change the code and see the effect straight away, and spot problems the browser silently hides. Open the file with Open file, or paste its source from View Page Source.
Test an HTML email or email signature
Email signatures and newsletter templates are written in HTML with inline styles and tables. Paste the code to see how it will look, check the width at Phone size, and use the code check to find missing alt text, which shows when images are blocked. Minify keeps Outlook conditional comments.
The preview uses a modern browser engine, so Outlook on Windows may still show some differences.
Learning HTML and CSS
For classes and tutorials, the live preview shows exactly what each tag and style rule does. Load the simple page example, change a color or a heading, and watch the result. The code check explains common beginner mistakes in plain words.
What the code check looks for
- Tags that are never closed, or closed in the wrong order.
- Duplicate id values and repeated attributes.
- Images without alt text and links to new tabs without noopener.
- Missing doctype, lang, charset, viewport and title in full pages.
- Skipped heading levels and more than one h1.
- Obsolete tags such as center, font and marquee.
Frequently asked questions
Is it safe to paste HTML from somewhere else?
Yes. The preview runs in a sandboxed frame that cannot read this site's cookies or storage. You can also turn off Run JavaScript to see only the HTML and CSS.
Is my code uploaded?
No. Everything runs in your browser. A share link carries the code inside the link itself, so no copy is stored on a server.
Why don't images or styles from my computer show?
Relative paths like images/logo.png point to files on your computer that the preview cannot reach. Use full https:// addresses, or paste the CSS into the CSS tab.
Can I see how the page looks on a phone?
Yes. Choose Phone for a 375 pixel wide view, or Tablet and Laptop. Add a viewport meta tag so the page scales correctly.
Can I open a .htm or .xhtml file?
Yes. HTML, HTM, XHTML and SVG files open in the HTML tab; .css and .js files open in their own tabs.
Does it support PHP or frameworks like React?
It shows plain HTML, CSS and JavaScript. PHP needs a server, and React code must be built first or loaded from a CDN script.
How to preview and check HTML code
Related tools
Need something built?
Tell us what you want to create.
Tell us what you need built, from a simple website to a complete app, AI solution, automation, or custom system.