Aperçu HTML / Code Playground
Write HTML, CSS and JavaScript in the editors below and see the result instantly in the preview pane.
How It Works
- Paste or type HTML: Enter your HTML code — full documents, fragments, templates, or email HTML — into the editor.
- See the live render: The preview panel shows exactly how the browser renders your HTML in real time.
- Iterate quickly: Edit and preview in a tight loop without switching browser tabs or saving files.
Why Use HTML Preview?
When writing HTML for templates, emails, components, or static pages, you need constant feedback on how the markup renders. Opening files in a browser and refreshing manually breaks your workflow. This HTML Preview tool renders your HTML instantly as you type, giving you a live visual preview in the same window — ideal for rapid iteration on templates, debugging layout issues, and testing HTML emails before sending.
Features
- Real-time rendering: Preview updates as you type with no delay or manual refresh.
- Full HTML support: Renders complete documents with <head>, <style>, and <body> tags, or plain HTML fragments.
- Isolated sandbox: The preview runs in a sandboxed iframe, preventing scripts from affecting the page.
- Responsive preview: Resize the preview pane to test how the HTML looks at different viewport widths.
- Error display: HTML errors are logged so you can catch broken tags and invalid markup.
Frequently Asked Questions
Can I preview HTML emails?
Yes. Paste your email HTML including inline styles and table-based layouts. The preview renders exactly as an email client would. Note that external fonts and some CSS features may behave differently in actual email clients.
Does external CSS and JavaScript work?
External stylesheets loaded via <link> tags may not load due to CORS restrictions in the sandboxed preview. JavaScript execution is limited by the sandbox. For the best results, use inline CSS. External resources from CDNs that allow cross-origin access will load normally.
Can I use this to test responsive designs?
Yes. Drag the preview panel width to simulate different screen sizes, or use the viewport presets (mobile, tablet, desktop) to test your responsive breakpoints.