HTML Preview Online

What the sandbox allows and blocks

The preview is an <iframe> that gets your code through its srcdoc attribute, with sandbox set to allow-scripts allow-forms allow-modals. Because allow-same-origin is left out, the browser gives the frame an opaque origin, which scripts see as null. To the browser, the preview is a separate site with no cookies and no storage.

Here's what code in the preview can and can't do:

• Scripts run, forms submit inside the frame, and alert(), confirm() and prompt() work.
• Reading parent.document or setting top.location throws a SecurityError, so the code can't change the toolo page or send the tab somewhere else.
• document.cookie, localStorage, sessionStorage, IndexedDB and service workers all throw a SecurityError too. A null origin has nowhere to keep data.
• window.open() returns null, and links with target="_blank" do nothing, because popups aren't allowed.
• The frame can't go full screen or use the camera, microphone or location.
• Requests from fetch() send Origin: null. Public APIs that allow every origin still answer. APIs that check the origin usually refuse.

What the sandbox doesn't hide

The sandbox protects the page and your data from the code. It doesn't stop the code from loading things. Images, fonts, stylesheets and scripts that the HTML points to are fetched from their own servers, and those servers see your IP address like any website would.

So with HTML you don't trust, turn off Run JavaScript before you paste it, and never type a real password into a form inside the preview. A form can still send what you type to whatever address its action names.

Why the preview can look different from your site

Most differences come from files the HTML expects to find next to it:

• Relative paths like styles.css or img/logo.png resolve against the toolo page, so they point at toolo.dev/tools/img/logo.png and fail. Add <base href="https://your-site.com/"> as the first tag in <head>, use full URLs, or paste the CSS into a <style> tag.
• Media queries respond to the width of the preview frame, not your window. In split view the frame is half the width of the tool, so a responsive page often shows its mobile or tablet layout. Full Screen gives it the whole width.
• Clicking a link loads that page inside the frame, and many sites refuse to be framed and show an error. Change anything in the editor to bring your page back.
• When no CSS loads, you see the browser defaults: a white background, a serif font and an 8-pixel margin around body. If your page looks plain, check the stylesheet links first.

How browsers repair broken HTML

Browsers never reject HTML. The WHATWG HTML Living Standard defines how the parser must handle every mistake, so Chrome, Firefox and Safari build the same document from the same broken source. That's why a page with missing closing tags still looks right, and why a preview can't tell you whether your HTML is valid.

A few repairs that surprise people:

• A <p> can't hold block elements. <p>Intro <div>Box</div> end</p> becomes <p>Intro </p><div>Box</div> end<p></p>, so CSS aimed at p div matches nothing.
• Table rows always end up in a <tbody>, even if you didn't write one. A selector like table > tr never matches.
• Text placed directly inside <table>, outside a cell, moves to just before the table: <table>Note<tr><td>Cell</td></tr></table> shows Note above it.
• Without <!DOCTYPE html>, quirks mode changes some rules. For example, a <table> no longer closes an open <p>, so the table ends up inside the paragraph.

Use the same sandbox in your own app

If your app shows HTML that users write, such as email templates, widgets or AI output, render it the same way. Leave out allow-same-origin whenever you add allow-scripts. With both flags, a script in the frame can reach its own <iframe> element, remove the sandbox attribute and reload itself with full access to your page. If the HTML only has to be shown, not run, use sandbox="" and every flag stays off.

To keep the indentation readable before you paste code here, the Format mode of the HTML Minifier re-indents it, and Minify shrinks it again when you're done.

<!-- No allow-same-origin: the frame gets a null origin. -->
<iframe
  title="Preview"
  sandbox="allow-scripts allow-forms allow-modals"
  srcdoc="<h1>Hello</h1><script>console.log(location.origin)</script>"
></iframe>

function Preview({ html, runScripts }) {
  return (
    <iframe
      // Sandbox flags apply when the frame loads, so a new key reloads it.
      key={runScripts ? "scripts" : "no-scripts"}
      title="Preview"
      sandbox={runScripts ? "allow-scripts allow-forms allow-modals" : ""}
      srcDoc={html}
      style={{ width: "100%", height: 600, border: 0, background: "white" }}
    />
  );
}

const frame = document.createElement("iframe");
frame.title = "Preview";
frame.sandbox.add("allow-scripts", "allow-forms", "allow-modals");
frame.srcdoc = html;
// The flags are read when the frame loads, which happens on append.
document.body.append(frame);