What the real-time HTML editor does
Write HTML — with inline CSS and JavaScript if you like — on the left and see it rendered on the right as you type. There is no save step, no reload and no project to set up. It is a scratchpad for trying a layout idea, checking how a snippet from a tutorial looks, debugging a fragment copied from a page, or teaching HTML with instant feedback. Rendering happens in a sandboxed frame in your browser; nothing is uploaded.
What goes in the editor
<style>
.card { padding: 16px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.1); }
</style>
<div class="card">
<h2>Hello</h2>
<p>Edit me and watch the preview update.</p>
<button onclick="this.textContent = 'Clicked'">Click</button>
</div>
<script>
console.log("Scripts run too");
</script>A full document with <html>, <head> and <body> works, and so does a bare fragment — the preview wraps it in a document for you. Styles and scripts can be inline or loaded from a CDN with <link> and <script src>.
How the preview works
- The markup is written into an
<iframe>viasrcdocon every change, so the preview is a real document with its own DOM, styles and scripts. - The frame is sandboxed from the tool's own page: your CSS cannot restyle the editor and your scripts cannot reach its DOM.
- Scripts re-run on every update. Side effects such as timers restart each time you type; keep experiments small.
- Console output from the preview appears in the browser's devtools console, not in the editor.
Common uses
- Prototyping a component or a layout before building it in a framework.
- Testing an email or newsletter fragment's rendering (remembering that email clients are stricter).
- Checking a code sample from Stack Overflow or MDN actually does what it claims.
- Teaching and learning HTML and CSS with immediate visual feedback.
- Building a quick mock-up to screenshot for a bug report or a design discussion.
- Debugging a fragment copied out of a larger page in isolation.
Editor vs CodePen-style tools
| This editor | CodePen / JSFiddle / StackBlitz | |
|---|---|---|
| Setup | None | Account for saving |
| Privacy | Nothing leaves your browser | Pens are stored on their servers (private pens on paid plans) |
| Preprocessors (Sass, TypeScript, JSX) | No | Yes |
| Sharing a link | No — copy the code | Yes |
| Speed to first result | Instant | A few seconds |
Use this for quick, private experiments; move to a hosted playground when you need to save, share or use a framework.