From Chat to Home Screen: Convert Claude Artifacts to PWAs with Zero Config

The Problem: Claude Artifacts are Stuck in the Chat

We've all been there. You prompt Claude to build a neat little todo list, a habit tracker, or a dashboard. It spits out a beautiful React/HTML artifact. You play with it, think "This is actually useful", and then... you close the tab.

It's gone.

If you do save the HTML, turning it into a proper installable mobile app is a nightmare:

• Wrestle with Webpack/Vite configs just to get a manifest.json.
• Write a Service Worker from scratch.
• Pray your localStorage doesn't get randomly wiped by the OS when the PWA updates.

I built @baaqar/artifact-to-pwa to fix all of that in one command.

The Solution: npx artifact-to-pwa

No build step. No Android Studio. No Xcode. Just point it at your file or URL.

# 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

# Customize it
npx artifact-to-pwa ./app.html --name "My Tool" --color "#ff6b6b" --out ./dist

That's it. It generates a fully production-ready PWA folder:

my-app-pwa/
├── index.html    ← Your app, PWA-ready
├── manifest.json ← Icons, colors, display mode
├── sw.js         ← Service worker (offline support)
├── icon.svg      ← Auto-generated icon
└── README.md     ← One-click deploy instructions

The Killer Feature: Persistent Storage (localStorage → IndexedDB)

Here is where this package actually shines and differs from every other "PWA wrapper" out there.

If your artifact uses localStorage (think: todo lists, streak trackers, user settings, heatmaps), the browser will eventually delete that data. Worse, when a user updates the PWA, the cache clears, and poof—their entire history is gone.

artifact-to-pwa automatically detects localStorage usage and injects a transparent IndexedDB shim behind the scenes.

• Your artifact keeps using the exact same localStorage API (no code changes needed).
• All data is actually stored in IndexedDB, which survives PWA updates and OS cleanups.
• It pre-populates an in-memory cache on load so reads stay lightning-fast.
• It briefly hides the page on startup until saved data is ready—preventing that ugly "empty state" flash.

You'll see this magic happen in your terminal:

⚡ localStorage detected → auto-migrating to IndexedDB

How to Install It on Your Phone

Once you run the command, deploying it is drag-and-drop simple:

Desktop / Android: npx serve my-app-pwa → Open URL → Click the Install icon in the address bar.
iPhone / iPad: Deploy anywhere → Open in Safari → Share → Add to Home Screen.

Why Bother with a PWA instead of an APK?

• Cross-platform: Installs on Android, iOS, Windows, macOS, and Linux simultaneously.
• Always up-to-date: Users get the latest version automatically—no app store review delays.
• Offline-first: The built-in Service Worker caches all assets.

Supported Formats

This 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 (embeds them as a full-screen iframe)

Give it a Spin

If you build with Claude, or if you just hate configuring Webpack manifests, give this a try:

👉 Check it out on GitHub

👉 Install from NPM

Drop a star ⭐ if it saves you time, and let me know what you build with it!

Made with ❤️ to keep Claude artifacts alive outside the chat.