BrowserTools

HTML Live Preview

Write HTML, see it rendered instantly

By Guga — BrowserTools maintainer, Tbilisi, Georgia Updated 2026-08-26
Free Private No uploads
What is HTML Live Preview?

An editor on the left, an iframe on the right, and a mode switch above them. The default is live, so every keystroke replaces the document in the frame and a change to a colour or a margin is visible before you have finished typing the value. Switching to On run only hides that and restores a Run button, which is what you want for markup containing a script that loops or for anything where a half-typed tag would throw on each edit. The frame is built from srcDoc with a sandbox attribute granting allow-scripts and allow-modals, so inline JavaScript and onclick handlers run while the document cannot reach this page, its cookies or its local storage — it is an isolated origin of its own. External images, stylesheets and scripts still load over the network. Reset restores the sample card.

Write or paste HTML, CSS and JavaScript in the editor and see the result render live in a sandboxed preview pane. The fastest scratchpad for snippets, templates and experiments.

Private HTML Live Preview In Your Browser

HTML Live Preview is processed locally with client-side JavaScript. Your files never touch a server, and there is no queue to wait in.

Step-by-Step

How to use HTML Live Preview

1

Type or paste markup into the Editor pane; a working sample document is loaded when the page opens.

2

Leave the selector on Live update for instant rendering, or switch it to On run only and press Run after each change.

3

Interact with the result in the Preview pane — inline scripts and onclick handlers genuinely execute inside the frame.

4

Press Reset in the panel header to bring the original sample document back when you want a clean slate.

Key Capabilities
  • The frame is created with srcDoc and a sandbox granting allow-scripts and allow-modals, so scripts run against an isolated origin.
  • Live update replaces the document on every keystroke; choosing On run only brings back a Run button for markup that misbehaves mid-edit.
  • External images, stylesheets and scripts load normally, so a snippet can reference a CDN exactly as it will once deployed.
  • Reset restores the built-in sample, a working card with an interactive button, so there is something runnable to start from.
Common Use Cases
  • A developer checks that a snippet renders correctly before pasting it into a template, without creating a file to do it.
  • Someone tests a small onclick or form handler in isolation, where a stray script cannot reach the rest of the page.
  • A support engineer reproduces a customer's broken markup by pasting it and watching the frame fail in the same way.
Clear Answers

Frequently Asked Questions

Why can my code not see localStorage or reach the parent page?
The sandbox attribute withholds those capabilities on purpose — that is what makes the frame an isolated origin rather than a window onto this one. Storage calls throw instead of quietly returning null. If a snippet genuinely needs them, test it on a real page instead.
Can I load a whole site into the frame?
Not reliably. A frame built from srcDoc cannot embed most real sites, because they send an X-Frame-Options or frame-ancestors policy that forbids it. This is a scratchpad for your own markup, not a tool for inspecting someone else's site.
Do external images and CDN files still load?
Yes. The sandbox limits what the document may do, not what it may fetch, so images, stylesheets and scripts arrive from the network as usual and the request originates from your browser.
Does anything I type get sent anywhere?
Not by this page. The document is handed to the frame inside the page you already have open, and there is no upload or lookup involved. Anything your own snippet fetches is a separate matter — that request comes from your code, out of your browser.