How to Save a Claude Artifact as an Image: Chat, Claude Code and Design Artifacts

To save a Claude artifact as an image, get the artifact's HTML, open it somewhere that can capture the whole page, and download the PNG. Legacy chat artifacts have copy and download controls at the top of the panel, newer ones use Share > Export > HTML, and Claude Code artifacts have no download at all, so you ask Claude Code for the file. Claude Design artifacts are the exception: each artboard has its own PNG export at 1x or 2x.

Which kind of Claude artifact do you have?

On 16 September 2026 Anthropic changed how artifacts work. Chat artifacts made before that date are now called legacy artifacts; newer ones are saved to the Artifacts tab in the sidebar, and Claude Design, Slides and Docs became artifact templates you can start in any conversation. Claude Code publishes its own kind of artifact as a link. Each kind hands over its HTML differently:

If you are not sure which you have, one request covers almost every kind. In the same conversation, ask Claude: "send me the HTML file for this artifact".

Is a screenshot good enough?

For a small artifact that fits on your screen, yes. On a Mac press Shift-Command-4 and drag around the artifact; on Windows press Windows+Shift+S. You get a PNG at your screen's resolution, ready to paste into a message or a slide.

Screenshots stop working once the artifact is taller than its panel. In Claude the artifact scrolls inside its own frame, and the browser's full-page capture tools cannot capture content that scrolls inside a frame: they capture the claude.ai page around it. You also get Claude's interface at the edges, the narrow panel layout instead of the full-width one, and whatever resolution your display happens to have. Stitching several screenshots together rarely lines up cleanly. For anything longer than one screen, get the HTML instead.

How do you save a chat artifact as a full-page PNG?

1. Open the artifact in your Claude conversation.
2. Get the HTML. Made before 16 September 2026? Use the controls at the top of the artifact panel to copy the code or download it. Made since? Use Share, then Export, then HTML. If you see neither, ask Claude: "send me the HTML file for this artifact".
3. Render it. Open the Claude Artifact to PNG tool and paste the code, or drop the .html file on the box.
4. Download. Keep the default, Full page, and save the PNG.

Renda renders the page at its natural width (1280 pixels if the page sets none) and captures it from top to bottom. Pages up to 4096 pixels tall come out at 2x, so a 1280-pixel page becomes a PNG 2560 pixels wide. Pages up to 8192 pixels tall come out at 1x, and anything taller is cut at 8192 pixels, with a note on the result page. Instagram, LinkedIn, X, YouTube thumbnail and link preview sizes are in the same menu.

The free do-it-yourself route is to open the downloaded file in Chrome and use DevTools' Capture full size screenshot. It works well for one static page; the HTML to PNG guide has the exact clicks and the limits.

How do you save a Claude Code artifact as an image?

A Claude Code artifact, the page Claude Code publishes to a claude.ai/code/artifact link, has no download button and no code view. Anthropic's documentation says the page cannot start a download itself, and the viewer blocks any download a page tries to start. So the HTML has to come from Claude Code. In the terminal or the desktop app, ask it to "save the HTML file for this artifact to my Desktop". In Claude Code on the web, ask it to "send me the HTML file for this artifact". Then render the file like any other.

The guide to downloading a Claude Code artifact covers older sessions, artifacts someone else shared with you, and pages published as Markdown. One alternative for a single chart: if claude.ai has turned on the downloads capability for your account, Claude can add a button to the page that saves the chart as a PNG.

How do you export a Claude Design artifact as a PNG?

Claude Design artifacts have a real image export. On the design canvas, open an artboard's menu and choose PNG at 1x or 2x. In a chat, Share > Export also lists PNG (image). Anthropic documents the per-artboard export in its Claude Code docs, although the Claude Design help article does not list it yet.

For one image this is the simplest route, and 2x is the setting to pick. It gets slow for a carousel or a deck, because each artboard is exported separately, and there are no platform size presets, so checking that the file is exactly 1080x1350 or 1200x627 is on you. The same menu can combine every artboard into one PDF, but not into a set of PNGs.

Why does the image look different from the artifact in Claude?

Three differences catch people out. Width: Claude shows the artifact in a narrow panel, so a responsive page shows its stacked, phone-like layout there; rendered on its own, the same page spreads out to its full desktop width. If you want the narrow look, ask Claude to give the page a fixed width, such as 800 pixels. Theme: a page that follows your device's light or dark setting can come out in the other theme. State: a capture shows the page as it first loads, so a tab, filter or slide you clicked to in Claude is back at its default.

The guide to blank or wrong artifact renders covers each of these, plus React code pasted instead of a page and charts that draw too late.

Frequently asked questions