Save as standalone HTML

Save as standalone HTML

Export the current design as a single self-contained HTML file that works completely offline — no external dependencies.

How it works

There is a deterministic bundler (super_inline_html tool) that can inline resources referenced directly in HTML attributes — img src/srcset, source src/srcset, video/audio/track src, video poster, SVG <image href>/<use href>, link href (stylesheets, favicons), script src, CSS url() and @import, inline style attributes. However, it CANNOT discover resources that are only referenced as strings in JavaScript or JSX code — for example:

• An image src set in React: <img src={"./hero.png"} />
• A background URL in a styled-component: background: url('./pattern.svg')
• A dynamically imported script

Your job is to prepare the HTML file so the bundler can capture everything, then run it.

Step 1: Make a copy of the HTML file and update code-referenced resources

Copy the current HTML file. Read it. Copy its dependencies. Look through ALL the code (inline scripts, imported JSX files, styled-components, etc) for any resource URL that is referenced as a string in code rather than as an HTML attribute. This includes:

• Image URLs in React/JSX (<img src={...} />, style={{ backgroundImage: ... }})
• URLs in CSS-in-JS (styled-components, inline styles set via JS)
• Script tags that import other scripts which themselves reference resources
• Any fetch() or XMLHttpRequest calls that load assets
• Audio/video sources set programmatically

Note: if you use the Anthropic API in the project, it will not work standalone. If this is core to the project, STOP and tell the user!

Step 2: Add ext-resource-dependency meta tags

For EACH resource found in step 1, add a <meta> tag in the <head>:

<meta name="ext-resource-dependency" content="<url>" data-resource-id="<id>" />

Where:

• content is the URL of the resource (relative to the HTML file, or absolute)
• data-resource-id is a short, unique identifier (e.g. "heroImage", "patternSvg")

Then update the code to reference window.__resources[id] instead of the hardcoded URL. At runtime in the bundled file, window.__resources[id] will contain a blob URL pointing to the inlined resource data.

Example: