HTML Viewer

What It Does

Paste HTML on the left, see it rendered on the right - live, as you type.

• Resizable split on desktop (drag the divider)
• Mobile tabs (Code / Preview)
• Viewport simulator - Desktop, Tablet (768 px), Phone (375 px)
• Fullscreen preview while keeping the sandbox active
• JS error panel under the iframe - catches window.onerror and unhandled promise rejections from your scripts
• Download as .html

Security model

Everyone says “sandboxed iframe” - this one actually is.

The preview iframe is configured exactly as:

<iframe sandbox="allow-scripts allow-modals allow-forms allow-popups"
        referrerpolicy="no-referrer"
        srcdoc="..."></iframe>

What that means for your pasted code:

• Scripts execute inside the iframe (you want this)
• Origin is null because allow-same-origin is deliberately NOT included
• Cannot read document.cookie, localStorage, sessionStorage of the parent site
• Cannot access parent.document or any parent DOM
• Cannot navigate the parent window (top.location = ... is blocked)
• Cannot post credentialed requests that would leak gekro.com cookies
• Cannot leak referrer to outbound fetches (no-referrer policy)

Why allow-same-origin is the danger: per MDN, combining allow-scripts with allow-same-origin lets the iframe’s script remove the sandbox attribute and gain real-origin access. We never enable that combination.

Why there’s no “Open in new tab” button

Top-level navigation to a Blob URL or data URL would inherit gekro.com’s origin and defeat the sandbox. Fullscreen API (the button labelled ”⛶ Fullscreen”) keeps the iframe sandbox active and is the safe equivalent.

When To Use It

• Quick HTML scratchpad without signing into Codepen / JSFiddle
• Test someone’s HTML snippet without trusting it
• Preview a downloaded .html file in a sandboxed context
• Validate that your snippet works at 375 px / 768 px / desktop widths
• Debug runtime JavaScript errors without opening DevTools

What’s NOT Included

• Syntax highlighting in the editor (would need a 30-50 KB dependency for marginal value)
• Persistent state across reloads (intentional - this is a scratchpad, not a project)
• External resource loading restrictions - your scripts CAN fetch() from any origin (without credentials)
• PostCSS / Sass / TypeScript compilation - vanilla HTML + CSS + JS only
• Console output capture - might add if there’s demand. Errors are caught; console.log is not surfaced

Related Tools

• Markdown Visualizer - similar pattern, markdown side-by-side
• Code Snippet PNG - render code as a screenshot image
• Rich Text to Markdown - convert pasted formatted text