Building Local-First Web Apps in 2026: CRDTs and IndexedDB

The architecture of web applications is undergoing a massive shift. Instead of relying solely on a constant connection to a cloud database, developers are increasingly moving towards local-first architectures. By leveraging CRDTs (Conflict-free Replicated Data Types) and in-browser databases like IndexedDB, we can build applications that work seamlessly offline and instantly sync when a connection is restored.

What is a Local-First Architecture?

A local-first application prioritizes the local device as the primary source of truth. Read and write operations occur instantly against a local database (like IndexedDB). The synchronization with the cloud or other peers happens asynchronously in the background.

Benefits include:

• Zero Latency: Interactions happen instantly without network roundtrips.
• Offline Reliability: Users can continue working on trains, airplanes, or areas with poor coverage.
• Data Ownership: Users have a copy of their own data by default.

IndexedDB: The Local Foundation

To build a local-first app, you need a robust way to store data in the browser. While localStorage is simple, it is synchronous and limited in size. IndexedDB is the standard for robust, asynchronous, and scalable client-side storage.

In modern development, we rarely use raw IndexedDB. Instead, we use wrappers like RxDB, Dexie, or LocalForage to provide a cleaner developer experience, reactive queries, and better TypeScript support.

Solving the Sync Problem with CRDTs

When multiple users (or one user on multiple devices) edit local data while offline, conflicts are inevitable. How do you merge changes when the devices come back online?

This is where CRDTs (Conflict-free Replicated Data Types) shine.

CRDTs are mathematical data structures designed to be replicated across multiple computers in a network, where replicas can be updated independently and concurrently without coordination. When replicas communicate, they automatically resolve conflicts and converge to the same state.

Popular libraries for CRDTs in JavaScript include:

• Yjs: Highly optimized for text, rich-text, and JSON structures. Excellent for collaborative editors.
• Automerge: A JSON-like data structure that tracks changes and resolves conflicts automatically.

Putting it Together: A 2026 Tech Stack

To build a local-first React application today, you might combine:

1. State Management: Yjs or Automerge for managing shared state.
2. Local Storage: IndexedDB (via a wrapper) to persist the CRDT document locally.
3. Synchronization: A WebSocket or WebRTC provider that syncs the CRDT updates between clients and a lightweight coordination server.
4. UI Framework: React with hooks that bind directly to the CRDT data structures.

// Example using Yjs and IndexedDB
import * as Y from 'yjs';
import { IndexeddbPersistence } from 'y-indexeddb';
import { WebsocketProvider } from 'y-websocket';

// 1. Create a Yjs document
const ydoc = new Y.Doc();

// 2. Persist the document locally to IndexedDB
const persistence = new IndexeddbPersistence('my-app-state', ydoc);

// 3. Sync with a remote server when online
const provider = new WebsocketProvider(
  'wss://sync.my-app.com',
  'my-room',
  ydoc
);

// 4. Access and modify shared data
const sharedMap = ydoc.getMap('config');
sharedMap.set('theme', 'dark'); // Changes save locally instantly and sync automatically

Conclusion

Local-first is not just a feature; it's a paradigm shift in how we think about web applications. By combining the local persistence of IndexedDB with the conflict-resolution magic of CRDTs, you can deliver an unparalleled user experience that is fast, resilient, and collaborative by default.