Local-First Software in 2026: CRDTs with Yjs and Automerge for Offline-First Apps

// First Local-First example with Yjs in 2026
import * as Y from 'yjs';
import { WebsocketProvider } from 'y-websocket';

// Shared state across users and devices
const ydoc = new Y.Doc();

// Shared map (auto-synced)
const ymap = ydoc.getMap('tasks');
ymap.set('todo-1', { title: 'Learn CRDTs', done: false });

// Sync server (optional, just relays, not source of truth)
const provider = new WebsocketProvider(
  'wss://sync.example.com',
  'room-1',
  ydoc
);

// Each client can edit offline and syncs when reconnected
ymap.set('todo-1', { title: 'Learn CRDTs', done: true });
// Yjs merges automatically without losing changes

// Yjs — Operations CRDTs (YATA)
// Benchmark: 1M operations / second on M3
const ydoc = new Y.Doc();
const ytext = ydoc.getText('content');

// Two users edit the same text offline
// User A: inserts "Hello " at position 0
ytext.insert(0, 'Hello ');
// User B: inserts "World" at position 0 (same time, offline)
ytext.insert(0, 'World');

// When syncing, both see: "World Hello " without losing anything
// Yjs guarantees eventual convergence automatically

// Automerge 3.0 — JSON-like CRDTs
import { next as Automerge } from '@automerge/automerge';

let doc1 = Automerge.init();
let doc2 = Automerge.init();

// Two users edit the same document offline
doc1 = Automerge.change(doc1, d => {
  d.tasks = [];
  d.tasks.push({ id: '1', title: 'Buy bread', done: false });
});

doc2 = Automerge.change(doc2, d => {
  d.tasks = [];
  d.tasks.push({ id: '2', title: 'Pay electricity', done: false });
});

// Automatic merge: both see both tasks, no conflict
const merged = Automerge.merge(doc1, doc2);
console.log(merged.tasks); // [{ id: '1', ... }, { id: '2', ... }]

// ElectricSQL: Postgres sync to the client (2026)
import { ShapeStream, Shape } from '@electric-sql/client';

// 1. Server exposes shapes (subsets of tables)
const stream = new ShapeStream({
  url: 'https://api.example.com/v1/shape',
  params: { table: 'tasks', user_id: 'me' }
});

// 2. Client receives data in real time
const shape = new Shape(stream);
shape.subscribe(rows => {
  console.log('Synced tasks:', rows);
  // Data available offline via IndexedDB
});

// 3. To write: HTTP POST + optimistic update
await fetch('/api/tasks', {
  method: 'POST',
  body: JSON.stringify({ title: 'New task' })
});
// Electric syncs automatically when the server responds

# Recommended Local-First stack in 2026
frontend:
  framework: React 19 + Next.js 16
  state_sync: Yjs (CRDT) or ElectricSQL (Postgres-sync)
  persistence: IndexedDB (idb-keyval) or SQLite (wa-sqlite)
  offline_ui: React Query + PersistQueryClient
  
backend:
  api: Hono or Next.js Route Handlers
  db: Postgres 17 + ElectricSQL shape server
  sync_transport: WebSocket (Yjs) or Server-Sent Events (Electric)
  
deploy:
  frontend: Vercel (Next.js)
  db_sync: Fly.io or Railway (ElectricSQL)
  cdn: Cloudflare (static)

// app/notes/[id]/page.tsx — local-first editor with Yjs
'use client';
import { useEffect, useState } from 'react';
import * as Y from 'yjs';
import { WebsocketProvider } from 'y-websocket';
import { IndexeddbPersistence } from 'y-indexeddb';

export default function NoteEditor({ id }: { id: string }) {
  const [ydoc] = useState(() => new Y.Doc());
  const [status, setStatus] = useState<'offline' | 'syncing' | 'synced'>('offline');

  useEffect(() => {
    // 1. Local persistence (offline-first, IndexedDB)
    const persistence = new IndexeddbPersistence(`note-${id}`, ydoc);
    
    // 2. Sync via WebSocket (when there is network)
    const provider = new WebsocketProvider(
      process.env.NEXT_PUBLIC_SYNC_URL!,
      `note-${id}`,
      ydoc,
      { connect: true }
    );

    provider.on('status', (e: any) => {
      setStatus(e.connected ? 'synced' : 'offline');
    });

    return () => {
      provider.destroy();
      persistence.destroy();
    };
  }, [id, ydoc]);

  // Editor works 100% offline, auto-sync when network returns
  return (
    <div>
      <div className="status">
        {status === 'offline' && '📡 Offline mode — changes saved locally'}
        {status === 'synced' && '✅ Synced with the cloud'}
      </div>
      {/* TipTap, ProseMirror, Lexical, etc — all support Yjs */}
    </div>
  );
}