How to Download a Claude Artifact (and What You Actually Get)

Claude built you something in the artifact panel — a dashboard, a quiz, a formatted report — and now you want it out of the chat. There's a download control right there, so this should take five seconds.

It usually does. The part that catches people out is the second step: you double-click the downloaded file and either it opens perfectly, or your computer shrugs at it. Which one you get depends entirely on what kind of artifact Claude made, and that's not something the download button tells you.

Downloading it

Open the artifact in its panel and look at the controls in its top-right corner. Depending on your Claude version you'll see a download icon, a copy icon, and an overflow menu holding the rest. Download saves the artifact's source to your machine; Copy puts the same source on your clipboard.

That's the whole mechanic. The interesting question is what landed in your Downloads folder.

What you actually get, by artifact type

An HTML artifact → a .html file that just works. If Claude produced a single self-contained page — markup, <style>, <script>, all in one document — the download opens in any browser by double-clicking. Buttons work, charts render, the lot. This is the happy case and it's the most common one for anything Claude describes as a "webpage", "dashboard", or "interactive" anything.

A Markdown artifact → a .md file. Plain text with # and * in it. It opens in a text editor, not as a formatted document. To see it rendered you need something that understands Markdown — a code editor with preview, a note app, or a Markdown viewer.

An SVG artifact → an .svg file. Opens in a browser and in design tools. Straightforward.

A React artifact → a .tsx or .jsx file that will not open. This is the one that surprises people. React artifacts render beautifully inside Claude, because Claude's panel is running a build step for you — resolving import statements, compiling JSX into JavaScript the browser understands, supplying React itself. The file you downloaded has none of that. It's source code for a build system you don't have. Double-clicking it opens a text editor showing import React from 'react', and nothing else happens.

That's not a bug and nothing is corrupted. It's just that "download" gave you the ingredient, not the meal.

If you got a React file and wanted a webpage

You have two honest options.

Ask Claude to rebuild it as one HTML file. This is the fastest fix by a wide margin. Say: "Rewrite this as a single self-contained HTML file with no build step — inline the CSS and JavaScript, and load React from a CDN if you need it." Claude will hand back an artifact you can download and open directly. You lose nothing visually; you're just asking it to do the bundling that its own panel was doing invisibly.

Or set up a project locally. npm create vite, drop the component in, install dependencies, run the dev server. That is the correct move if you're going to keep developing it, and complete overkill if you just wanted to show someone a chart.

If what you wanted was a link, not a file

Downloading is the right verb when the file is the destination — you're archiving it, committing it to a repo, opening it offline. It's the wrong verb surprisingly often, because what people usually want is to show someone, and a file on your laptop can't be shown to anyone. You end up emailing an attachment that lands in spam, or that opens as raw code on your recipient's phone.

If the goal is "let someone else open this", skip the download and put the artifact on a URL:

1. Hit Copy on the artifact instead of Download.
2. Paste it into dochost.
3. Send the link.

The result is a real page at a real address. JavaScript runs, so the calculator still calculates and the chart still draws. It opens on a phone. It doesn't expire out of someone's inbox.

Claude also has its own Publish button, which does something similar on a Claude-hosted link — worth knowing about, with one significant catch around unpublishing. Both routes are compared in how to publish a Claude artifact.

The awkward middle case: you want a PDF

Neither download nor publish gives you a PDF, and there's no export-to-PDF button. The reliable route runs through a real page rather than through the chat window — printing from inside Claude prints the conversation, not the artifact. That's its own walkthrough: turning a Claude artifact into a PDF.

Quick reference

Bottom line: the download button always works; whether the file works depends on the artifact. HTML, SVG and Markdown come out usable. React comes out as source, and the one-line fix is asking Claude for a single self-contained HTML file instead. And if the real goal was showing the thing to someone, pasting it onto a link beats sending a file every time.