How to convert a Claude artifact to PNG (free, no screenshots)

Q: Does this work for ChatGPT canvases or Gemini output?

Yes — paste any HTML, React, SVG or Mermaid source, whichever AI wrote it.

Claude's artifacts — the slides, infographics, charts and quote cards it builds in the side panel — look fantastic inside Claude. Getting a Claude artifact out as a clean PNG is the annoying part: screenshots capture at your screen's resolution, ignore aspect ratios, and pick up scrollbars and cropped edges. Here's the fast way.

Convert a Claude artifact to PNG in 3 steps

Copy the artifact's code. In Claude, open the artifact panel and copy its code — or simply ask Claude: "give me this artifact as a single-file HTML." HTML, SVG and Mermaid copy as-is; for React artifacts, copy the component source — ArtifactShot renders JSX/TSX directly.
Paste it into ArtifactShot. The type is detected automatically and your artifact renders instantly in a sandboxed preview — exactly as it looked in Claude, at real target dimensions.
Pick a size and download. Choose a preset — 1080×1080 for a square post, 1080×1350 for an Instagram portrait, 1920×1080 for X or YouTube — and click Download PNG. The content reflows live to the dimensions you choose, so nothing is cropped or stretched.

That's the whole workflow. No screenshot, no cropping, no design tool.

Convert an artifact now — free, no login →

Why not just screenshot the artifact?

A screenshot is a photo of your monitor. It ships at whatever resolution your window happened to be — on a typical laptop that's roughly 900 pixels of usable height, well under Instagram's 1350 — so the platform upscales it and it turns soft. It also can't change aspect ratio: you crop in an editor and lose edges. Converting the artifact's actual code re-renders it at the target size: text stays vector-sharp until the final pixel, and the layout adapts to the frame instead of being cut to fit it.

What kinds of artifacts convert?

Every visual type Claude generates: HTML pages, React components (JSX/TSX, rendered directly — no build step), inline SVG, Mermaid diagrams, Tailwind-styled snippets, and code snippets (rendered as styled code cards). Slides, charts, timelines, infographics, quote cards — if it renders in a browser, it converts. Multi-slide artifacts are detected automatically so you can export each slide as its own image. Documents/Markdown aren't supported — ask Claude for an HTML version instead.

The tricky ones: fonts, charts and animations

Web fonts (Google Fonts): browsers restrict font embedding during capture. ArtifactShot waits for fonts to load and inlines them; when a font can't be embedded, it tells you — and a Pro cloud render reproduces it perfectly.
Tailwind CDN artifacts render unstyled in naive converters. Claude loves cdn.tailwindcss.com, which generates its stylesheet at runtime — capture too early and you get naked HTML. ArtifactShot waits for the generated styles before capturing.
Charts drawn on <canvas> (Chart.js and similar): supported. If a chart uses cross-origin images and gets blocked by the browser, you see a clear warning instead of a silently blank export.
Animated artifacts: the preview is live — let the animation reach the frame you want, and capture with animations frozen, so two exports of the same moment are pixel-identical.
Viewport units lie. An artifact using 100vh sizes itself to whatever window it's in. Rendering inside a real 1080×1350 viewport is the only correct fix — scaling a small capture up is not.

Tip: if your React artifact imports niche libraries, ask Claude for "a single-file HTML version of this artifact" — that variant converts perfectly every time.

Claude artifact to PNG — quick FAQ

Is this free? Yes — unlimited browser-based conversions with a small watermark, sized up to 1080px. Pro ($4/mo) removes the watermark and adds every preset, full resolution up to 4× and cloud rendering.

Is my artifact uploaded anywhere? No. Free conversions happen entirely in your browser inside a locked-down sandbox. Your code is never stored on our servers.

Can I get JPG or WebP instead of PNG? Yes, on Pro — along with transparent PNGs.

Does this work for ChatGPT canvases or Gemini output? Yes — paste any HTML. See the ChatGPT canvas guide.

What's the maximum resolution? Up to 4× the preset size on Pro (e.g. 4320×5400 from a 1080×1350 preset), capped at 4096px per side. Free exports are sized up to 1080px.

Ready? Paste your artifact →