jotai

Create IndexedDB-backed Jotai atoms with Zod validation and cross-tab sync.

1|Updated Apr 26, 2026

Search Tags:#react #zod #persistence #idb #jotai #atom

Ready to run

npx skills add https://github.com/matthewharwood/dean-stack --skill jotai-matthewharwood

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: jotai
Source: https://github.com/matthewharwood/dean-stack/tree/main/.claude/skills/jotai
Command: npx skills add https://github.com/matthewharwood/dean-stack --skill jotai-matthewharwood

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a robust pattern for authoring Jotai atoms that persist to IndexedDB and hydrate synchronously, enabling reliable cross-tab state.

Core Features & Use Cases

AtomWithIDB factory for persistent, validated state via Zod schemas.
Root Suspense + idbHydration guarantees synchronous initial reads after hydration.
Derived and parameterized atoms support complex state shapes without wrapping in atomFamily.
Cross-tab synchronization via BroadcastChannel ensures updates propagate across windows.

Quick Start

Define a persisted atom using atomWithIDB and import it in your components to read and update state across tabs.

Frequently Asked Questions about jotai

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I persist React state to IndexedDB with Jotai?▼

To persist React state to IndexedDB with Jotai, use an atomWithIDB factory that debounces writes and enforces Zod schema validation. It relies on a root idbHydrationPromise suspense to guarantee synchronous initial reads after hydration.

How does cross-tab synchronization work for persistent React atoms?▼

Cross-tab synchronization for persistent React atoms works via a BroadcastChannel that broadcasts changes across multiple windows. This ensures updates propagate instantly across all open tabs sharing the same IDB-backed state.

Can I use Zod schema validation with Jotai atoms for IndexedDB writes?▼

Yes, you can enforce Zod schema validation on writes when using the atomWithIDB factory for Jotai atoms. This ensures only validated data is persisted to IndexedDB, preventing invalid state shapes from being saved.

What is the best way to hydrate Jotai atoms synchronously from IndexedDB?▼

The best way to hydrate Jotai atoms synchronously from IndexedDB is using a root idbHydrationPromise wrapped in Suspense. This guarantees components only read persisted state after hydration completes, avoiding flash of empty data.

Do derived and parameterized Jotai atoms work with IndexedDB persistence?▼

Yes, derived and parameterized Jotai atoms work with IndexedDB persistence without needing to wrap them in atomFamily. This supports complex state shapes directly across React components and multiple tabs.

When should I avoid debounced writes for persistent React state?▼

You should avoid debounced writes for persistent React state when immediate persistence is critical, such as saving player progress between rapid actions. The debounced write mechanism batches updates, which may lose final state if a tab closes mid-debounce.