HTML Renderer is a free online tool for previewing HTML and CSS in your browser. Paste a snippet or complete HTML document with inline styles or <style> blocks to see a live preview. The HTML input and preview have matching heights, and JavaScript is disabled in the sandbox.
Render HTML with inline CSS and style blocks in a live, sandboxed preview. Edit snippets or complete documents with scripts disabled.
Start here Paste an HTML snippet or complete document into HTML input; the preview updates as you type.
The preview is sandboxed and scripts are disabled for safety.
Understand the format
HTML Renderer is a free online tool for previewing HTML and CSS in your browser. Paste a snippet or complete HTML document with inline styles or <style> blocks to see a live preview. The HTML input and preview have matching heights, and JavaScript is disabled in the sandbox.
The HTML document and its CSS are placed in an iframe using the srcdoc attribute with a fully restrictive sandbox. Inline style attributes and <style> blocks are preserved. Scripts do not run, forms cannot submit, and the frame cannot access or navigate the surrounding page.
JavaScript-driven content will not run. The sandbox does not block every network request: images, stylesheets, and fonts referenced in pasted HTML or CSS may contact external servers.
The preview shows how the browser lays out HTML and CSS, including colours, spacing, typography, Flexbox, and Grid. It is useful for checking content fragments and small layouts, but the browser can repair malformed markup, so appearance alone does not validate your HTML.
The preview does not inherit your application stylesheets or run framework hydration. Referenced external assets may load if their URLs are reachable and browser policies permit them. Media queries use the preview frame width. Confirm the final appearance in your application before shipping.
Step by step
Markup is rendered locally inside a sandboxed iframe and is not uploaded to our servers. Scripts and form submissions are blocked. External assets referenced in HTML or CSS may make network requests.
Worked examples
Input
<h2>Release notes</h2><ul><li>Fixed export</li><li>New filters</li></ul>
Result
A heading followed by a two-item bulleted list
Renders the semantic structure that assistive technology will announce, before the site stylesheet changes its appearance.
Input
<style>.card { background: #eef2ff; color: #312e81; padding: 24px; border-radius: 12px; }</style><article class="card"><h2>CSS preview</h2><p style="font-weight: 700">Inline styles work too.</p></article>Result
A pale card with rounded corners, dark text, and a bold paragraph
The style block targets the card class, while the inline style makes the paragraph bold. Both are rendered inside the sandbox.
Input
<p>Hello</p><script>alert(1)</script>
Result
Only the paragraph is rendered
The sandbox blocks script execution, which is what makes it safe to preview markup from an untrusted source.
Reference
| Feature | Works here | Why |
|---|---|---|
| Semantic markup and text | Yes | Parsed and laid out by the browser as normal. |
| Inline style attributes | Yes | Applied directly to the elements. |
| Inline style blocks | Yes | CSS inside the document is honoured. |
| CSS Grid and Flexbox | Yes | Supported CSS is laid out by your browser. |
| External stylesheets | Depends | Linked CSS can load when its URL and browser policies allow it. |
| JavaScript | No | Blocked by the sandbox attribute. |
| Form submission | No | Blocked, so a snippet cannot post data anywhere. |
| External images and fonts | Depends | Remote requests may be blocked by the frame origin or by the network. |
Practical Guide
Troubleshooting
FAQ
Yes. HTML Renderer preserves inline style attributes and <style> blocks, including CSS for colours, fonts, spacing, Grid, and Flexbox. Add the CSS and the HTML it styles to the same HTML input field.
Wrap standalone CSS in <style> tags or use a style attribute. Check that selectors match your HTML and the CSS is valid. For linked stylesheets, use a reachable absolute HTTPS URL. Styles from your application are not inherited, and JavaScript-based CSS frameworks will not run.
Yes, you can include a <link rel="stylesheet" href="https://example.com/styles.css"> element. Loading depends on network access and browser policies. For a self-contained preview, copy the required CSS into a <style> block instead.
The preview uses a restrictive sandbox that blocks scripts, form submission, and access to the surrounding page. Referenced images, CSS, and fonts may still make network requests. Previewing HTML does not sanitise it for publication on another site.
By design. The sandbox attribute is applied with no allow-scripts token, which is what makes previewing untrusted markup safe.
Yes. A full document including head and body renders correctly, as do inline style blocks within it.
Remote assets may be blocked by the sandboxed frame origin or unavailable from your network. Use a data URI, or check in a real environment.
The tool renders your markup locally in your browser and does not upload it to our servers. External resources referenced by the document can make requests to their hosting servers.
Go deeper