What is this tool?

This HTML preview page is a free, in-browser live HTML renderer. You edit markup (and embedded CSS and JavaScript) in a Monaco editor on the left; the right panel shows the result inside a sandboxed iframe using srcDoc. Updates are debounced (about 100ms) so typing stays smooth while the preview stays in sync. No local server, no upload, and no account—ideal for quick prototypes, email-style snippets, or full documents with <style> and <script> blocks.

Why use an online HTML preview?

Opening raw .html via file:// or spinning up a dev server slows down small experiments. A browser HTML sandbox lets you paste a fragment or a complete page and see layout, fonts, and scripts immediately— useful for component demos, CSS debugging, iframe embed tests, and teaching markup.

• Compare editor source with rendered DOM without leaving the tab.
• Try responsive widths with preset phone and tablet frames.
• Share or save documents when you need the same HTML again (Spoold history and share flows).

Key features

• Split view — Resizable columns: HTML editor and live preview.
• Live iframe — Preview uses srcDoc with sandbox="allow-scripts allow-modals allow-forms".
• Debounced refresh — Short delay after edits before the iframe updates.
• Device presets & zoom — Common phone, tablet, and desktop sizes; portrait/landscape toggle; zoom 50–150%.
• Open in new tab — Opens the current HTML as a blob URL in a separate window for full-window testing.
• Sample, clear, copy — Starter page, reset, and one-click copy from the editor toolbar.
• History & save — Reopen recent work or named saves (client-side storage).

How to use

1. Paste HTML into the left panel or click Sample to load a demo page.
2. Watch the Preview panel; pick a device frame or leave responsive full width.
3. Adjust zoom or orientation for small screens; use ↗ when you need a standalone tab.
4. Drag the center divider to give more space to the editor or the preview.

Sandbox & limits

The preview iframe is isolated from Spoold's own origin. That improves safety but means some APIs behave differently than on your production domain—e.g. certain fetch calls to other sites may hit CORS as usual, and features that expect same-origin cookies or storage on the parent site will not apply inside the iframe the same way.

Treat this as a scratchpad, not a hosted deployment. Do not paste secrets you would not put in a local file. For escaping dynamic text before embedding in HTML, use the HTML entities tool.

Device preview

Choose presets such as iPhone, Pixel, iPad, and common desktop resolutions to approximate viewport width and height. The chrome shows the effective pixel box at your selected zoom—handy for media query checks and mobile-first CSS. It is still the same browser engine; real devices differ in font metrics, safe areas, and input modes.

FAQ

Related terms

Core: HTML preview online, live HTML editor, HTML renderer browser, HTML viewer online, paste HTML see result, WYSIWYG HTML sandbox, iframe srcDoc preview.

Stack: HTML CSS JavaScript playground, inline style test, script tag test harness, email HTML preview safe (manual review), static page prototype.

Responsive: responsive HTML preview, mobile viewport simulator, iPhone width CSS test, breakpoint preview tool.

Security: sandboxed iframe HTML, no server HTML render, client-side only HTML tool. Pair with Markdown preview for docs and minify when shipping compact markup.

Similar tools

You might also use:

• HTML Entities
• Markdown Preview
• Code Editor
• Code Minifier
• JSON Formatter

Conclusion

Spoold's HTML Preview combines a real code editor with a live iframe, device frames, zoom, and quick open-in-tab—so you can validate markup and behavior fast. For encoding, minification, or Markdown workflows, use the related tools above; for production hosting, deploy to your usual stack and test there too.