# Save As Standalone HTML > Single self-contained file that works offline - Skill: `gabrielmoreira/save-as-standalone-html` (Agent Skill) - Install (CLI): `npx skillmds@latest add gabrielmoreira/save-as-standalone-html` - Raw SKILL.md: https://api.skillmd.com/api/skills/gabrielmoreira/save-as-standalone-html/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: gabrielmoreira (https://skillmd.com/u/gabrielmoreira) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/gabrielmoreira/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 ``/``, 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: `` - 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 (``, `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 `` tag in the ``: ```html ``` 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: ```html ``` 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 `