Free tool

HTML inliner.

Drop a folder — the .html and its CSS, scripts, images and fonts — and get one self-contained file back. Nothing to zip, nothing left behind: it renders the same in an inbox, a chat thread or a browser on the other side of the world.

Why a page breaks when you send it

Almost nothing writes a truly single-file page. A test runner, a notebook export, a static-site build or a coding agent writes index.html and then a css/ folder, a js/ folder and an img/ folder, and links them together with relative paths. Open it locally and it is perfect. Attach only the .html and the recipient gets the bare markup: system font, no layout, a broken-image icon where every chart used to be.

Inlining fixes it at the source. Each stylesheet is copied into a <style> block, each script into its <script> tag, and each image or font into a data: URI — with paths inside CSS resolved relative to the stylesheet, not the page, which is where hand-rolled scripts usually go wrong. The browser does not care that everything is in one file; the person you send it to will not notice anything except that it works.

What gets inlined

• Stylesheets — <link rel="stylesheet"> becomes <style> (its media kept), with @import chains flattened and every url() embedded.
• Scripts — local <script src> becomes inline code; defer/async scripts move to the end of <body> so they still run after parsing.
• Images and media — src, every srcset candidate, poster, favicons, SVG <image> and <use> (fragment kept), and background images in style attributes.
• Left alone — https:// and protocol-relative CDN URLs, anchors, mailto:, and anything already a data: URI.

Questions

How do I combine HTML, CSS and JavaScript into one file?

Drop the whole folder onto this page — the .html plus its css/, js/ and images/ folders. Every <link rel=stylesheet> becomes a <style> block, every local <script src> becomes an inline script, and every image, font and icon becomes a data URI. Download the result and it renders anywhere, with nothing else next to it.

Why does my HTML file lose its CSS and images when I send it?

Because the styles and pictures were never in it. The .html points at ./style.css and ./img/chart.png by relative path; on your machine those files sit next to it, so it looks right. Attach just the .html to an email or Slack message and every one of those paths resolves to nothing. Inlining puts the bytes inside the document, so there is nothing left to lose.

Does it inline images referenced from CSS, and fonts?

Yes. Stylesheets are rewritten relative to their own location, so url(../fonts/inter.woff2) inside css/site.css resolves the way the browser would resolve it. @import chains are followed and flattened, srcset candidates are each inlined, and inline style attributes and <style> blocks get the same treatment.

What about CDN links like Google Fonts or jsDelivr?

Those are left exactly as they are and listed under “Left as links”. They already work for anyone with an internet connection, and fetching them from this page would be blocked by CORS on most hosts anyway. If the file must work offline, download those assets into the folder first and point the HTML at the local copies.

Will my JavaScript still work after inlining?

Classic scripts, yes — they are inlined in place, and scripts that were defer or async are moved to the end of <body> so they still run after the page is parsed. ES modules that import other local modules are the exception: an inlined module resolves its imports against the page URL, so bundle them into one file first (Vite and esbuild both do this) or ship the folder as a hosted site instead.

How big will the single file be?

Roughly the sum of the parts, with images and fonts about a third larger because Base64 turns three bytes into four characters. That is a fine trade for a report with a few charts and an icon font; for a folder full of photographs, publishing the folder with its assets keeps the page fast.

Is anything uploaded?

No. Files are read in your browser with FileReader and the new document is built in this tab. It only leaves your machine if you click “Get a shareable link” and publish it as a report.

Related: Image to Base64 · HTML viewer · HTML to PDF · HTML formatter · all free tools · fix a report with broken CSS · share an HTML folder