Software Local-First en 2026: CRDTs con Yjs y Automerge para Apps Offline-First

// Primer ejemplo Local-First con Yjs en 2026
import * as Y from 'yjs';
import { WebsocketProvider } from 'y-websocket';

// Estado compartido entre usuarios y dispositivos
const ydoc = new Y.Doc();

// Mapa compartido (se sincroniza automaticamente)
const ymap = ydoc.getMap('tasks');
ymap.set('todo-1', { title: 'Aprender CRDTs', done: false });

// Servidor de sync (opcional, solo retransmite, no es fuente de verdad)
const provider = new WebsocketProvider(
  'wss://sync.example.com',
  'room-1',
  ydoc
);

// Cada cliente puede editar offline y sincroniza al reconectar
ymap.set('todo-1', { title: 'Aprender CRDTs', done: true });
// Yjs mergea automaticamente sin perder cambios

// Yjs — CRDTs tipo Operaciones (YATA)
// Benchmark: 1M operaciones / segundo en M3
const ydoc = new Y.Doc();
const ytext = ydoc.getText('content');

// Dos usuarios editan el mismo texto offline
// Usuario A: inserta "Hola " en posicion 0
ytext.insert(0, 'Hola ');
// Usuario B: inserta "Mundo" en posicion 0 (mismo tiempo, offline)
ytext.insert(0, 'Mundo');

// Al sincronizar, ambos ven: "Mundo Hola " sin perder nada
// Yjs garantiza convergencia eventual automaticamente

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

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

// Dos usuarios editan el mismo documento offline
doc1 = Automerge.change(doc1, d => {
  d.tasks = [];
  d.tasks.push({ id: '1', title: 'Comprar pan', done: false });
});

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

// Merge automatico: ambos ven las dos tareas, sin conflicto
const merged = Automerge.merge(doc1, doc2);
console.log(merged.tasks); // [{ id: '1', ... }, { id: '2', ... }]

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

// 1. El servidor expone shapes (subsets de tablas)
const stream = new ShapeStream({
  url: 'https://api.example.com/v1/shape',
  params: { table: 'tasks', user_id: 'me' }
});

// 2. El cliente recibe datos en tiempo real
const shape = new Shape(stream);
shape.subscribe(rows => {
  console.log('Tareas sincronizadas:', rows);
  // Datos disponibles offline via IndexedDB
});

// 3. Para escribir: HTTP POST + optimistic update
await fetch('/api/tasks', {
  method: 'POST',
  body: JSON.stringify({ title: 'Nueva tarea' })
});
// Electric sincroniza automaticamente cuando el servidor responde

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

// app/notes/[id]/page.tsx — editor local-first con 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. Persistencia local (offline-first, IndexedDB)
    const persistence = new IndexeddbPersistence(`note-${id}`, ydoc);
    
    // 2. Sync via WebSocket (cuando hay red)
    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]);

  // El editor funciona 100% offline, sync automatico cuando vuelve la red
  return (
    <div>
      <div className="status">
        {status === 'offline' && '📡 Modo offline — cambios guardados localmente'}
        {status === 'synced' && '✅ Sincronizado con la nube'}
      </div>
      {/* TipTap, ProseMirror, Lexical, etc — todos soportan Yjs */}
    </div>
  );
}