Download a Claude HTML artifact and open it locally

To download a Claude HTML artifact, use its HTML export or a legacy artifact’s download control. Open the .html file in your browser and try its controls. Check dependencies before relying on it offline.

Choose the native HTML route

Use the artifact overview to identify what Claude built.

• Custom artifacts: from the title menu, choose Export, then HTML, as shown in Claude Academy’s guide.
• Claude Design: select Export in the upper right and choose standalone HTML. Design also offers a ZIP download.
• Legacy artifacts: items made in a chat before September 16, 2026, have controls at the top of the panel to view source, copy content, or download it. Use the legacy download controls for an older HTML page.

If you copy a complete HTML document, paste it into a plain-text editor and save it as workshop-seating.html. Remove Markdown code fences and check that the editor hasn’t added .txt.

Get the latest HTML from a chat’s ZIP

In desktop Chrome on claude.ai, DocMyChat’s Export → Artifacts downloads the chat’s included artifacts and files. HTML files keep their names, and unnamed HTML artifacts receive an .html extension. The archive keeps the latest version of each file, without earlier drafts.

Follow the artifacts ZIP walkthrough to collect several files. The archive is flat, with no folders: pages/demo.html becomes pages demo.html. It does not recreate a website’s directory structure.

If Claude wrote slide HTML or JSON solely to build a published deck, the archive leaves those files out. Other HTML artifacts aren’t excluded by that rule. Published Docs and decks appear as titled links, without their contents, in conversation exports.

For Claude Design output, use its native export instead of this chat-file archive.

Open the page and check what arrived

For a standalone HTML document:

1. Extract it first if it arrived in a ZIP.
2. Double-click the HTML file, or drag it into your browser.
3. Try the main action, such as calculating a result or starting a game.
4. Reload the page and repeat the action.

MDN’s local-testing guide documents these opening methods and explains when local files need a web server.

A blank page doesn’t necessarily mean the download failed. Check whether you have a complete document, whether its referenced files exist, and whether the browser reports a script error. If no file arrived, use the download troubleshooting guide.

A .jsx or .tsx file, or code with package imports, may need a build. React’s setup guide covers JSX and modules. Changing the file’s extension to .html won’t convert it. Ask Claude for a standalone HTML version if needed.

If the browser blocks local requests, follow MDN’s local-server instructions. Keep browser security enabled. A local server changes how files load, but you still need the files and services the page calls.

Check online libraries and Claude features

Look for scripts, styles, images, and fonts loaded from web addresses. JavaScript can be embedded in HTML or loaded from an external script URL. A library fetched from a CDN needs internet access when the browser loads it. A cached copy can make an offline check misleading.

Ask Claude: “Create a standalone HTML version with embedded CSS and JavaScript. List any remaining external resources and explain which features need a server.” Test the exported file, including its buttons and outputs, with the internet connection off.

In a custom artifact’s exported HTML, Anthropic says the functions for saving entries, calling Claude, and using connected tools stop working. A tracker’s layout can survive while its save function does not. If a Design or legacy file offers storage, save an entry and reopen the file before relying on that storage.

If those features matter, keep the hosted artifact or build a separate app with the services it needs. A new hosting address alone doesn’t supply them.

Example: a workshop seating calculator

Suppose you built a workshop seating calculator. Enter 12 tables with 8 seats each: the result should be 96. Change the table count to 10 and expect 80.

Save the HTML and repeat those inputs outside Claude. Reload it, try an empty input, and repeat with the internet connection off. If the calculator only needs local arithmetic, ask Claude to remove unnecessary remote libraries.

If you added “save this layout for the team” and “ask Claude for an arrangement,” test those separately from the arithmetic. For a custom artifact export, keep its hosted link for those features, or build replacements in a separate app.

Share the artifact when people need the hosted version

As of November 2026, Anthropic’s sharing guide distinguishes current and legacy artifacts:

• Current artifacts use Share. Pro, Max, and Ultra offer Anyone with the link. Team and Enterprise stay inside the organization unless an owner enables outside access. Recipients need a Claude account.
• Legacy chat artifacts use Publish on Free, Pro, Max, and Ultra. Their public links can be viewed without an account, but Claude-powered features require sign-in.
• Legacy Team and Enterprise artifacts use Share & copy link. Review the originating chat’s attachments and files, which viewers also gain access to.

Artifacts using Claude or connected apps cannot use Anyone with the link under the current sharing rules. Choose the available audience before promising someone access.

Put a working page on the web

A static host can serve your HTML, CSS, and JavaScript. GitHub Pages is one example. Use your existing hosting service if it supports those files.

Upload the page with its required assets and preserve their paths. For GitHub Pages, the entry-file guide explains where index.html belongs. Open the resulting address and repeat your checks.

For a larger app, keep the source and build instructions with the files. The developer handoff guide covers saving that discussion alongside the code.

Questions