HTML / CSS / JS Live Preview
Edit HTML, CSS, and JS with real-time iframe preview
Frequently Asked Questions
What is the HTML live preview?
Three editors (HTML, CSS, JavaScript) on one page, rendered through an iframe in real time — a lightweight CodePen. Perfect for writing quick demos, validating CSS layouts, reproducing bugs, or preparing interview solutions.
What can I use it for?
- Trying a flex/grid layout in seconds - Sharing a runnable MVP demo with teammates - Reproducing an issue: paste minimal HTML and share the link - Coding on a machine without a local setup (Chromebook, phone browser)
Is my code auto-saved? Is it uploaded?
Code persists in the browser's localStorage, so a refresh won't lose it. Nothing is uploaded or indexed. For cross-device sync, copy or export manually.
Can I use third-party libraries?
Yes — load CDN libraries via `<script src="…">` (React, Vue, jQuery, Tailwind CDN, etc.). The iframe uses appropriate sandbox policies so user code can run, but still be cautious with scripts from unknown sources.
Why don't `alert`, `prompt`, or `console.log` respond?
iframes restrict modals and cross-origin access. The sandbox here includes `allow-modals`, so `alert`/`prompt` work. For `console.log`, open browser DevTools and select the iframe's context in the Console panel.
How does this compare to CodePen or JSFiddle?
CodePen/JSFiddle offer collaboration, templates, and framework integrations at the cost of accounts and ads. DevToolkit's live preview is lighter, login-free, and privacy-friendly — great for one-off demos. For long-lived projects or community sharing, stick with CodePen.