Skip to content

Live, across tabs

Every other page in this demo keeps its replicas side by side in one tab, talking over the library's in-memory transport. This one is the real thing: one replica per browser tab, meeting through the demo server. Open the link below in another tab, another browser or on your phone and type in both.

One replica per tab

This tab is one replica. Share the link, and every tab that opens it is another.

Connecting…

The thing worth trying. Take one tab offline, type a paragraph into it, type something else into another tab, then bring the first one back. Both paragraphs survive, in the same order in every tab - the handshake sends each side what the other is missing, in both directions.

The page an application would write

The document comes from the app's own AddBitBcrdtServices registration and is opened by BcrdtCollaborationScope; the editor is BcrdtTextArea and the list of people is BcrdtPresenceView. The server only relays: BcrdtHub from Bit.Bcrdt.Server forwards each message to the other tabs on the document without decoding it, and no copy of the document lives on the server - when the last tab closes, it is gone.

Two relays

The demo server maps both relays Bit.Bcrdt.Server ships: BcrdtHub for the SignalR transport of Bit.Bcrdt.SignalR, and the WebSocket endpoint for the WebSocket transport built into Bit.Bcrdt. Tabs only meet on the same relay, so the relay is part of the link you share.

// Demo/Server/Program.cs
builder.Services.AddBitBcrdtHub();   // AddSignalR, with a receive limit sized for sync messages
// ...
app.UseWebSockets();

app.MapHub<BcrdtHub>("/hub/bcrdt");
app.MapBitBcrdtWebSocket("/ws/bcrdt/{documentId}");
An unhandled error has occurred. Reload 🗙