How to Save a Claude Artifact Locally on Your Mac

Short answer: open the artifact on claude.ai and use its download or export option (next to Copy in the artifact’s toolbar). A web page or design can be saved as a standalone HTML file that opens offline in your browser; documents export to Word, PDF or Markdown. For a Claude Code artifact, ask Claude to write the page into a folder you choose, and you keep the source file. And if it’s a dashboard you want to keep current on your Mac, save it into FavTray Artifacts, where your agent can update it in place.

TL;DR

• One-off copy: download or export from the artifact toolbar. HTML opens offline; React artifacts need a small project to run.
• Claude Code artifacts: the page starts as a local HTML or Markdown file. Say where to write it and keep it.
• A dashboard you’ll keep using: have Claude Code or Codex save it as a FavTray artifact with a sourceKey; asking again replaces it with fresh data.

How do I download a Claude artifact from claude.ai?

1. Open the conversation, or find the artifact in the Artifacts tab of your Claude sidebar.
2. Open the artifact so it fills the side panel.
3. In the artifact’s toolbar, open the menu next to Copy and choose the download or export option.
4. Pick the format. Anthropic’s help centre lists these (What are artifacts, checked 28 September 2026):
   • Documents: Word, PDF, Markdown or Google Docs.
   • Slides: PowerPoint or PDF.
   • Designs and pages: a .zip, PDF, PowerPoint or a standalone HTML file.
5. The file lands in your Downloads folder. Move it somewhere you’ll find it, such as ~/Documents/Claude.

The menus change from time to time, so if you don’t see a download option for an artifact, use the manual method below.

How do I save the code by hand?

For any artifact that shows its code:

1. Switch the artifact to its Code view and click Copy.
2. Open TextEdit, choose Format › Make Plain Text, and paste.
3. Save it with the right extension: dashboard.html for a web page, chart.svg for an SVG, notes.md for Markdown, App.jsx for a React component.

An .html or .svg file opens in Safari or Chrome with a double-click.

Can I run a Claude artifact locally, offline?

It depends on what the artifact is.

• HTML pages run as they are. Double-click the file. If the page loads a charting library or a font from a CDN, those parts need a connection the first time; ask Claude to inline them if you want the file fully offline.
• React artifacts (.jsx) are source code, not a page. Run them in a small project: in Terminal, npm create vite@latest my-artifact -- --template react, replace src/App.jsx with the artifact, install any libraries it imports, then npm run dev. Claude or Claude Code will set this up for you if you ask.
• Documents and slides open in Pages, Keynote, Word or PowerPoint once exported.

Anything that talks to Claude or to your connected apps from inside the artifact needs claude.ai to work; a saved copy keeps the page but not those calls.

Where are Claude Code artifacts saved?

A Claude Code artifact is a page that Claude Code publishes from your session to a private URL on claude.ai. Before publishing, Claude Code writes the page to an HTML or Markdown file. Unless you name a location, that file goes to a temporary folder outside your project (Claude Code docs: artifacts).

To keep it:

• Ask for a location up front: “Build the dashboard as an artifact and write the file to ~/Documents/dashboards/deploys.html.”
• Or ask afterwards: “Copy the artifact’s HTML into ./reports.”
• To find an artifact again later, run /artifacts in Claude Code, which lists everything you’ve published and lets you open or copy each link.

When Claude Code reads an artifact someone shared with you, it also saves the page’s full source to a local file.

Will a saved copy stay up to date?

No, and that’s the point of a copy: it’s a snapshot of the artifact at the moment you saved it. The artifact on claude.ai keeps its own updates and its own share link.

For most artifacts that’s exactly what you want: a report to file away, a tool to keep, a page to send. For a dashboard you check every week, a snapshot goes stale. That’s the case FavTray Artifacts is built for.

How do I keep a Claude dashboard on my Mac and up to date?

FavTray Artifacts is a local companion to Claude Code and Codex. Your agent writes the dashboard as one JSON file, and FavTray draws it natively on your Mac: stat cards, tables, ten chart kinds, timelines and checklists.

1. In FavTray, open Settings › Skills and install the FavTray Skill (part of Pro).
2. In Claude Code or Codex, give it the data behind your dashboard (or paste the artifact’s code) and say: “make this an artifact in FavTray with sourceKey ai-spend:weekly”.
3. The skill writes and validates the file and puts it in FavTray’s Import inbox. Click Import.
4. Next week, ask again with the same sourceKey. FavTray replaces the artifact in place, so you keep one current copy.

FavTray draws its own JSON format rather than HTML, so the skill rebuilds the dashboard from the data instead of converting the page. Once it’s in FavTray you can drag and resize blocks, filter with chips, hover for exact values, and use Share › Export HTML… when you want to send someone a copy. The full walkthrough is in Build a personal Mac dashboard with Claude Code, and there’s a shorter guide at Keep your Claude dashboards on your Mac.

What about browser extensions?

Several Chrome extensions save Claude artifacts in bulk, for example every code block in a conversation, each with the right file extension. They can be handy for archiving. They’re third-party tools with access to your claude.ai pages, so check what an extension can read before you install it. For single artifacts the built-in download is enough.

What does FavTray cost?

FavTray Free makes up to 2 artifacts by hand with New artifact. Pro, a one-time Lifetime license for one Mac, makes unlimited artifacts and includes the FavTray Skill and Import, which aren’t part of the 7-day trial.