HTML live preview

Paste an HTML page, for example one ChatGPT or Claude wrote, or separate HTML, CSS and JavaScript, and see it run as you type. Code runs in an isolated frame, with a console for its messages and phone, tablet and full widths.

  • 100% free
  • Runs in your browser
  • No uploads
Preview

Press Run to see the page.

Console
  1. console.log output and errors from your code appear here.

Code runs in an isolated frame: it can't see this site, your saved data or cookies. It can't contact other websites unless you allow it. Your code is saved in this browser only.

How to preview HTML

  1. Paste your code. A whole page in the HTML tab, or HTML, CSS and JavaScript in their own tabs.
  2. Watch it run. With Run as I type on, the preview refreshes a moment after you stop typing. Otherwise press Run.
  3. Check the console. Logs and errors from your code appear under the preview.
  4. Try other widths. Phone (375 px) and Tablet (768 px) show how the layout responds.

How the sandbox keeps you safe

Code runs in an isolated frame. The preview is an iframe with sandbox="allow-scripts" and no permission to share this site's origin. Scripts work, but the page they run in is a stranger to this site: it can't read its storage, cookies or content, can't open windows and can't take you to another page.

No network unless you allow it. A content security policy blocks requests to other websites, so pasted code can't load trackers or send what you type anywhere. Turning on internet access lifts only that rule; the frame stays isolated.

Nothing leaves your device. Your code is kept in this browser so it survives a reload, and you can delete it.

Try it with an example

The example is a small tip calculator split into HTML, CSS and JavaScript. Change the bill or the percentage in the preview and watch the console log each update.

Common problems and fixes

  • Blank preview. Look in the console for an error. A missing closing tag or quote can stop everything after it.
  • "Blocked https://…" in the console. The page loads files from the internet; allow it under the editor.
  • alert() or prompt() does nothing. Pop-up dialogs are blocked in the sandbox. Use console.log instead.
  • Links don't open. Clicking a link in the preview only logs its address in the console, so a page can't lead you somewhere unexpected. Links to #sections within the page still work.

Frequently asked questions

Is it safe to run HTML that an AI or someone else wrote?

The code runs in a sandboxed frame with its own blank origin. It can run scripts and draw on its own page, but it can't read this site, your cookies or anything saved in your browser for other sites, can't open pop-ups and can't navigate this page away. By default it also can't contact other websites. Treat it like any web page: don't type passwords into it.

Why doesn't my page load Tailwind, Chart.js or images from the web?

Internet access is off by default, so code you paste can't send data anywhere or load anything you didn't see. Many AI-written pages load libraries from a CDN; tick Allow loading files from the internet and run again. The console says which file was blocked.

Do I need to split my code into HTML, CSS and JS?

No. Paste a whole page, with its <style> and <script> tags, into the HTML tab and it runs as it is. The CSS and JS tabs are there for code that comes in pieces, as on CodePen: CSS is added to the page's head and JavaScript runs at the end of the body.

What shows in the console?

console.log, info, warn and error from your code, uncaught errors with their line, rejected promises, and files that failed to load or were blocked. Objects are shown up to three levels deep. The console clears each time the page runs.

Why can't my code use localStorage or cookies?

Because the frame has no origin of its own, browsers don't give it storage, and reading localStorage throws a security error. That's what stops pasted code from reaching your data. Keep state in variables while testing.