Skip to content

Commit fea0515

Browse files
balegasclaude
balegas
and
claude
committed
Update territory-wars demo with snake + territory enclosure capture
- Snake claims territory as it moves, enclosing areas captures all cells inside (including other players' territory) - Updated blogpost demo description and links to territory-wars repo Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 736c30b commit fea0515

File tree

5 files changed

+293
-46
lines changed

5 files changed

+293
-46
lines changed

‎website/blog/posts/2026-03-31-yjs-durable-streams-on-electric-cloud.md‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
---
2+
title: 'Yjs CRDTs over HTTP on Durable Streams'
3+
description: >-
4+
We've released a new Yjs provider built on Durable Streams — sync fan-out and fast catch-up from the edge for collaborative and agentic systems. Now live on Electric Cloud.
5+
excerpt: >-
6+
We've released a new Yjs provider built on Durable Streams — sync fan-out and fast catch-up from the edge for collaborative and agentic systems. Now live on Electric Cloud.
7+
authors: [balegas]
8+
image: /img/blog/yjs-durable-streams-on-electric-cloud/header.png
9+
tags: [durable-streams, cloud, release, sync, collaboration]
10+
outline: [2, 3]
11+
post: true
12+
published: true
13+
---
14+
15+
[Yjs](https://yjs.dev) is the de facto library for collaborative editing on the web — battle-proven, CRDT-based, and powering tools like [TipTap](https://tiptap.dev), [CodeMirror](https://codemirror.net), and [BlockNote](https://www.blocknotejs.org/). Today we're releasing [`y-durable-streams`](https://www.npmjs.com/package/@durable-streams/y-durable-streams) — a new Yjs provider built on [Durable&nbsp;Streams](/primitives/durable-streams), now live on [Electric&nbsp;Cloud](/cloud). It brings built-in persistence, compaction, and real-time presence to collaborative apps and agentic&nbsp;systems.
16+
17+
>[!info] 🚀&nbsp; Try it now
18+
>[Create a Yjs service](https://dashboard.electric-sql.cloud/?intent=create&serviceType=yjs), see the [integration docs](https://durablestreams.com/yjs), [source&nbsp;code](https://github.com/durable-streams/durable-streams/tree/main/packages/y-durable-streams), and [demo&nbsp;app](https://github.com/balegas/territory-wars).
19+
20+
## Yjs on Durable Streams
21+
22+
[Durable&nbsp;Streams](/primitives/durable-streams) is an open HTTP protocol for persistent, resumable, real-time streams. Data is durably stored, synced over plain HTTP, and cacheable at the&nbsp;edge.
23+
24+
Most Yjs setups rely on WebSocket relay servers that maintain persistent point-to-point connections to sync changes to clients in real time. As agentic systems bring more participants into collaborative documents, they challenge the scalability of these&nbsp;setups.
25+
26+
Durable Streams use a fan-out architecture for syncing changes in real time. Write changes to a log once and sync them via an edge cache or CDN to any number of connected&nbsp;clients.
27+
28+
## How it works
29+
30+
Every document (CRDT) is backed by its own durable stream — a persistent, append-only log. You POST edits to the stream and subscribe to real-time updates via SSE or long-polling. This is the primary channel for syncing live changes to connected&nbsp;clients.
31+
32+
As updates accumulate, the protocol compacts them into **snapshots** — immutable, point-in-time representations of the document. When a new client opens the document, it fetches the latest snapshot. Since snapshots are immutable, their cache lifetime is long-lived. As new snapshots are generated, the protocol directs clients to the latest one and garbage-collects old&nbsp;ones.
33+
34+
Presence information flows through dedicated **awareness streams**, separate from the document stream. Awareness data is ephemeral, so these streams have a built-in TTL that automatically cleans them up when there are no active clients.
35+
36+
For the full details, see the [Yjs Durable Streams Protocol](https://github.com/durable-streams/durable-streams/blob/main/packages/y-durable-streams/YJS-PROTOCOL.md)&nbsp;specification.
37+
38+
## Demo
39+
40+
This demo runs `y-durable-streams` live on Electric&nbsp;Cloud. Players control snakes that claim territory — move to enclose an area and capture everything inside, including cells owned by other players. Game state is stored in a Yjs Y.Map CRDT, and player presence uses awareness streams. Open it in two tabs side by side, surround some territory, and watch updates appear in real time. Share the room link or try it on your&nbsp;phone.
41+
42+
<iframe src="/demos/territory-wars/index.html" style="width:100%;height:500px;border:none" sandbox="allow-same-origin allow-scripts allow-popups" allow="clipboard-write"></iframe>
43+
44+
## Get started
45+
46+
Here's how to set up a collaborative text editor — create a Yjs document with awareness and point it at your&nbsp;endpoint:
47+
48+
```typescript
49+
import { YjsProvider } from '@durable-streams/y-durable-streams'
50+
import { Awareness } from 'y-protocols/awareness'
51+
import * as Y from 'yjs'
52+
53+
const doc = new Y.Doc()
54+
const awareness = new Awareness(doc)
55+
56+
const provider = new YjsProvider({
57+
doc,
58+
awareness,
59+
baseUrl: 'https://api.electric-sql.cloud/v1/stream/svc-your-service',
60+
docId: 'my-document',
61+
})
62+
```
63+
64+
Then wire it into your editor. Here's an example with&nbsp;TipTap:
65+
66+
```typescript
67+
import { useEditor, EditorContent } from '@tiptap/react'
68+
import StarterKit from '@tiptap/starter-kit'
69+
import Collaboration from '@tiptap/extension-collaboration'
70+
import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
71+
72+
const editor = useEditor({
73+
extensions: [
74+
StarterKit.configure({ history: false }),
75+
Collaboration.configure({ document: doc }),
76+
CollaborationCursor.configure({ provider }),
77+
],
78+
})
79+
```
80+
81+
The provider handles sync, compaction, and awareness. Cursors, selections, and user presence work out of the box — every client that connects to the same `docId` sees the same document, in real&nbsp;time.
82+
83+
Clone the [demo&nbsp;app](https://github.com/durable-streams/durable-streams/tree/main/examples/yjs-demo) to see a working example, or drop the provider into your existing Yjs&nbsp;project.
84+
85+
## No lock-in
86+
87+
The entire protocol is [documented](https://github.com/durable-streams/durable-streams/blob/main/packages/y-durable-streams/YJS-PROTOCOL.md) and ships with a conformance test suite you can run against any implementation. Self-host it, switch providers, or build your own compatible server — your documents are&nbsp;yours.
88+
89+
Electric Cloud implements the protocol faithfully — no proprietary extensions, no vendor-specific APIs. It's the fastest way to get&nbsp;started.
90+
91+
## Next steps
92+
93+
- [Create a Yjs service](https://dashboard.electric-sql.cloud/?intent=create&serviceType=yjs) on Electric Cloud
94+
- [Integration docs](https://durablestreams.com/yjs) and [protocol spec](https://github.com/durable-streams/durable-streams/blob/main/packages/y-durable-streams/YJS-PROTOCOL.md)
95+
- [Territory Wars demo](https://github.com/balegas/territory-wars) and [collaborative editor example](https://github.com/durable-streams/durable-streams/tree/main/examples/yjs-demo) on GitHub
96+
97+
Join us on [Discord](https://discord.electric-sql.com) with any&nbsp;questions.

‎website/blog/posts/2026-03-31-yjs-durable-streams-on-electric-cloud.outline.md‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
---
2+
title: '...'
3+
description: >-
4+
...
5+
excerpt: >-
6+
...
7+
authors: [balegas]
8+
image: /img/blog/yjs-durable-streams-on-electric-cloud/header.jpg
9+
tags: [durable-streams, cloud, release, sync, collaboration]
10+
outline: [2, 3]
11+
post: true
12+
published: false
13+
---
14+
15+
<!-- STRUCTURAL NOTE: This is a release post. Lead with what shipped and why
16+
it matters. Factual, brisk, no preamble. Let the content do the work. -->
17+
18+
Yjs durable streams are now available on Electric Cloud. Real-time
19+
collaborative editing as a managed service — sync Yjs documents over HTTP
20+
instead of WebSockets.
21+
22+
Open protocol. Sub-50ms latency. Runs on the edge. Built-in compaction. No
23+
infrastructure to manage. Create a service, point your Yjs app at it.
24+
25+
<!-- TONE: Compressed, confident. This paragraph IS the pitch.
26+
Expand each line slightly into prose but keep it tight. -->
27+
28+
:::info
29+
- [Create a Yjs service on Electric Cloud](https://github.com/durable-streams/durable-streams/tree/main/examples/yjs-demo)
30+
- [`y-durable-streams` on GitHub](https://github.com/durable-streams/durable-streams/tree/main/packages/y-durable-streams)
31+
- [Demo app](https://github.com/durable-streams/durable-streams/tree/main/examples/yjs-demo)
32+
:::
33+
34+
## Context
35+
36+
<!-- STRUCTURAL NOTE: Brief orientation only. 2-3 bullets. Not a backstory —
37+
just enough for readers who haven't been following durable streams. -->
38+
39+
- Durable Streams is an open HTTP protocol for persistent, resumable,
40+
real-time streams. Append-only logs with their own URL that clients can
41+
read from any position
42+
- `y-durable-streams` is a Yjs provider that replaces WebSocket-based sync
43+
with plain HTTP — works with standard load balancers and CDNs, no sticky
44+
sessions
45+
- Electric Cloud has been running durable streams services since January.
46+
Yjs is the latest service type
47+
48+
## What's shipping
49+
50+
<!-- STRUCTURAL NOTE: Concrete capabilities. Lead with benefits,
51+
follow with specifics. Each bullet = something the reader can now do. -->
52+
53+
- Managed Yjs sync on Electric Cloud — one click to create a service, get
54+
an endpoint, connect your Yjs app
55+
- Sub-50ms latency, edge-deployed, scales without you thinking about it
56+
- Built-in server-side compaction — accumulated updates get merged into
57+
snapshots automatically, initial loads stay fast as documents grow
58+
- Awareness and presence out of the box — cursors, selections, user status
59+
over the same HTTP transport
60+
- Open protocol, no vendor lock-in — `y-durable-streams` works against any
61+
durable streams server, self-hosted or cloud
62+
- Just HTTP — no WebSocket servers, no sticky sessions, CDN-friendly
63+
64+
<!-- ASSET: demo video or GIF of collaborative editor with multiple cursors
65+
and presence indicators -->
66+
67+
## Get started
68+
69+
<!-- STRUCTURAL NOTE: Show don't tell. The reader should be able to try it
70+
from this section. One-click setup — keep it minimal. -->
71+
72+
<!-- AUTHOR NOTE: Include the direct link to create a Yjs service on Cloud.
73+
This is a single click — don't over-explain the process. -->
74+
75+
- Link to create a Yjs durable streams service on Electric Cloud
76+
- Clone the demo app and point it at your cloud endpoint:
77+
78+
```typescript
79+
import { YjsProvider } from '@durable-streams/y-durable-streams'
80+
import * as Y from 'yjs'
81+
82+
const doc = new Y.Doc()
83+
const provider = new YjsProvider({
84+
doc,
85+
baseUrl: 'https://your-service.electric-sql.cloud/v1/yjs',
86+
docId: 'my-document',
87+
})
88+
```
89+
90+
<!-- AUTHOR NOTE: Confirm the exact baseUrl pattern for cloud endpoints.
91+
Mention it works with any Yjs editor binding — CodeMirror, ProseMirror,
92+
TipTap, BlockNote, etc. -->
93+
94+
***
95+
96+
Next steps:
97+
98+
- [Sign up for Electric Cloud](https://dashboard.electric-sql.cloud/)
99+
- [Try the demo](https://github.com/durable-streams/durable-streams/tree/main/examples/yjs-demo)
100+
- [Join Discord](https://discord.electric-sql.com)
101+
102+
***
103+
104+
<!-- DELETE EVERYTHING BELOW THIS LINE BEFORE PUBLISHING -->
105+
106+
<!-- ## Meta
107+
108+
### Intent
109+
110+
- **What:** Yjs durable streams now available as a managed service on Electric Cloud
111+
- **Hook:** Open protocol, sub-50ms latency, runs on the edge, built-in compaction, just HTTP — no WebSocket infrastructure
112+
- **Takeaway:** Works with your existing stack, no vendor lock-in, cheap to run and scale
113+
- **CTAs:** Sign up for Cloud, try the demo
114+
- **Authority:** Electric team, experts in sync, background in CRDTs
115+
116+
### Title brief
117+
118+
Direction: Something direct and specific. "Yjs durable streams on Electric Cloud"
119+
or "Real-time collaboration with Yjs on Electric Cloud". Sentence case, not Title
120+
Case. Keep it short.
121+
122+
### Description brief
123+
124+
For SEO. Convey: managed Yjs sync service on Electric Cloud, HTTP-based (not
125+
WebSocket), sub-50ms latency, open protocol, no vendor lock-in. Target developers
126+
searching for Yjs hosting, Yjs sync, collaborative editing infrastructure.
127+
128+
### Excerpt brief
129+
130+
For the blog listing card. Max 3 short sentences. What shipped (Yjs durable
131+
streams on Cloud), why it's interesting (HTTP, fast, open protocol), try it now.
132+
Match word length of existing post excerpts.
133+
134+
### Image prompt
135+
136+
Abstract visualization of collaborative editing — multiple cursors or document
137+
nodes connected over a network. Dark theme background. Electric brand colors:
138+
purple (#D0BCFF), green (#00d2a0), cyan (#75fbfd). Center-center composition.
139+
16:9 aspect ratio, ~1536x950px. High-quality JPG. Use /blog-image-brief for
140+
a detailed prompt with reference analysis.
141+
142+
### Asset checklist
143+
144+
- [ ] Demo video or GIF: collaborative editor with multiple cursors and presence
145+
- [ ] Code snippet: confirm exact cloud baseUrl pattern for YjsProvider
146+
- [ ] Info box links: cloud dashboard URL, create-service link, demo repo link
147+
148+
### Typesetting checklist
149+
150+
- [ ] Use non-breaking spaces where appropriate to avoid widows and orphans
151+
- [ ] Title uses sentence case, not Title Case
152+
- [ ] Check title, image, and general post at different screen widths
153+
- [ ] No LLM tells: "it's worth noting", "importantly", "in conclusion",
154+
"let's dive in", "at its core", "in today's landscape"
155+
156+
### Open questions
157+
158+
- Exact URL pattern for cloud Yjs service endpoints
159+
- Performance numbers beyond sub-50ms to include?
160+
- Specific "coming next" items if any are decided later
161+
162+
-->

0 commit comments

Comments
 (0)