Launching today
Claude Artifact Player
Run your Claude AI artifacts natively, No browser. No cloud.
219 followers
Run your Claude AI artifacts natively, No browser. No cloud.
219 followers
Run your Claude AI artifacts natively on your Mac, fully offline. No browser. No cloud. Instant playback. Claude Artifact Player lets you open and run the interactive files that Claude's Artifacts feature generates — HTML pages, React JSX components, and TypeScript TSX files — directly on your Mac, without a browser and without uploading anything anywhere.
Claude Artifact Player
Claude Artifact Player lets you open and run the interactive files that Claude's Artifacts feature generates — HTML pages, React JSX components, and TypeScript TSX files — directly on your Mac, without a browser and without uploading anything anywhere.
WHAT IT DOES
Claude (Anthropic's AI) can generate standalone interactive files: data visualisations, UI prototypes, dashboards, calculators, mini-apps, and more. Claude Artifact Player is the fastest way to run those files locally.
KEY FEATURES
• Open any .html, .jsx, or .tsx artifact file in one click
• Watch a folder — the app auto-discovers artifacts as you add files and lists them in a sidebar
• Persistent folder memory — your folder is remembered across relaunches
• Fully offline — React 18 and Babel are bundled inside the app, no internet required for rendering
• Reload with ⌘R while you edit files externally
• Reveal any artifact in Finder with a right-click
PRIVACY FIRST
Claude Artifact Player never connects to the internet to render your artifacts. All JSX/TSX transpilation happens inside a sandboxed WebView on your Mac. Your files never leave your machine.
WHO IT'S FOR
• Developers and designers exploring Claude-generated UI prototypes
• Data analysts running Claude-built visualisations and dashboards
• Prompt engineers iterating on artifact outputs without copy-pasting into a browser
• Anyone who wants to keep a local library of AI-generated interactive tools
REQUIREMENTS
macOS 15 Sequoia or later.
Developed by Creative AI Studio — your partner for Generative AI.
Running artifacts locally solves a reproducibility problem that browser-sandboxed execution doesn't. We've built pipelines that generate Claude artifacts as outputs and realized testing them required the browser sandbox, adding friction. How do you handle artifact dependencies locally? Is there a containerized runtime, or does it rely on the host environment's installed packages?
Claude Artifact Player
@retain_dev
That's a good question.
In future versions, we plan to automatically containerize artifacts to provide a more reproducible and isolated execution environment. However, for V1, we're intentionally keeping the architecture as simple as possible, so artifacts are installed and executed directly on the local machine, with dependencies resolved through the host environment.
We recognize that this approach does not guarantee full reproducibility across different systems, but it significantly lowers the setup complexity and makes the first version easier to adopt and maintain.
Our current thinking is to offer two execution modes:
Simple Mode: Runs artifacts directly on the host environment and targets users who want the quickest setup experience.
Advanced Mode: Uses Docker (or another containerized runtime) to provide stronger isolation, dependency management, and reproducibility guarantees.
The goal is to balance ease of use for most users with the reproducibility and environment consistency that more advanced workflows require.
@alsarem I have a question that , how are you handling compatibility as Claude's artifact formats evolve over time , especially for more complex React or TSX based artifacts ?
Claude Artifact Player
@liam_bailey2
Hi Liam, great question!
Technically, our player runs a Node.js server that spins up a complete, isolated environment for each artifact — handling all the necessary setup and dependency installation automatically.
So even as Claude continues to evolve and generate more complex artifacts, they ultimately compile down to Node.js applications, which means there are specific requirements that need to be installed fresh each time to ensure everything runs correctly.
Hope that clears things up! Feel free to ask if you have any follow-up questions. 😊
Interesting use case. Does it handle artifacts that make API calls, or doesn't offline mode allow that?
Claude Artifact Player
@dhiraj_patel5 If the Artifact make API calls, we don't interfere with it, so normally it will works. You can see this app as a simple install + Run of NodeJs app.
If your are offline, you will still able to view the artifact but the API calls will failed.
@alsarem Got it! Thanks for clarifying.
Bundling React 18 and Babel inside a sandboxed WebView to handle JSX/TSX transpilation locally is a smart call. You skip shipping a separate runtime layer while keeping execution fully offline. I've run into the same tradeoff between isolation and dependency freshness. Do you plan to support ESM imports, or do all dependencies need to be bundled at the app level?
Claude Artifact Player
@anand_thakkar1
ESM imports may come on later version, because supporting ESM properly offline would require either intercepting and caching those remote imports or pre-bundling a wider set of common libraries.
So:
Loading first time must be online then viewing later offline will be possible.
One thing we've noticed with AI workflows is that artifacts often outlive the conversation that created them.
Do users mostly revisit artifacts for reference, or are they becoming reusable building blocks that get incorporated into future workflows?
Claude Artifact Player
@zaid_mallik1 Both patterns exist, but we're seeing the reusable building block behavior emerge more than expected. Users start by revisiting for reference, but once they have a local library of artifacts they can reload and tweak, the workflow shifts — they start treating artifacts as composable primitives rather than one-off outputs.
The folder-watching feature was partly designed with this in mind: when your artifacts live in a persistent local directory alongside your other project files, they naturally get pulled into larger workflows rather than staying siloed in a chat history.
The more interesting question for us is tooling around that second pattern — versioning, tagging, or linking related artifacts so the library stays navigable as it grows. That's on our roadmap.
Claude Artifact Player
@zaid_mallik1 But you give me an idea to be (maybe) integrated later, keeping conversation context next to the artifact.
@alsarem That's an interesting direction.
We've noticed that once artifacts become reusable, people often need the reasoning behind them just as much as the artifact itself. A prompt, design decision, or assumption that made sense six weeks ago can be surprisingly hard to reconstruct later.
Keeping the conversation context attached to the artifact could make reuse much more reliable as libraries grow.
This fixes a very specific Claude workflow problem.
Artifacts are great while they’re inside the chat, but once I want to save one, tweak it, reopen it later, or show it like a normal little app, the flow gets awkward.
The folder watching and local reload are the details I’d probably use most. It turns artifacts from “cool thing Claude made once” into something I can keep editing on my Mac.
Claude Artifact Player
@alicia_data Exactly
The local editing will be a future feature in our app ;)
@alicia_data there's a stack version of this too. the artifacts come out as react jsx, but the codebase i'm in all day is angular — so a react artifact is never something i can just open in the stack i'm already in, it's always a context switch. a player that runs the jsx as-is means i'm not bouncing out of my own setup to look at it.