SyncTonic

A lightweight, type-safe, and high-performance library for synchronizing application state across multiple browser tabs using the BroadcastChannel API.

Core Philosophy: Data Consistency in Distributed Client-side Systems

SyncTonic is designed as a infrastructure-level solution for UI synchronization problems. In a modern multi-tab context, browser applications behave as distributed systems. SyncTonic ensures data consistency across these instances using an event-driven architecture and a Last-Write-Wins (LWW) conflict resolution strategy.

Features

• Zero Dependency: Core logic is standalone and minimal.
• Type Safe: Full TypeScript support with generics.
• Event-Driven: Leverages native BroadcastChannel for real-time updates.
• Conflict Resolution: Timestamp-based synchronization to handle concurrent updates.
• React Integration: Includes a first-class useTabSync hook.

Installation

npm install sync-tonic

Usage

Core API (Vanilla JS/TS)

import { createTabSync } from 'sync-tonic';

interface AppState {
  count: number;
}

const synchronizer = createTabSync<AppState>('my-app-channel');

// Subscribe to updates from other tabs
synchronizer.subscribe((newState) => {
  console.log('State updated from another tab:', newState);
});

// Broadcast state to all other tabs
synchronizer.publish({ count: 42 });

React Integration

import { useTabSync } from 'sync-tonic/react';

function Counter() {
  const [count, setCount] = useTabSync<number>('counter-sync', 0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Strategic Architecture

SyncTonic addresses the challenge of state divergence in client-side applications. By treating each tab as a node in a decentralized network, it provides a robust mechanism for data consistency without the overhead of a backend coordinator.

• Communication Layer: BroadcastChannel provides a low-latency, cross-context message bus.
• Concurrency Model: High-resolution timestamps are used to order events, ensuring that the latest intent always prevails across all nodes.
• Memory Management: Automatic cleanup of channels and subscribers to prevent leaks in long-lived sessions.

License

MIT