DEV Community

Cover image for Turn Claude Artifacts into Native Desktop Apps (Zero Config)
Baaqar Naqi
Baaqar Naqi

Posted on

Turn Claude Artifacts into Native Desktop Apps (Zero Config)

#claude #cli #javascript #react

The Evolution: From PWA to Native Desktop

When I first launched @baaqar/artifact-to-pwa, the goal was simple: stop Claude artifacts from dying inside the chat window. We solved that by turning your raw HTML and React generations into installable PWAs with persistent storage in one command.

But as the artifacts got more complex, a browser tab just wasn't enough. You don't always want your standalone tools buried next to your 45 open Wikipedia tabs. Sometimes, you want a real app in your dock.

Welcome to version 2.0.0.

We have completely shifted the underlying architecture. artifact-to-pwa now generates native desktop applications.

(And yes, we kept the artifact-to-pwa name for legacy compatibility, but it does so much more now!)

The Solution: One Command to Native

No Electron boilerplate. No Xcode configurations. No wrestling with native build tools. Just point the CLI at your file or URL, and get a desktop application.

# Upgrade to 2.0.0
npm install -g @baaqar/artifact-to-pwa

# From a local React/HTML file
npx artifact-to-pwa ./my-app.jsx

# From a published Claude artifact URL
npx artifact-to-pwa https://claude.site/artifacts/abc123
Enter fullscreen mode Exit fullscreen mode

That's it. Instead of just a web directory, you now get an architecture ready to run natively on your machine window.

The Killer Feature: Persistent Storage Still Reigns Supreme

The biggest headache of turning web snippets into apps is data loss. Just like in v1.x, if your artifact uses localStorage (like a habit tracker, local dashboard, or settings page), v2.0.0 protects your data.

It automatically detects localStorage usage and seamlessly wires it up so that your data persists across app closures and system restarts.

  • Zero code changes needed in your Claude artifact.
  • Data survives safely outside the volatile browser cache.
  • Reads stay lightning-fast.

Why a Native Architecture?

  • Dedicated Windows: Your tool gets its own window, its own icon in the dock/taskbar, and its own lifecycle.
  • OS Integration: It feels like a real part of your workflow, not just another website.
  • Legacy PWA Support: We didn't break the old stuff. The tool still honors the original vision while giving you the horsepower of a desktop build.

Supported Formats

Just like before, the tool is smart enough to detect exactly what you throw at it:

  • Full HTML documents (<!DOCTYPE html>)
  • HTML fragments (partial markup)
  • React / JSX (uses Babel standalone + CDN React—no bundler needed)
  • Public URLs

Take v2.0.0 for a Spin

If you build with Claude and want your tools to live natively on your OS, give the new architecture a try.

👉 Check it out on GitHub

👉 Install from NPM

Drop a star ⭐ if it saves you time, and let me know what desktop apps you are generating!

Top comments (0)