@robojs/sync

Real-time state synchronization across clients using WebSockets. Ideal for multiplayer games, collaborative apps, and live dashboards.

const [position, setPosition, context] = useSyncState({ x: 0, y: 0 }, [channelId])

const [position, setPosition, context] = useSyncState({ x: 0, y: 0 }, [channelId])

Works like React's useState, but syncs state across all clients in real-time via WebSockets. Components sharing the same key array see the same state. No manual socket handling required. Requires @robojs/server as a peer dependency.

Features

Installation

Add the plugin to your Robo project:

npx robo add @robojs/sync@next

To scaffold a new project with sync preconfigured:

npx create-robo@next my-project -p @robojs/sync@next

Setup

Wrap your app with SyncContextProvider to establish the WebSocket connection and make sync hooks available.

import { SyncContextProvider } from '@robojs/sync'

export function App() {
	return (
		<SyncContextProvider clientData={{ name: 'Player1' }} loadingScreen={<Loading />}>
			<Activity />
		</SyncContextProvider>
	)
}

import { SyncContextProvider } from '@robojs/sync'

export function App() {
	return (
		<SyncContextProvider clientData={{ name: 'Player1' }} loadingScreen={<Loading />}>
			<Activity />
		</SyncContextProvider>
	)
}

Scaling beyond sync

For complex multiplayer games that need authoritative server state, matchmaking, reconnection, and deterministic logic, consider Colyseus. Model your sync keys as Colyseus rooms and move update logic to server-side room handlers.

Next Steps