TinyBase — Reactive Data Store and Sync Engine

Introduction

TinyBase is a reactive client-side data store that organizes data into tables, rows, and cells with built-in indexing, relationships, and queries. It also provides a sync engine for real-time collaboration across browser tabs, web workers, and remote servers.

What TinyBase Does

• Stores structured data in tables with typed cells and reactive listeners
• Creates indexes, relationships, and computed queries over stored data
• Synchronizes state across browser tabs, workers, CRDT merges, and remote servers
• Provides React bindings with hooks for every store, table, row, and cell
• Persists data to localStorage, IndexedDB, SQLite, or custom backends

Architecture Overview

TinyBase models data as a hierarchical store of tables, rows, and cells. Each mutation fires granular listeners at the cell, row, table, or store level, enabling fine-grained React re-renders. The Indexes, Relationships, and Queries modules layer SQL-like operations on top of this store. The MergeableStore variant uses CRDTs for conflict-free multi-device sync, and Persisters handle reading from and writing to storage backends.

Self-Hosting & Configuration

• Install via npm: npm install tinybase
• Create a store with createStore() and set data with setCell or setRow
• Add React bindings via tinybase/ui-react hooks like useCell and useTable
• Configure persistence with a Persister for localStorage, IndexedDB, or SQLite
• Enable sync by creating a MergeableStore and connecting a Synchronizer

Key Features

• Granular reactive listeners at cell, row, table, and store levels
• Built-in indexes for fast lookups and relationships between tables
• CRDT-based MergeableStore for conflict-free real-time sync
• Multiple Persister backends: localStorage, IndexedDB, SQLite, custom
• Tiny core at under 5 KB gzipped with tree-shakable modules

Comparison with Similar Tools

• Zustand — global state management without structure; TinyBase adds tables, indexes, and sync
• Jotai — atomic state primitives; TinyBase provides relational structure and persistence
• RxDB — reactive database with replication; TinyBase is smaller and simpler to set up
• Replicache — sync framework for offline-first apps; TinyBase is self-contained with built-in CRDTs
• Dexie.js — IndexedDB wrapper; TinyBase adds reactivity, relationships, and sync on top of storage

FAQ

Q: Is TinyBase a database? A: It is a reactive data store, not a traditional database. It can persist to databases like SQLite but runs in-memory in the client.

Q: Can it sync between devices? A: Yes. The MergeableStore uses CRDTs for conflict-free sync, and Synchronizers connect to WebSocket or PartyKit servers.

Q: Does it work with React? A: Yes. The tinybase/ui-react module provides hooks for every level of the store hierarchy.

Q: How large is the bundle? A: The core store is under 5 KB gzipped. Additional modules (queries, sync, persisters) are tree-shakable.

Sources

• https://github.com/tinyplex/tinybase
• https://tinybase.org