HTML Viewer & Live Editor

Paste or write HTML, CSS and JavaScript and see it rendered live in a sandboxed preview, with phone and tablet widths and a switch to turn scripts off.

Last updatedHow we build & check our tools
Results will appear here once you enter your values.

How the live preview works

Your code is placed in an through its srcdoc attribute, so the browser renders it as a separate document without saving a file or contacting a server. The preview refreshes 300 ms after you stop typing, which avoids reloading scripts on every keystroke; Refresh preview forces an immediate reload.

You can paste a complete page starting with or just a fragment such as a table or a form. Fragments are wrapped in a minimal document with and a responsive viewport tag, so accented characters display correctly and the Phone 375 width behaves like a real phone instead of a zoomed-out desktop page.

The counter under the editor shows lines, characters, UTF-8 bytes and opening tags. Bytes matter when HTML is embedded in email (many clients clip messages over about 102 KB) or stored in a size-limited database column.

Why the preview is sandboxed

HTML you paste from elsewhere can contain scripts. The preview frame uses the sandbox attribute with only allow-scripts and allow-modals. It deliberately omits allow-same-origin, so the previewed page runs in a unique opaque origin:

  • It cannot read this site's cookies, localStorage or the editor contents.
  • It cannot submit forms, open pop-ups or navigate the top window.
  • It cannot escape the sandbox. MDN warns that combining allow-scripts with allow-same-origin lets an embedded page remove its own sandbox attribute, which is why that pair is never used here.

Turning off Run JavaScript sets an empty sandbox, the most restrictive mode, which is useful for inspecting an email template or a suspicious snippet without executing anything.

Things that behave differently in a preview

  • Relative URLs like styles.css or img/logo.png have no base address, so they will not load. Use absolute URLs or inline the CSS.
  • External resources are real requests. Scripts, stylesheets and images from other domains are fetched by your browser, and those servers see your IP address. The tool lists them above the preview.
  • localStorage, cookies and IndexedDB throw errors inside an opaque-origin sandbox, so code that depends on them will fail here but may work on your site.
  • Forms and links that navigate away are blocked by the sandbox.
  • Email HTML renders more permissively in a browser than in Outlook or Gmail, which strip many CSS properties; test in the real client before sending.

Frequently Asked Questions

Common questions about the HTML Viewer & Live Editor

No. The preview is generated in your browser with the iframe srcdoc attribute. The only network requests are for external resources your own HTML references, such as a CDN script or image.
From the same team

Turn your GPU into an OpenAI-compatible API endpoint

Wide Area AI routes your LLM API calls to your own hardware over a Cloudflare Tunnel — free local inference with edge caching and automatic cloud failover. Works with any OpenAI SDK.

Start routing — free

Sources & References

<iframe>: The Inline Frame element (sandbox attribute)

Sandbox tokens and the warning about combining allow-scripts with allow-same-origin

The iframe element: srcdoc and sandbox

Specification of srcdoc documents and sandboxing flags

Viewport meta tag

Why fragments get a responsive viewport for the phone preview