Live HTML Viewer
Write or paste HTML and preview it in Desktop and Mobile simultaneously. A sandboxed dual-pane viewer with proportional scroll sync — no data shared.
Disclaimer: Free tool provided “as is” by MonitorGiant. No warranty or liability for any data loss, security issues, or infrastructure problems arising from use of this tool. Results are for informational purposes only. · A Free Tool by MonitorGiant
How Live HTML Viewer works
The Live HTML Viewer renders your HTML in two sandboxed iframes simultaneously — a fluid desktop pane and a permanent 375 px mobile pane. Both update as you type, and proportional scroll sync lets you compare vertical layout at a glance across breakpoints.
- 1
Write or paste HTML into the editor
The editor occupies the full width at the top. Paste any HTML — inline <style> and <script> tags are supported. The editor is vertically resizable via the drag handle at the bottom-right.
- 2
Both previews update as you type
Auto-update re-renders both sandboxed iframes 400 ms after you stop typing. Press Ctrl+Enter or click Run to render manually — useful for large or complex snippets.
- 3
Switch the main pane between Desktop and Tablet
The left pane defaults to fluid Desktop width. Clicking Tablet centres the content at 1024 px. The right Mobile pane is always 375 px regardless of which main mode is active.
- 4
Sync scroll compares sections across breakpoints
With Sync scroll on, scrolling the desktop iframe sends a proportional scroll instruction to the mobile iframe. Scroll to a specific section and instantly see how it renders at 375 px.
- 5
Load a starter template
Click any template button to insert ready-made HTML — a full-page skeleton, a data table, a contact form, a flexbox grid, or a product card. Both previews refresh immediately.
Both iframes use the sandbox attribute (allow-scripts, allow-same-origin). Your HTML never leaves the browser. Scroll sync uses window.postMessage between the iframes and the parent page — no server communication.
Frequently asked questions — Live HTML Viewer
How do I preview HTML without a web server?
Paste or type your HTML into the editor at the top — both the desktop and mobile previews update within 400 ms of you stopping. Inline CSS inside <style> tags and JavaScript inside <script> tags are fully supported. No server, no build step, and no file upload is required. The preview runs entirely in sandboxed iframes in your browser.
Why are there two preview panes?
The dual-pane layout lets you see the desktop and mobile rendering of your HTML at the same time. You can instantly spot layout breaks, text overflow, image scaling issues, or button sizing problems that only appear on small screens — without switching between viewport modes.
How does the synchronized scrolling work?
When Sync scroll is on, a small relay script is injected into each iframe's srcdoc. When you scroll the desktop pane, the script posts a scroll-ratio message to the parent page, which then sends a proportional scroll command to the mobile iframe. This is done via window.postMessage and works without any server-side logic or same-origin access.
What does the Tablet mode do to the main pane?
Clicking Tablet constrains the main pane's iframe to 1024 px wide, centred within the scrollable container. This simulates a landscape iPad or typical tablet breakpoint. The mobile pane on the right is unaffected — it always shows the 375 px mobile view, letting you compare tablet and mobile simultaneously.
Can I include external CSS or JavaScript libraries?
Yes — add standard <link rel="stylesheet"> or <script src="..."> tags pointing to any public CDN (jsDelivr, cdnjs, unpkg). Both sandboxed iframes allow network requests. Include Bootstrap, Tailwind's CDN build, Alpine.js, or Chart.js and see them render in both panes in real time.
Comments & Feedback
Found a bug? Have a suggestion? We'd love to hear from you.
Related Tools
From the makers of this tool
Need deeper observability?
MonitorGiant tracks real-time AI performance, infrastructure health, and system reliability — far beyond what free utilities can show.