HTML Viewer

How to preview pasted HTML online

To render HTML snippets or complete documents in your browser, paste your markup into the editor pane and use the sandbox controls.

1. Paste or type an HTML fragment or a full <!doctype html> document into the left HTML code editor.
2. Watch the right Preview pane update automatically (with a 180 ms debounce) inside a sandboxed iframe.
3. Inspect or click the script control button in the preview header—which displays JavaScript auto · off, JavaScript auto · on, or JavaScript manual · on/off (plus any detected CDN framework prefix such as Tailwind, Bootstrap, Alpine, Vue, or React)—to override script execution.
4. Check the pane footers for line and character counts (N lines · N characters) and preview state (Live · JS on/off or Empty · JS off), or use Copy and Clear in the editor header.

Reading your results: Editor, sandbox, and script detection

HTML Viewer is a strictly local, paste-only workspace. It never fetches external URLs from an address bar and never uploads your code to a backend server. Every control in the workspace reflects a specific isolation or detection rule:

Workspace indicator / Control	What it means	How the viewer handles it
sandbox="" (JS off)	Maximum iframe restriction. Inline event handlers, <script> tags, forms, popups, and parent-origin access are completely blocked.	Default state when the editor is empty, contains only static HTML/CSS, or when you toggle scripts to manual · off.
sandbox="allow-scripts" (JS on)	Permits JavaScript execution inside the preview frame while keeping allow-same-origin disabled so scripts cannot read SolViewer cookies or storage.	Activated automatically when executable scripts are detected in active markup, or when you toggle scripts to manual · on.
JavaScript auto · on / off	Automatic script detection mode based on scanning active markup on each edit.	Turns scripts on if active markup contains an executable <script> tag, an inline on*= event attribute, or a javascript: URL.
JavaScript manual · on / off	User-overridden script state triggered by clicking the toggle button in the preview header.	Holds your manual choice for the current document snapshot. Editing the code in the editor resets the control back to auto detection.
Framework prefix badge	Displays Tailwind, Bootstrap, Alpine, Vue, or React before the JavaScript label when recognized CDN URLs appear in a <script src="..."> tag.	Confirms that the viewer recognized a known client library or browser CDN script in your active markup.

Capability boundary: HTML Viewer renders pasted markup only; to fetch HTML from a live website first, use View Source and paste the result here.

Worked example: Testing an interactive HTML & Tailwind CDN snippet

Suppose you want to prototype a responsive alert banner with a dismiss button using the Tailwind CSS browser CDN and an inline click handler:

<!doctype html>
<html lang="en">
  <head>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  </head>
  <body class="p-6 font-sans">
    <div id="banner" class="flex items-center justify-between rounded-lg border p-4">
      <p>Deployment completed with zero warnings.</p>
      <button onclick="document.getElementById('banner').remove()" class="px-3 py-1 font-semibold">
        Dismiss
      </button>
    </div>
    <!-- <script>console.log('commented script ignored')</script> -->
  </body>
</html>

Here is what happens when you paste this snippet into the editor:

1. Active markup filtering: The detector (`detectViewerFeatures`) strips the HTML comment on line 13 so commented-out scripts never trigger false detections.
2. Framework & handler detection: It detects @tailwindcss/browser in the <script src> attribute and the inline onclick= handler on the button.
3. Automatic sandbox update: The header button updates to Tailwind · JavaScript auto · on, sets the iframe to sandbox="allow-scripts", injects a matching :root{color-scheme:dark|light} style tag so native scrollbars and form controls match your active SolViewer theme, and renders the interactive banner in srcdoc. Clicking the toggle button switches to Tailwind · JavaScript manual · off and strips allow-scripts immediately.

How iframe sandboxing and automatic script detection work

Pasting arbitrary HTML from a forum, third-party email template, or scraped webpage into an unisolated DOM can execute cross-site scripting (XSS) payloads in your browser. HTML Viewer protects your session through three architectural layers:

