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

Baaqar Naqi — Tue, 23 Jun 2026 11:58:23 +0000

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:

Host	Command / Action
Netlify	Drag the folder to netlify.com/drop
Vercel	`npx vercel my-app-pwa`
GitHub Pages	Push folder contents, enable Pages in settings

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.

DEV Community: Baaqar Naqi