Local-First State Synchronization Engine for React & Vue

Local-First State Synchronization Engine for React & Vue

Write instantly. Persist automatically. Sync eventually.

---

What is Syncraft Labs?

Syncraft Labs is a local-first state management engine that gives your app instant writes, offline persistence, and background synchronization — all with a simple hook/composable API.

Your users get zero-latency updates that survive page refreshes, network outages, and app restarts. When connectivity returns, pending changes sync automatically in the background.

Why Syncraft Labs?

Building modern web applications usually involves a lot of boilerplate for fetching, caching, mutating, and handling offline scenarios. Developers often have to string together a global state manager (like Redux or Pinia), an async state manager (like React Query or SWR), and local storage manually.

Syncraft Labs replaces all of that with a single abstraction.

Here is what you get out of the box:

• Snappy UI, Always: We use an Optimistic Update with Rollback pattern. The UI updates instantly via in-memory state. No waiting for the network. No loading spinners for mutations.
• Offline Reliability: Data is persisted directly into the browser’s IndexedDB. If the user goes offline, or drops their connection on a train, they can keep using your app seamlessly.
• Eventual Consistency: Mutations are queued locally as “patches” and sent to your backend gracefully when the connection is restored via an exponential backoff strategy.
• Multi-Tab Safety: If your user has 5 tabs open, editing data in one tab instantly propagates to all other tabs via BroadcastChannel APIs without extra server roundtrips.

Features

Feature	Description
Instant writes	Optimistic updates via proxy drafts — UI never waits for persistence
IndexedDB persistence	State survives page refresh, tab close, and browser restart
Outbox sync	Mutations queued as patches, drained by a background pusher
Auto-hydration	Seamless cold-start from IndexedDB with loading states
Offline-ready	Works offline, syncs automatically when back online
Auto-rollback	Reverts optimistic updates if IndexedDB write fails
Cross-Tab Sync	State automatically synchronizes across browser tabs
SSR-Ready (Next.js/Nuxt)	Provider & Plugin patterns guarantee isolated state per request
Proxy drafts	Mutate state like plain JS objects — captured immutably under the hood
Tiny footprint	Zero heavy third-party dependencies, fully tree-shakeable

Navigation

• Getting Started — Installation instructions and quick start code snippets for React and Vue.
• Core Concepts — Learn about the mental model, data flow, and architecture of Syncraft Labs.
• API Reference — Detailed API documentation for @syncraft-labs/core, @syncraft-labs/react, and @syncraft-labs/vue.
• Production Guides — Pre-deployment checklists, SSR patterns, and multi-store architecture.