Building Real-Time Local-First Architectures: Implementing Bi-Directional Sync with Yjs and WebSocket on a Node.js VPS

Introduction to the Local-First Revolution

In the traditional web paradigm, the cloud is the single source of truth. Every user interaction—whether a keystroke, a status update, or a toggle switch—requires a round-trip journey to a centralized server. While this model has served the industry for over two decades, it introduces fundamental flaws: latency spikes, complete dependency on internet connectivity, and complex state management on the client side to handle offline scenarios.

Local-first software flips this architecture on its head. Coined by researchers at Ink & Switch, local-first development prioritizes local storage as the primary source of truth, treating the cloud server not as an authoritative gatekeeper, but as a multi-master replication and backup mechanism. Users retain their data locally, applications remain fully functional offline, and collaborative changes sync seamlessly when a network connection is available.

In this guide, we will explore how to build a robust, production-grade local-first synchronization ecosystem. We will implement Conflict-Free Replicated Data Types (CRDTs) using Yjs, orchestrate real-time bi-directional sync via a Node.js WebSocket server, and deploy the entire infrastructure to a Virtual Private Server (VPS).

The Core Tech Stack: Why Yjs and WebSockets?

To achieve seamless, conflict-free collaborative editing and state sync without a centralized orchestrator dictating the correct state, we rely on specific technological primitives:

Yjs (CRDT Framework): Unlike Operational Transformation (OT)—which requires a heavy, centralized server to sequence operations—Yjs uses high-performance CRDTs. It allows concurrent modifications to data structures across different devices, guarantees eventual consistency, and does so with remarkable memory and CPU efficiency.
WebSockets (y-websocket): While Yjs handles the data structures and conflict resolution, it is transport-agnostic. We utilize WebSockets via the y-websocket provider to establish a persistent, low-latency, bi-directional communication pipe between clients and our server.
Node.js & VPS hosting: A lean Node.js runtime acts as our synchronization hub, tracking active rooms, persisting document states, and broadcasting updates. Hosting this on an independent VPS ensures predictable costs, absolute data privacy, and full control over system resources.

Architecting the Synchronization Flow

Before diving into the implementation, it is crucial to understand how data propagates through a local-first system using Yjs. The flow operates symmetrically:

The client mutates a local Yjs document (e.g., a shared text block, map, or array).
Yjs computes a highly optimized binary diff representing the state update.
The local y-websocket provider captures this update event and transmits the binary payload over the WebSocket connection.
The Node.js server receives the binary update, merges it into its own in-memory representation of the document, and forwards the raw update to all other connected clients in that specific "room".
Receiving clients merge the update directly into their local Yjs instances, updating the UI instantly without conflicting with local pending edits.

Key Architectural Insight: Because CRDT updates are commutative, associative, and idempotent, the order in which updates arrive at the server or peer devices does not matter. The final state will always converge identically across all nodes.

Step-by-Step Implementation Guide

1. Setting Up the Node.js WebSocket Synchronization Server

First, we must construct our central synchronization hub. We initialize a new Node.js environment and install the necessary dependencies, leveraging the official, robust ecosystem provided by Yjs.

mkdir yjs-sync-server
cd yjs-sync-server
npm init -y
npm install yjs y-websocket ws

Next, we create an entry point file named server.js. Rather than reinventing the wheel, we leverage the battle-tested production server utility bundled within y-websocket/bin/utils, which natively handles document mapping, persistence hooks, and efficient broadcasting.

const WebSocket = require('ws');
const http = require('http');
const utils = require('y-websocket/bin/utils');

const port = process.env.PORT || 1234;
const server = http.createServer((request, response) => {
  response.writeHead(200, { 'Content-Type': 'text/plain' });
  response.end('Yjs Synchronization Server is running.\n');
});

const wss = new WebSocket.Server({ noServer: true });

wss.on('connection', utils.setupWSConnection);

