HTML Viewer guide: preview HTML, CSS and JavaScript safely in your browser

When you learn HTML, the fastest way to understand a tag is to try it. Write a line, see what the browser does, change it, see again. You can do that by creating a file, saving it and refreshing a browser tab each time, but a live preview removes all the friction. The free HTML Viewer gives you an editor and a preview next to each other: you type, and the page on the right updates a moment after you stop.

This guide explains how to use it well, what the "sandbox" actually does, how to test your layout at different widths, and the reasons a snippet sometimes behaves differently from what you expected.

What the tool does

You paste or write HTML in the editor. CSS can go inside a <style> element and JavaScript inside a <script> element, in the same text. The preview shows the result, and it refreshes shortly after you stop typing rather than on every keystroke, so it stays smooth while you write.

A very small starting point looks like this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 1rem; }
    .card { border: 1px solid #ccc; border-radius: 8px; padding: 1rem; max-width: 20rem; }
  </style>
</head>
<body>
  <div class="card">
    <h1>Hello</h1>
    <p>This is a card.</p>
  </div>
</body>
</html>

Paste that in and the card appears. Change max-width, or add a second paragraph, and watch the preview follow.

How the sandbox protects you

The preview is shown inside an <iframe>, which is a page embedded within a page. The iframe carries the sandbox attribute, and that attribute is the safety feature. A sandboxed frame is treated as if it came from a unique, separate origin. In practice this means:

• Scripts in your snippet can run, so you can test JavaScript, but they cannot read the cookies or storage of the site around them.
• The snippet cannot navigate the surrounding page to somewhere else.
• It cannot reach into the parent document.

This matters when you paste code you did not write. Tutorials, forum answers and chat messages often include snippets, and running unknown code directly in a normal page would be risky. In a sandboxed frame the damage a snippet can do to the page around it is limited.

It is still wise to read code before you run it. A sandbox protects the page around the frame, not your attention. A snippet can load images, fonts or scripts from other websites, and those requests go out from your browser. If you do not recognise an address in the code, think before you run it.

Step by step

1. Open the HTML Viewer.
2. Paste or type your HTML in the editor. Include the CSS and JavaScript you want to test in the same text.
3. Look at the preview. It updates shortly after you stop typing.
4. Resize your browser window to see how the page behaves on different widths. Because the preview is a normal web page, a layout that uses flexible units or media queries will respond to the width available.
5. Copy your final code out of the editor when you are happy with it.

Four ways to get more from a live preview

Test one idea at a time. If you want to learn how display: flex works, write the smallest example that shows it: a container and three boxes. A short snippet teaches more than a copied page with fifty rules.

Change one thing, then look. When something breaks, the cause is whatever you changed last. Make a single edit and check the preview before the next.

Break it on purpose. Remove a closing tag, misspell a property, leave out the quotation marks around an attribute value. Seeing how browsers handle mistakes makes you faster at finding your own. Browsers are forgiving with HTML, so they often fix things silently, which can hide a mistake that appears later.

Check responsiveness early. Add <meta name="viewport" content="width=device-width, initial-scale=1"> in the head and narrow the window. A layout built with percentages, max-width and Flexbox or Grid will adapt, while one built with fixed pixel widths will not. If you are new to this, the responsive design lesson explains the approach.

Why a snippet can look different from what you expected

Missing doctype. Without <!doctype html> at the top, browsers can fall back to an older rendering mode called quirks mode, which changes how sizes and spacing are calculated. Always start with the doctype.

Styles that do not apply. The usual reasons are a typo in a selector, a more specific rule that wins, or a property written in the wrong place. The cascade and specificity lesson explains why one rule beats another.

Images that do not appear. A path such as photo.jpg points to a file next to your page, and in a preview there is no such file. Use a full web address, or a small embedded image, to test image tags.

Scripts that cannot use storage or cookies. Because the frame is sandboxed, code that expects to read cookies or local storage of the surrounding site will not work. That is intended. Test those features in a real page on your own server.

Pop-ups and forms. Features such as opening new windows or submitting a form to another address are restricted inside a sandbox. If a button seems to do nothing, check whether it relies on one of these.

Fonts that look different. A font that is installed on your machine is used by your browser, but another person's computer may not have it. For a reliable test, use a generic family such as system-ui or sans-serif, or load a web font.

When to use something else

A viewer is ideal for small experiments and for checking a snippet. For a real project you want files on your computer, a code editor, version control and a local server, because you need multiple pages, shared stylesheets and images. Treat the viewer as a scratchpad, not a workshop.

Related tools and lessons

If you write Markdown and want to see the HTML it produces, use the Markdown Viewer. When you need to compare two versions of a snippet to see exactly what changed, the Text Diff Checker highlights additions and removals line by line. To learn the tags behind what you are previewing, work through the HTML course, beginning with your first web page and the elements and tags lesson. When you are ready to style it, move on to the CSS course.

Quick answers

Is my code uploaded anywhere? The preview is a frame inside the page you are already viewing. Read the tool page for the current details, and do not paste secrets into any online tool as a matter of habit.

Can I save my work? Copy the text out of the editor into a file on your computer. Treat the viewer as temporary.

Does it support frameworks? It runs plain HTML, CSS and JavaScript. Frameworks need a build step, which is outside what a viewer does.

Why does my JavaScript run twice or not at all? Check where the script sits. A script in the head that looks for an element will run before the element exists. Put the script at the end of the body, or add the defer attribute when you use an external file.