HTML Preview Bundler
Paste your HTML, CSS, and JS and get one self-contained HTML file with everything inlined — ready to open or share. Runs in your browser; nothing is uploaded.
About this tool
HTML Preview Bundler stitches separate HTML, CSS, and JavaScript
into a single, self-contained .html document — everything inlined — so you can
save it, open it in any browser, or share it as one file.
- If your HTML is a full document (it contains
<html>), the CSS is injected just before</head>and the JS just before</body>. - If your HTML is a fragment (just markup, no
<html>), it's wrapped in a clean HTML5 page with a<meta charset>, a viewport tag, and the title you provide.
Everything runs locally in your browser via WebAssembly — nothing is
uploaded. Copy the result, or paste it into a .html file and open it.
Handy for
- Sharing a quick demo, snippet, or bug repro as one file.
- Turning a CodePen-style HTML/CSS/JS trio into something portable.
- Producing a single-file preview for email or chat.
Note: CSS and JS are inlined verbatim. Avoid putting a literal
</script>inside your JavaScript, as it would close the script tag early.
FAQ
Do I need to fill in all three boxes?
No — any one of HTML, CSS, or JS is enough. A CSS-only or JS-only input still produces a valid single-file page (the fragment wrapper supplies the document shell). Only when all three are empty does the tool refuse with "provide at least some HTML, CSS, or JS".
Where exactly does my CSS and JS end up in the output?
In a full document (one containing <html>), the <style> block is inserted
just before </head> (falling back to before </body>, then to the top of
the file) and the <script> goes just before </body> (or is appended). A
fragment is wrapped in an HTML5 shell — <meta charset>, a viewport tag, and
your title (default "Preview") — with the CSS in the head and the JS at
the end of the body.
Are images, fonts, or CDN scripts downloaded and inlined too?
No. Only the CSS and JS you paste are inlined — external references such as
<img src>, @font-face URLs, or <script src> CDN tags are left exactly as
written, so they will still be fetched from the network when the bundled file
is opened. For a fully offline file, inline those assets (e.g. as data URIs)
yourself first.
The bundled page renders broken — what's the usual cause?
A literal </script> sequence inside your JavaScript (even in a string) — the
code is inlined verbatim, so the browser ends the script tag right there.
Split it as "</scr" + "ipt>" or escape it as <\/script> and re-bundle.
Developer & Automation Access
Run it from the terminal
Same engine as this page, headless — via the gizza CLI:
gizza tool html-preview-bundler '<h1>Hello</h1>
<button id="b">Click</button>'New to the CLI? Get gizza →
Open it by URL
Pre-fill and auto-run this tool with query parameters — the names match the API/CLI:
https://gizza.ai/tools/html-preview-bundler/?html=%3Ch1%3EHello%3C%2Fh1%3E%0A%3Cbutton%20id%3D%22b%22%3EClick%3C%2Fbutton%3E&css=body%20%7B%20font-family%3A%20sans-serif%3B%20%7D&js=document.getElementById%28%27b%27%29.onclick%20%3D%20%28%29%20%3D%3E%20alert%28%27hi%27%29%3B&title=PreviewMachine-readable descriptor: tool.json — title + parameters JSON Schema for agents.