DEV Community: Baaqar Naqi

Shipping Software Is Harder Than Building It

Baaqar Naqi — Sun, 02 Aug 2026 09:01:27 +0000

When I published v2.0.0, I thought the hard part was over.

The CLI could turn Claude artifacts into native Windows applications in a single command. It worked on my machine, the demos looked great, and I was excited to share it.

Then people started using it.

That's when I realized the difference between building software and shipping software.

The bugs only users can find

Most of the problems weren't visible in a five-minute demo.

Some applications worked perfectly.

Others silently lost all of their data after being closed.

Some builds succeeded exactly once.

The second build failed unless the runtime cache was manually deleted.

Everything looked correct...

until someone actually tried using it.

The rabbit hole

What I thought would be a quick patch became a deep dive into things I'd never touched before.

Over the course of v3 I ended up learning far more than I expected:

Git branching and release workflows
Semantic versioning
GitHub Actions
npm packaging
npm pack
Runtime integrity verification
SHA-256 checksums
Neutralino runtime management
JavaScript debugging
Integration testing

None of those were part of the original project idea.

Persistent storage finally works

This was the biggest challenge.

Artifacts using localStorage behaved differently depending on where they were running.

Inside Claude everything worked.

Inside the generated desktop application...

not always.

Tracking this down took far longer than writing the original feature.

The result is that applications now persist their data correctly across launches without requiring any code changes.

If your artifact uses localStorage, it should simply work.

Runtime improvements

The runtime layer also received a major overhaul.

Version 3 now handles:

automatic runtime downloads
integrity verification
cache recovery
consecutive builds without manual cleanup

Those aren't exciting features to demo, but they're exactly the kinds of improvements that make a tool feel dependable.

Better testing

I also spent a lot more time writing tests than writing features.

The project now covers:

React artifacts
HTML artifacts
Tailwind
CSS imports
image imports
unsupported imports
rebuilds
persistent storage

That gave me much more confidence when fixing bugs, because every change could be verified instead of hoped for.

AI didn't replace engineering

This project started because of AI.

Ironically, the hardest parts had very little to do with generating code.

The difficult work was understanding why something behaved differently after packaging, reproducing bugs, reading logs, and validating fixes.

AI made me faster.

It didn't remove the need to understand the system.

Looking ahead

Version 3 isn't the biggest release in terms of new features.

It's the release that made me comfortable recommending the project to other people.

Sometimes the most valuable release isn't the one that adds the most.

It's the one that makes everything you already built reliable.

If you've been following the project since v1 or v2, thank you for trying it, reporting bugs, and helping shape this release.

You can find the project here:

GitHub: https://github.com/Baaqar-007/artifact-to-pwa
npm: https://www.npmjs.com/package/@baaqar/artifact-to-pwa

I started this project thinking AI would let me build software without learning the messy parts. Instead, it pushed me straight into them. Somewhere between broken CI pipelines, checksum mismatches, runtime bugs, and release engineering, I realized I'd accidentally learned more about shipping software than I ever planned to.

Turn Claude Artifacts into Native Desktop Apps (Zero Config)

Baaqar Naqi — Wed, 29 Jul 2026 13:31:45 +0000

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

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!

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

Shipping Software Is Harder Than Building It

The bugs only users can find

The rabbit hole

Persistent storage finally works

Runtime improvements

Better testing

AI didn't replace engineering

Looking ahead

Turn Claude Artifacts into Native Desktop Apps (Zero Config)

The Evolution: From PWA to Native Desktop

The Solution: One Command to Native

The Killer Feature: Persistent Storage Still Reigns Supreme

Why a Native Architecture?

Supported Formats

Take v2.0.0 for a Spin

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

The Problem: Claude Artifacts are Stuck in the Chat

The Solution: npx artifact-to-pwa

The Killer Feature: Persistent Storage (localStorage → IndexedDB)

How to Install It on Your Phone

Why Bother with a PWA instead of an APK?

Supported Formats

Give it a Spin

The Solution: `npx artifact-to-pwa`