HTML editor with a sandboxed live preview

Edit markup with tag completion and see it render as you type. The example is an accessible contact form; break it and run the accessibility check to see what changes.

Loading the editor…

What the preview can and cannot do

Your page renders inside an iframe with an opaque origin. It can run its own scripts and show alerts, but it cannot read this site, your saved projects or your cookies, and it cannot navigate the main window.

Network access is off by default, so a CDN script tag or a tracking pixel in pasted code will not load until you turn on Network in the preview bar. The editor lists every external URL it finds before you decide.

Built for checking real markup

Linked stylesheets, scripts and images from your project are inlined into the preview, so multi-file pages work without a server. The accessibility tab runs a local subset of common checks (missing alt text, unlabeled inputs, nameless buttons, heading jumps, contrast). It is a quick first pass, not a replacement for axe-core or a screen reader.

How to use it

  1. Edit index.html; the preview refreshes after a short pause.
  2. Use Ctrl/Cmd+Space for tag and attribute completion, or type ! and press Enter for an HTML5 boilerplate.
  3. Open the Accessibility tab and press Check preview.
  4. Export the project as a ZIP when you are done.

Questions

Does my HTML get uploaded anywhere?

No. Editing, previewing and saving all happen in your browser. Projects are stored in IndexedDB on this device until you delete them.

Why does an external script not load?

Previews block network requests by default for privacy. Turn on the Network switch in the preview bar if you trust the URLs listed above the preview.

Can I preview several HTML pages?

Yes. The preview renders the HTML file you are editing, or index.html in the same folder when you edit a CSS or script file.