• Opaque origin isolation (no allow-same-origin): As documented in the MDN <iframe> sandbox specification, omitting allow-same-origin forces the iframe into a unique, opaque security origin. Even when allow-scripts is enabled, code inside the preview cannot read document.cookie, localStorage, or the parent DOM of SolViewer, and the iframe sets referrerpolicy="no-referrer".
• Non-executable container stripping: Before scanning for scripts, html-viewer.js removes HTML comments (<!-- ... -->), <template> blocks, and <noscript> blocks, and checks the type attribute on <script> tags so non-JavaScript data blocks (such as <script type="application/ld+json"> or type="importmap") do not unnecessarily enable script execution.
• Theme-aware color-scheme injection: The viewer injects <style data-viewer-color-scheme>:root{color-scheme:dark|light}</style> into your document's <head> (without overwriting your own CSS rules) so unstyled HTML fragments remain readable in both dark and light modes.

Common problems and fixes

If your pasted HTML does not look or behave as expected in the preview pane, check these common causes:

• Images, stylesheets, or links in pasted source code show as broken.
  Cause: You copied HTML from a website that uses root-relative paths (such as <link href="/assets/app.css"> or <img src="/logo.png">). Inside a local srcdoc iframe, there is no base hostname to resolve relative paths.
  Fix: Add a <base> tag inside the <head> of your pasted HTML so relative URLs resolve against the original domain:

  <head>
    <base href="https://example.com/" />
  </head>

• Interactive buttons or scripts stop working after you clicked the JavaScript toggle.
  Cause: The toggle is set to JavaScript manual · off.
  Fix: Click the toggle button in the preview header to switch to JavaScript manual · on, or make any edit in the code editor to return to automatic detection.
• A JSON-LD block did not turn on JavaScript.
  Cause: <script type="application/ld+json"> is a declarative data block, not executable ECMAScript. Only standard JavaScript MIME types, type="module", or untyped <script> tags enable auto-JS.
  Fix: To validate JSON-LD structured data, paste the HTML into View Source (Text mode) or check the live URL in SEO Checker.
• localStorage, sessionStorage, or document.cookie throws a SecurityError inside your preview script.
  Cause: Because the iframe runs in a sandboxed opaque origin without allow-same-origin, browsers forbid access to origin-bound storage APIs.
  Fix: Wrap storage calls in a try / catch block or use in-memory JavaScript variables while prototyping in the sandbox.

How this check works

HTML Viewer embeds a CodeMirror 6 editor with HTML syntax highlighting, line numbers, code folding, and active-line tracking. Whenever the editor document changes, a 180 ms debounced listener runs detectViewerFeatures on the string, updates the line and character counters, configures the iframe's sandbox attribute via getViewerSandbox, and writes the resulting HTML into the iframe's srcdoc property.

Because the entire workflow runs in client-side JavaScript, nothing you type or paste is transmitted over the network by SolViewer (though external https:// images, fonts, or CDN scripts referenced inside your HTML will be requested by your browser when rendering the preview).

Frequently asked questions

Is my pasted HTML uploaded to a server?

No. HTML Viewer processes and renders your markup entirely inside your browser using an iframe srcdoc attribute. Your code never leaves your device unless your HTML itself references external http:// or https:// assets (like CDN scripts or remote images) that your browser loads to paint the preview.

How can I preview the HTML of a live website URL?

HTML Viewer is a paste-only sandbox and does not fetch URLs directly. Open View Source, fetch the public URL, click Copy, and paste that HTML into this editor. Remember to add a <base href="https://original-domain.com/"> tag if the page relies on relative CSS or image paths.

Why does my manual JavaScript toggle reset to auto when I type in the editor?

To prevent accidentally leaving scripts enabled or disabled when you paste a brand-new snippet, any edit to the document clears the manual override and re-evaluates whether the current markup contains executable scripts.

Which frameworks are detected in the JavaScript toggle label?

When an executable <script src="..."> tag references a known CDN URL for Tailwind CSS (@tailwindcss/browser or cdn.tailwindcss.com), Bootstrap, Alpine.js, Vue, or React, the viewer prefixes the framework name on the script status button.

Can scripts inside the preview access my browser cookies or parent tab?

No. Even when JavaScript is enabled, the iframe sandbox sets only allow-scripts and never sets allow-same-origin, allow-top-navigation, or allow-popups. However, you should still only enable JavaScript for code you understand.

Related tools

• View Source — retrieve raw server HTML from any public URL (or format pasted HTML) and run an on-page SEO report.
• HTML Extractor — strip all HTML tags and scripts from your markup to extract clean, readable plain text.
• SEO Checker — audit title tags, headings, canonicals, and JSON-LD structured data on a live webpage.
• Download Returned HTML — download the raw .html document returned by a public URL to your computer.