HTML/CSS Preview
Compare responsive layout at adjustable mobile and desktop widths using an isolated sandboxed iframe.
Scripts are removed and never run. The preview uses a sandboxed iframe without allow-scripts. This is a layout preview only; it does not emulate a native device, DPR, or exact real-browser behavior.
Mobile
Desktop
A QUICK WALKTHROUGH
How to use this tool
- Paste HTML and CSS into the separate editors.
- Adjust the mobile and desktop viewport widths.
- Inspect both previews and remember that this is a layout approximation, not a native-device or DPR emulator.
Scripts never execute
Script elements and inline event-handler attributes are removed before source is placed in srcdoc. Each preview iframe has sandbox="" and does not include allow-scripts, so pasted JavaScript cannot run.
Viewport widths are adjustable
Set independent pixel widths for the mobile and desktop frames. The frames show layout at those CSS viewport widths while remaining inside the current browser window.
Clear limits
This tool previews HTML and CSS layout only. It does not emulate native device controls, device-pixel ratio, touch hardware, browser chrome, or exact rendering behavior across real browsers.
GOOD TO KNOW
Common questions
Can pasted JavaScript run?
No. Script elements and inline event handlers are removed, and the sandboxed iframes omit allow-scripts.
Does this simulate a phone or tablet?
No. It changes the CSS viewport width only. Native controls, DPR, touch input, and browser-specific behavior are not simulated.
Is my code uploaded?
The page does not upload your code; it assembles the preview locally. External URLs in your HTML or CSS can still request resources.