server.on('upgrade', (request, socket, head) => {
  const handleAuth = (ws) => {
    wss.emit('connection', ws, request);
  };
  wss.handleUpgrade(request, socket, head, handleAuth);
});

server.listen(port, () => {
  console.log(`[Yjs Server] Listening on port ${port}`);
});

2. Configuring the Client-Side Local-First Sync

On the client side, initializing a local-first document involves binding a standard Yjs document instance to both a local state manager and our remote WebSocket provider. Below is a clean implementation using vanilla JavaScript.

import * as Y from 'yjs';
import { WebSocketProvider } from 'y-websocket';

// 1. Initialize the local Yjs Document (Primary Source of Truth)
const ydoc = new Y.Doc();

// 2. Define a shared, collaborative data type (e.g., a shared Map)
const sharedMap = ydoc.getMap('project-metadata');

// 3. Connect to the remote VPS sync server via WebSockets
const provider = new WebSocketProvider('ws://your-vps-ip:1234', 'room-name', ydoc);

provider.on('status', event => {
  console.log(`Connection Status: ${event.status}`); // 'connected' or 'disconnected'
});

// 4. Listen for local or remote document changes to update the UI
sharedMap.observe(event => {
  console.log('Data updated:', sharedMap.toJSON());
  // Trigger your UI render functions here
});

// Example: Mutating data locally (Will sync automatically when connected)
function updateProjectStatus(status) {
  sharedMap.set('status', status);
  sharedMap.set('lastUpdated', new Date().toISOString());
}

Production Deployment Strategies on a VPS

Transitioning a local-first infrastructure from localhost to a production VPS requires hardening the network stack, setting up a reverse proxy, and ensuring high availability.

Process Management with PM2

To ensure your Node.js synchronization server recovers instantly from unhandled exceptions or system reboots, manage the process with PM2. Execute the following commands on your VPS:

npm install -g pm2
pm2 start server.js --name "yjs-sync-server"
pm2 startup
pm2 save

Securing Connections with Nginx Reverse Proxy

Running WebSockets over insecure HTTP (ws://) exposes your application data to man-in-the-middle attacks and causes aggressive connection dropping by modern web browsers. It is essential to use Nginx as a reverse proxy to terminate SSL certificates (wss://).

An optimal Nginx configuration snippet for handling WebSocket upgrades looks as follows:

server {
    server_name sync.yourdomain.com;

    location / {
        proxy_pass http://localhost:1234;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_read_timeout 86400s;
        proxy_send_timeout 86400s;
    }
}

Make sure to provision an SSL certificate using Certbot / Let's Encrypt immediately after pointing your DNS to your VPS IP address.

Optimization: Persistence and Offline Durability

The standard y-websocket server operates purely in-memory by default. If the server restarts, its active memory clears. While clients holding the local document will automatically re-sync the state back to the server upon reconnection, it is best practice to persist the document state directly on the server.

You can easily scale your server architecture by integrating LevelDB or MongoDB into the y-websocket backend using official persistence drivers:

const { LeveldbPersistence } = require('y-leveldb');
const ldb = new LeveldbPersistence('./storage-location');

utils.setPersistence({
  bindState: async (docName, ydoc) => {
    const persistedYdoc = await ldb.getYDoc(docName);
    Y.applyUpdate(ydoc, Y.encodeStateAsUpdate(persistedYdoc));
    ydoc.on('update', update => {
      ldb.storeUpdate(docName, update);
    });
  },
  writeState: async (docName, ydoc) => {} 
});

Conclusion and Key Takeaways

Embracing a local-first architecture shifts your development philosophy toward client autonomy and resilience. By pairing the robust CRDT handling of Yjs with a dedicated Node.js WebSocket server on your own VPS, you build an incredibly responsive system capable of sub-millisecond local updates while maintaining flawless, real-time bi-directional synchronization globally.

As you scale, explore client-side persistence options like IndexedDB via y-indexeddb to ensure your users' data remains available on their devices even after browser tabs close, completing the full promise of a local-first application lifecycle.