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:

<!-- In <head>: -->
<meta name="ext-resource-dependency" content="./hero.png" data-resource-id="heroImg" />
<meta name="ext-resource-dependency" content="./pattern.svg" data-resource-id="patternBg" />

<!-- In code, replace: -->
<!-- <img src={"./hero.png"} /> -->
<!-- with: -->
<!-- <img src={window.__resources.heroImg} /> -->

IMPORTANT:

• The relative paths in content are relative to the HTML page itself
• You must also do this for any external script tags that are imported and themselves reference resources — those scripts will be inlined by the bundler, but their resource references need to be lifted too
• Be thorough! Missing even one resource means a broken image or missing asset in the final file

Step 3: Create a thumbnail (REQUIRED — the bundler will reject the file without it)

Create a lightweight SVG thumbnail that acts as a splash screen while the bundled file unpacks. This SVG should be a simplified, representative preview of the design — e.g. the key shapes, layout silhouette, or a branded loading visual. It doesn't need to be pixel-perfect, just visually representative so the user sees something meaningful instantly. It will be displayed TINY so a simple glyph on a vibrant color BG is enough.

Add it as a <template> tag in the source HTML:

<template id="__bundler_thumbnail" data-bg-color="#0a5e3e">
  <svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
    <!-- Simplified icon -->
  </svg>
</template>

• Set data-bg-color to match the page's background color
• The SVG should use viewBox for proper aspect-fit scaling
• Keep it simple — this is just a loading placeholder, not a full reproduction
• Use the design's actual colors so the transition feels seamless

The bundler will extract this and display it fullscreen (aspect-fit with the background color) while unpacking assets, then replace it with the real page. It also remains visible as the permanent fallback when JavaScript is disabled.

Step 4: Run the bundler

If you made changes in steps 1-3, save the modified HTML file first. Then (or if no changes were needed) call:

super_inline_html({ input_path: "<path-to-html>", output_path: "My Deck.html" })

Give the output file a friendly human name.

Step 5: Verify (internal check only)

Read the tool result first — if any asset couldn't be resolved, super_inline_html lists it directly in its output ("N asset(s) could not be bundled: - asset not found: ./foo.png"). That's the authoritative miss list; fix those references and re-run before opening anything.

Then open the bundled output with show_html TO CHECK IT WORKS — this is a private verification step for YOU, not the delivery mechanism. Check get_webview_logs for runtime errors (JS exceptions, failed decodes). If there are issues, fix the source file and re-run.

Step 6: Present for download — MANDATORY

You MUST deliver the final file using present_fs_item_for_download pointing directly at the inlined HTML output. This is the ONLY correct way to hand off a standalone export.

• Do NOT use show_html / show_to_user as the delivery step — those are preview tools, not download tools. The user cannot save the file from them.
• Do NOT ask whether they want to download it — just call present_fs_item_for_download.
• If you skip this step, the user has no way to get the file. This step is non-negotiable.