Skills
.Work. You
Rest

tanstack-db

Community

Build reactive data layers with TanStack DB.

Software Engineering#schema-validation#live-queries#LocalStorage#TanStack-DB#optimistic-mutations#reactive-collections#ElectricSQL
AuthorCaiZongyuan
Version1.0.0
Installs0

System Documentation

What problem does it solve?

TanStack DB helps developers build reactive, real-time data layers by providing normalized collections, live queries, and optimistic mutations, enabling offline-first experiences and seamless data synchronization.

Core Features & Use Cases

  • Core concepts: normalized collections, live queries, optimistic mutations, and schema validation.
  • Use cases: real-time dashboards, offline-first mobile apps, cross-tab synchronization with LocalStorage.
  • Real-world example: build a todo app with real-time updates and offline support using ElectricSQL or similar sync engines.

Quick Start

Install dependencies for TanStack DB and choose a collection type (QueryCollection or ElectricCollection) based on your backend. Define a simple schema with a standard schema library (e.g., Zod) and create a collection with a suitable options factory. Engage a live query in a React component to observe real-time updates and optimistic UI behavior.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: tanstack-db
Download link: https://github.com/CaiZongyuan/Expo-TanstackDB-ElectricSQL/archive/main.zip#tanstack-db

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.