@claritylabs/cl-sync) is a browser sync library that renders cached records while fetching updates from your server. Mutations are written to a durable outbox so they survive page reloads and can be retried automatically.
Key features
Instant hydration
Previously cached records load from IndexedDB without waiting for a server response.
Scoped persistence
Data is isolated by
appId, environment, userId, and orgId. Switching users or orgs creates a completely separate IndexedDB scope.Optimistic mutations
A
reducer applies your mutation locally before the network call. A durable outbox tracks every mutation through reloads and retries.React hooks
useSyncCollection, useSyncRecord, useSyncMutation, and useSyncStatus give you reactive, type-safe access to all sync state.Convex adapter
First-class support for Convex: subscribe to real-time queries, wrap Convex mutations, and let the adapter handle snapshot diffing.
Schema migrations
Declare versioned migrations that run during
hydrate(). Rename fields, transform records, and prune stale outbox entries safely.How scoping works
Every store is tied to a scope object:createScopeKey(scope) to derive a composite key like "todo-app:production:user-123:org-456". Records are partitioned by scope within a database named by app and environment. Create a store with the new scope when switching users or organizations. Switching scope does not delete previously stored data.
Package structure
CL Sync ships three sub-path exports so you only pay for what you import:
Peer dependencies are all optional — install only what you need:
Install
Next steps
Quickstart
Build a working todo app in five steps.
Core Concepts
Understand scopes, collections, the outbox, and optimistic updates.
Store API
Full reference for
createSyncStore and all store methods.Convex Adapter
Wire up real-time Convex queries and mutations.