HTML Live Preview
Write HTML, CSS and JavaScript and see the result render as you type. No account, no saving, no setup — just a scratchpad that runs in your browser.
A scratchpad for HTML, CSS and JavaScript that renders as you type, with a choice of stacked or side-by-side layout. It is deliberately minimal: no account, no saving, no sharing, so there is nothing between opening the page and testing something.
// HTML Live Preview: Features
Built for the five-minute question
Most of the time you open an online editor, the question is small: does this selector match, does this flex property do what I remember, does this snippet throw. Full-featured playgrounds answer those questions too, after you sign in, wait for an editor to boot and dismiss a prompt about saving. This does the same job with nothing in the way, which is the entire design goal.
What it deliberately does not do
There is no account, no saved history, no sharing link and no collaboration. If you need to send a reproduction to a colleague, keep a library of experiments, or work with someone in real time, a hosted playground is the right tool and this is not. Knowing which problem you have saves picking the wrong one: this is a scratchpad, not a workspace.
Two layouts for two situations
Side by side suits CSS work, where you want to see the effect of a change in the same glance as the change itself. Stacked gives the editor more width, which suits writing markup or a longer script where line wrapping is the bigger annoyance. Switching between them is one click, and the right choice usually changes as you move from writing to adjusting.
The preview is a sandboxed frame
Your code runs inside an isolated frame rather than in the page itself, so a script that throws, a style that resets everything, or markup that never closes affects only the preview. That isolation is also why the preview cannot reach into the surrounding page, which is the correct behaviour for something running arbitrary code.
Nothing is saved, so copy before you close the tab
Your code runs in your browser and is never transmitted, stored or logged. It is also not saved, which is the flip side: closing the tab discards everything, so copy anything worth keeping before you navigate away. External libraries loaded from a CDN in your markup will work, subject to the usual cross-origin rules.
// HTML Live Preview: FAQ
What is this for?
- Quick experiments. Checking whether a CSS property behaves as you remember, testing a short script, confirming how a piece of markup renders. It loads instantly and needs no account, which is what makes it suitable for a question you want answered in a minute.
How does it compare with a hosted playground?
- It is smaller on purpose. There is no saving, no sharing and no collaboration, so for building a reproduction to send someone, or keeping a collection of experiments, use a hosted service. For a throwaway check, this has less friction.
Is my work saved?
- No. Nothing is stored in your browser or anywhere else, and closing the tab discards it. Copy anything you want to keep before navigating away. This is deliberate: the tool is for experiments that end when you have your answer.
Can I load an external library?
- Yes, by adding a script tag pointing at a CDN in your HTML, exactly as you would in a real page. Most libraries distributed this way will work. Anything requiring a build step or a module bundler will not, since there is no build here.
Does JavaScript run?
- Yes, inside the sandboxed preview frame. Errors show in your browser console as usual. Because the frame is isolated, a script that throws or a stylesheet that resets everything affects only the preview, not the surrounding page.
Why can my code not access the parent page?
- Because the preview runs in a sandboxed frame. That isolation is what makes running arbitrary code safe, and it is intentional. Within the frame your code behaves normally; it simply cannot reach outside it.
Which layout should I use?
- Side by side when you are adjusting CSS and want to see cause and effect together. Stacked when you are writing markup or a longer script and want the editor to have the full width. Switching costs one click, so use whichever fits the moment.
Can I test responsive layouts?
- To a degree. Resizing the browser window changes the preview width, which exercises your media queries. For proper device testing, your browser's own device emulation gives you accurate viewport sizes and touch simulation, which a preview pane cannot.
Is it safe to paste code from an internal project?
- Yes. Your code runs in your browser and is never transmitted, stored or logged. Unlike a hosted playground, there is no copy of it on someone else's infrastructure, which is the main reason to prefer a local scratchpad for work code.
Is my code sent to a server?
- No, other than any external resources your own markup chooses to load. The editor and preview themselves make no network requests with your content.
// How to Use HTML Live Preview
-
Write or paste your code
Put your markup, styles and script into the editor. Press SAMPLE to load a small working example if you want something to modify rather than starting from an empty page.
-
Choose a layout
Use side by side when adjusting CSS so you can see the change and its effect together, or stacked when writing longer markup and you want the editor wider.
-
Copy anything worth keeping
The preview updates as you type. Nothing is saved, so copy the code out before closing the tab if the experiment turned into something you want.
Category Design