How to use
- Click Paste to insert HTML from your clipboard, or Open file to select an .html file.
- Keep Live preview on to update as you type, or turn it off and click Run when ready.
- Under Viewport, select Mobile 375, Tablet 768 or Desktop 1280 to check different widths, or Fit to use the full panel width. Wider previews are scaled down to fit the panel.
- Keep JavaScript on to run scripts, then open the Console under the preview to see logs and errors.
- Click Copy code or Download .html to keep your code.
Examples
Preview a card at mobile width
<style>
.card { max-width: 280px; padding: 20px; border-radius: 16px; background: #EEF3FF; font-family: system-ui, sans-serif; }
.card h3 { margin: 0 0 6px; color: #2451E8; }
</style>
<div class="card">
<h3>Weekly report</h3>
<p>Sales are up 12% this week.</p>
</div>Size: 271 B · Elements: 4 · External resources: 0
Test a click counter
<button onclick="this.textContent=+this.textContent+1; console.log('Clicks', {count: +this.textContent})">0</button>
<script>console.log('Counter ready', {count: 0})</script>Size: 174 B · Elements: 2 · External resources: 0
Console (1):
Counter ready {"count":0}Preview an order email
<table width="100%" cellpadding="0" cellspacing="0" style="background:#F7F9FC;font-family:Arial,sans-serif">
<tr><td align="center" style="padding:24px">
<table width="480" style="background:#fff">
<tr><td style="padding:24px">
<h1 style="font-size:22px">Your order has shipped</h1>
<p>Order #1042 is on its way.</p>
<a href="https://example.com/orders/1042">Track your package</a>
</td></tr>
</table>
</td></tr>
</table>Size: 469 B · Elements: 9 · External resources: 1
FAQ
Is it safe to preview untrusted HTML?
The sandbox prevents preview scripts from accessing this site's cookies or localStorage, changing the surrounding page or navigating the top window. It does not prevent every problem: an infinite loop can still freeze the tab. Turn off JavaScript before previewing code you don't trust.
Why aren't my images or CSS files loading?
Relative paths such as img/logo.png and style.css cannot load unless your HTML includes a base tag with an href that points to where the files are hosted. Use full URLs, inline CSS or data: URLs for images instead. Block external resources also prevents images, stylesheets, fonts and scripts from loading from other servers.
Can I view a website by pasting its URL?
A pasted URL is displayed as text; the tool does not fetch the page. Use View Page Source to get the HTML, then paste that code here.
Why don't alert() or form submissions work?
The sandbox blocks dialogs and form submissions. With JavaScript enabled, alert, confirm and prompt calls are logged in the Console instead; confirm returns false and prompt returns null.
Is my HTML uploaded or saved?
The tool renders your HTML in your browser without sending it to a server, and it does not save the code between visits. Referenced external resources can contact their own servers, which can see your IP address; enable Block external resources to prevent those loads.