skills.rest
shotleybuilder
shotleybuilderCOMMUNITY
Explore all skills by this author →
GitHub

ElectricSQL + TanStack DB Sync Setup

Configure real-time PostgreSQL synchronization with ElectricSQL and TanStack DB.

Updated Dec 21, 2025
Search Tags:#offline-first#sveltekit#tanstack-db#real-time sync#electricSQL#database synchronization
One-click install
npx skills add https://github.com/shotleybuilder/sertantai-legal --skill electricsql-tanstack-db-sync-setup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ElectricSQL + TanStack DB Sync Setup
Source: https://github.com/shotleybuilder/sertantai-legal/tree/main/.claude/skills/electricsql-sync-setup
Command: npx skills add https://github.com/shotleybuilder/sertantai-legal --skill electricsql-tanstack-db-sync-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/db, @tanstack/electric-db-collection, @electric-sql/client, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the complexity of setting up and maintaining real-time data synchronization between a PostgreSQL database and web browser clients using ElectricSQL and TanStack DB, preventing common pitfalls like browser crashes and sync bugs.

Core Features & Use Cases

  • Official Sync Pattern: Guides users to the correct electricCollectionOptions pattern for robust ElectricSQL integration.
  • Pitfall Avoidance: Details and provides solutions for common issues like syncing generated columns, TypeScript type constraints, and inefficient updates.
  • Use Case: A developer building an offline-first SvelteKit application needs to ensure data is synced seamlessly between the client and server. This Skill provides the exact patterns and code examples to achieve this reliably.

Quick Start

Use the ElectricSQL + TanStack DB Sync Setup skill to configure real-time data synchronization for a new resource in your SvelteKit application.

Frequently Asked Questions about ElectricSQL + TanStack DB Sync Setup

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

FAQPage Schema
How do I set up real-time data sync between PostgreSQL and SvelteKit using TanStack DB?▼

To set up real-time data sync, use the `electricCollectionOptions` pattern to connect your PostgreSQL database to SvelteKit web clients. This official integration pattern prevents common sync bugs and browser crashes.

Why does my browser crash when syncing data with ElectricSQL?▼

Your browser likely crashes during ElectricSQL sync due to inefficient updates or attempting to sync generated columns. This Skill details specific solutions for these common pitfalls and provides robust configuration patterns.

Can I build an offline-first SvelteKit application with ElectricSQL?▼

Yes, you can build an offline-first SvelteKit application using ElectricSQL and TanStack DB. This Skill provides the exact patterns to ensure data is synced seamlessly between client and server.

How do I manage sync status when using TanStack DB and ElectricSQL?▼

You manage sync status by implementing the official TanStack DB integration patterns provided by this Skill. It guides you through configuring real-time synchronization correctly to avoid sync bugs and maintain state.

What are the limitations of syncing generated columns with ElectricSQL?▼

Syncing generated columns with ElectricSQL can cause sync bugs and browser crashes. This Skill details these specific TypeScript type constraints and provides solutions to avoid inefficient updates during data synchronization.

Related Skills

Explore More Software Engineering Skills→
jankneumannjankneumann
4

bao-vault

Seeds OpenBao secrets and configures agent AppRoles from .yaml files.

Community
Intermediate
TanStackTanStack
3.9k

solid-db

Provide SolidJS bindings for TanStack DB live queries.

Official
Intermediate
pedronauckpedronauck
567

tanstack

Provide TanStack patterns for data fetching, forms, and routing in React.

Community
Advanced
oakossoakoss
14

electricsql

Synchronize PostgreSQL data with client applications via ElectricSQL Shapes.

Official
Advanced