All projects

TOOLS / A PERSONAL PROJECT

react-p2p-host

Shared game state, with a React-shaped interface.

Open source · Code & documentation

Where it started.

A React library for peer-to-peer multiplayer and shared state. It grew out of the kinds of interactions that board and tabletop games need.

What I’m exploring.

The API uses WebRTC with manual signaling through shareable links or QR codes. The documentation includes hooks for joining a session and working with shared state.

A game-shaped engineering problem.

Board games need a shared understanding of the table: whose turn it is, what changed, and which state is authoritative. I built a React interface around peer connections so a game can express those concepts without owning every networking detail.

A small API over a real connection.

The library uses WebRTC data channels, manual offer-and-answer exchange, and links or QR codes for signaling. useSharedState keeps the host as the source of truth; peers receive its updates. A reducer API supports a different interaction model and should not be mistaken for a conflict-resolution system.

The trade-off is part of the design.

Manual signaling removes the need for an application signaling service, but makes joining a session more involved. Cross-network connectivity may need STUN or TURN infrastructure. This is a library for exploring shared interactions, not a claim that every network will connect or that it provides production anti-cheat.

Where it stands.

Source and examples are available on GitHub. Peer connections depend on the participants’ network environments.

A REAL DATA CHANNEL / A LOCAL DEMONSTRATION

One change. Two peers.

These panels represent two separate WebRTC peers in this browser. The host sends a counter; the second panel updates only when its data channel receives the message.

01 / HOST · SOURCE OF TRUTH0
02 / PEER · RECEIVED STATE0

Updated through the connection.

Not connected

No microphone, camera, external STUN server or signaling service is used here. This demonstrates the transport locally, not connectivity across different networks. For cross-device setup, see the library’s examples and network limitations.