See Your HTML Come to Life
Reading raw HTML only tells you half the story. You can spot the tags and the text, but you can't really tell how the page will look until a browser draws it. Normally that means saving a file, finding it in a folder, opening it, then repeating the whole routine every time you change a line.
The HTML viewer removes those steps. Paste your code on the left and the rendered page appears on the right, updating a moment after you stop typing. It is ideal for checking an email template, testing a snippet you found in a tutorial, previewing a page someone sent you, or learning how HTML and CSS work together. Nothing is uploaded: the preview is built entirely inside your browser.
How to Use the HTML Viewer
- Paste your code into the HTML Code box, open an .html file, or drag one onto the box.
- The page appears in the preview panel straight away. Keep typing and it refreshes automatically.
- Use Phone, Tablet or Desktop to see the page at a real screen width.
- Click New tab to open the page on its own, Full for a full-screen preview, or Save to download it as an .html file.
If you are working on a large page and prefer to refresh by hand, switch off Live preview while typing and press Run, or use Ctrl + Enter.
Preview on Phone, Tablet and Desktop
Most people now open websites on a phone first, so a page that only looks good on a wide monitor isn't finished. The device buttons render your page at 390 pixels wide for a typical phone, 820 for a tablet and 1280 for a laptop screen. If the panel is narrower than the device, the preview is scaled down to fit while keeping the real layout, so your media queries and responsive grids behave exactly as they would on that device.
This makes it easy to catch the classic mobile problems: text that runs off the edge, images that are too wide, buttons that are too small to tap, or a menu that never collapses.
Safe Sandboxed Preview
Pasting code from the internet into a page can be risky, so the preview runs inside a sandbox. Your code is shown in an isolated frame that has no access to this website, your saved data, your cookies or your other tabs. Links open in a new tab instead of replacing the viewer.
JavaScript in your code is allowed to run by default, so interactive elements like buttons, tabs and sliders work as expected. If you are looking at code you don't fully trust, switch off Run JavaScript in preview and you will see the page's layout and styling with every script blocked.
Built-In Page Inspector
Below the editor, the Page Inspector gives you a quick health check of your markup. It counts the elements, links, images and scripts on the page, shows the page title and lists how many headings of each level you have used.
It also points out a few common mistakes that affect both search engines and accessibility:
- A missing title. The title appears in browser tabs and search results, so every page needs one.
- No H1, or more than one. A single main heading helps readers and search engines understand what the page is about.
- Images without alt text. Alternative text describes an image for people using screen readers and shows up when an image fails to load.
Tips for Accurate Previews
Use full links for images and styles. The viewer can only show files it can reach. A path like images/logo.png points to a folder on your computer that the preview doesn't know about. Use complete addresses that start with https, or embed small images directly, and they will load correctly.
Include the viewport tag. Without <meta name="viewport">, phones zoom out and shrink your page, and the Phone preview will show that too. It is a good reminder to add it.
Mind the background option. Many snippets don't set a background colour. The viewer gives them a white page by default so they look the way most browsers show them. Turn it off if you want to see exactly what your code defines.
Who Uses an HTML Viewer?
Students learning web design use it to experiment without installing anything. Bloggers check embed codes and custom sections before adding them to WordPress or Blogger. Email marketers preview newsletters built from HTML templates. Developers test small components in isolation, and support teams open HTML files sent by customers without saving them to disk first. Because it works in any modern browser, it is just as useful on a phone or a borrowed computer as it is on your own laptop.