HTML Capabilities
What works in HTML artifact previews — CSP rules, sandboxing, and supported features.
HTML artifacts are rendered inside a sandboxed <iframe> with a Content Security Policy (CSP). This keeps reviews secure while supporting the most common AI-generated HTML patterns.
What Works
| Feature | Status | Notes |
|---|---|---|
Inline <style> tags | Supported | Full CSS support |
Inline <script> tags | Supported | JavaScript executes normally |
| Inline event handlers | Supported | onclick, onload, etc. |
data: URIs | Supported | Images, fonts via data URIs |
| SVG (inline) | Supported | Including animated SVG |
| Canvas / WebGL | Supported | 2D and 3D rendering |
| CSS animations | Supported | @keyframes, transitions |
| Web fonts (inline) | Supported | Via @font-face with data URIs |
| Responsive layouts | Supported | Media queries work normally |
<form> elements | Supported | Renders but submissions are sandboxed |
| Mermaid diagrams | Supported | Via inline script |
What Doesn't Work
| Feature | Status | Reason |
|---|---|---|
External <script src> | Blocked | CSP blocks remote script sources |
External <link> stylesheets | Blocked | CSP blocks remote style sources |
| CDN-hosted libraries | Blocked | No external network requests from preview |
fetch() / XMLHttpRequest | Blocked | No outbound network from sandbox |
<iframe> inside artifact | Blocked | Nested iframes are not allowed |
localStorage / sessionStorage | Blocked | Sandboxed origin has no storage access |
| Cookies | Blocked | Sandboxed origin cannot set cookies |
Popups (window.open) | Blocked | Sandbox disallows popups |
| Top-level navigation | Blocked | Cannot navigate the parent frame |
Tips for AI-Generated HTML
Most AI tools (Claude, ChatGPT, Cursor) produce self-contained HTML that works perfectly. If your artifact doesn't render:
- Bundle everything inline — move external CSS into
<style>tags, external JS into<script>tags - Use data URIs for images — convert image URLs to
data:image/png;base64,... - Avoid CDN dependencies — Tailwind CDN, Google Fonts via
<link>, etc. won't load. Include the CSS directly - Check the console — open browser DevTools to see CSP violations
ZIP Alternative
If your project requires multiple files (separate CSS, JS, images), use a ZIP bundle instead. ZIP artifacts serve files from storage, bypassing single-file CSP restrictions on external resources.