You find a CSS trick in a tutorial and want to see it work. A client sends an HTML email template and asks why the header looks broken. You are learning web development and want to understand what a single line of JavaScript does. None of these needs a code editor, a local server or a project folder. They need a place to paste code and see the result immediately.
This guide shows how to test HTML, CSS and JavaScript online, how to debug what you see, how to check layouts at different sizes, and why the safety of the preview matters more than most people realise.
Why test small pieces of code in isolation
Large pages have a lot going on: frameworks, global styles, other scripts and caching. When something looks wrong, it can be hard to tell whether the problem is in the snippet you just added or somewhere else. Copying the snippet into an empty preview removes everything else. If it works there, the problem is an interaction with the rest of your page. If it fails there too, the bug is in the snippet itself.
This "isolate and test" habit saves hours, and it is the same reason developers build minimal examples before asking for help on forums.
Your first live preview
- Open the Live HTML Viewer. It starts with a small example: a heading, a paragraph and a button.
- Edit the code. The preview updates a moment after you stop typing; there is nothing to save or refresh.
- Click the button in the preview to see JavaScript run: it logs a message and shows an alert.
- Paste your own snippet, replacing the example.
You can write everything in one place: HTML elements, CSS in a style block or in style attributes, and JavaScript in a script block or in event attributes such as onclick. For example:
.card { max-width: 320px; padding: 1.5rem; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); font-family: sans-serif; }
.card button { background: #3b82f6; color: #fff; border: 0; padding: .6rem 1rem; border-radius: 8px; }
<div class="card">
<h2>Pro plan</h2>
Everything you need to grow.
<button>Choose plan</button>
</div>
Debug with the built-in console
When JavaScript misbehaves, the console is your best friend. Click the console button above the preview to open it. It shows:
- console.log, console.info and console.warn messages from your scripts.
- Errors, including uncaught errors with their line and column.
Add console.log calls to see what your code is doing at each step: whether a function runs, what a variable contains, which branch of an if statement was taken. Our guide on debugging JavaScript with the console covers how to read error messages and the classic bugs in more depth. For pure JavaScript with no page to show, the JavaScript Compiler gives a larger console that is easier to read.
Test layouts at different sizes
A layout that looks perfect in a narrow preview pane may break at full width, and the other way round. Two ways to check:
- Full screen: expand the preview to fill your screen.
- New tab: open the preview in its own tab, then resize the browser window to see how the layout responds, from phone width to wide desktop.
Remember that CSS media queries respond to the width of the window (the viewport), not the size of your screen. Our guide on screen resolution versus viewport size explains the difference, and the Screen Resolution Checker shows both values for your device.
Why a sandboxed preview matters
When you paste code from a tutorial, a forum answer or a file someone sent you, you are running someone else's code. In an unprotected preview, that code would run as part of the website you are on, with access to that site's cookies and stored data. A malicious snippet could read or send that data somewhere else. This is a real technique called self-XSS, and it is why browser consoles warn you not to paste code you do not understand.
The Live HTML Viewer runs your code inside a sandboxed frame with its own isolated origin. Scripts can run, show alerts and open pop-ups, but they cannot read the site's cookies or local storage. The Open in New Tab option uses the same sandbox, so the code is isolated wherever you view it.
The trade-off is that code relying on cookies or localStorage will not work in the preview, by design. If you need to test those features, use a local project.
Testing HTML emails
HTML emails are a special case. Email apps support only a limited subset of HTML and CSS: layouts are often built with tables, styles need to be inline, and many modern CSS features are ignored. A browser preview shows how the email looks in a browser, which is a useful first check for broken tags, missing images and obvious layout problems, but it does not guarantee how every email app will display it. Always send a test email to yourself in the main apps your audience uses before a campaign.
Common mistakes the preview catches
- Unclosed tags. A missing closing div can swallow the rest of the page into the wrong container.
- Typos in CSS property names, which browsers silently ignore.
- Script errors that stop everything after them from running; the console shows the line.
- Images with wrong paths. Relative paths from your project will not exist in the preview; use full URLs to test images.
- Fixed widths that cause horizontal scrolling on phones.
A quick workflow for learning CSS
If you are learning, a live preview turns reading into experimenting. A routine that works well:
- Start from a tiny example, such as a box with some text inside it.
- Change one property at a time and watch the result: switch display from block to flex, then try justify-content: center, then gap: 1rem.
- Predict before you look. Say what you expect to happen, then check. Wrong guesses are where the learning happens.
- Break it on purpose. Remove a closing tag or misspell a property and see how the browser reacts, so you recognise the symptoms later.
- Rebuild something you like. Pick a button, card or navigation bar from a website you admire and recreate it from scratch.
Ten minutes of this a day builds a far better feel for CSS than reading documentation alone.
Frequently asked questions
Can I use external libraries?
The preview runs standard HTML, so script and link tags pointing to full URLs are loaded like on any page, subject to the sandbox.
Is my code saved?
No. It stays in your browser tab only. Copy it before closing the page.
Why doesn't localStorage work?
The sandbox blocks storage access to keep pasted code isolated from this site's data.
Is it safe to paste code from the internet?
The sandbox greatly limits what the code can do, but you should still be cautious with code from sources you do not trust, especially anything that asks you to log in or download files.
Does it work on phones?
Yes, though editing code is much easier on a computer.
Testing snippets in isolation is the fastest way to learn, prototype and debug. Paste your code into the Live HTML Viewer, open the console, check it at full size, and keep the sandbox in mind when the code comes from somewhere else.
