blog: Yjs durable streams on Electric Cloud#4059
Conversation
balegas
force-pushed
the
blog/yjs-durable-streams-on-electric-cloud
branch
from
e5a16f2 to
de80976
Compare
✅ Deploy Preview for electric-next ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
| published: true | ||
| --- | ||
|
|
||
| [Yjs](https://yjs.dev) is the de facto library for collaborative editing on the web. It's battle-proven, CRDT-based, and powers tools like [TipTap](https://tiptap.dev), [CodeMirror](https://codemirror.net), [BlockNote](https://www.blocknotejs.org/) and more. And it's not just collaboration between humans anymore — agents are increasingly editing documents, generating code, and filling in forms alongside users. Whether it's humans or agents collaborating, they need reliable, conflict-free sync. |
There was a problem hiding this comment.
I would perhaps say what we're releasing here.
I.e.: "Yjs is X, it's increasingly for agents and <today we're releasing ...>."
What is it that the reader would be trying now when they "Try it now" below?! It's not Yjs, it's our new Durable Streams Yjs integration ...
There was a problem hiding this comment.
Tweak the filename date to 31st March. N.b.: fixing any links referring to it.
| [Yjs](https://yjs.dev) is the de facto library for collaborative editing on the web. It's battle-proven, CRDT-based, and powers tools like [TipTap](https://tiptap.dev), [CodeMirror](https://codemirror.net), [BlockNote](https://www.blocknotejs.org/) and more. And it's not just collaboration between humans anymore — agents are increasingly editing documents, generating code, and filling in forms alongside users. Whether it's humans or agents collaborating, they need reliable, conflict-free sync. | ||
|
|
||
| >[!info] 🚀 Try it now | ||
| >Sign up to [Electric Cloud](https://dashboard.electric-sql.com), create a Yjs service, and connect your app. |
There was a problem hiding this comment.
Maybe:
Create a Yjs service, see the integration docs, source code and demo app.
There was a problem hiding this comment.
(The create link must use the intent link).
|
|
||
| Most Yjs setups are built on WebSockets to relay updates to clients. WebSockets are point-to-point connections with no fan-out distribution. They require sticky connections and content can't be cached at a CDN, which means there is a latency penalty for every user or agent that needs to retrieve the initial state of a document. | ||
|
|
||
| There is no standardized reference implementation if you want to implement this yourself. There are hosted services you can buy, but that means vendor lock-in and a new piece of infrastructure to add to your stack. |
| >Sign up to [Electric Cloud](https://dashboard.electric-sql.com), create a Yjs service, and connect your app. | ||
| >See the [`y-durable-streams` source](https://github.com/durable-streams/durable-streams/tree/main/packages/y-durable-streams) and [demo app](https://github.com/durable-streams/durable-streams/tree/main/examples/yjs-demo) on GitHub. | ||
|
|
||
| ## The problem with WebSockets |
There was a problem hiding this comment.
The title seems a bit odd to me. This is an article about our Yjs integration. Where did WebSockets come from? Could this first para be mixed in below, so the body of the article leads with what we've built?
|
|
||
| ## Yjs on bare HTTP | ||
|
|
||
| We've built [`y-durable-streams`](https://github.com/durable-streams/durable-streams/tree/main/packages/y-durable-streams) — a new Yjs provider on [Durable Streams](/primitives/durable-streams), an open HTTP protocol for persistent, resumable, real-time streams. |
There was a problem hiding this comment.
This is the sentence/para that I'd love to be in the intro above.
|
|
||
| We've built [`y-durable-streams`](https://github.com/durable-streams/durable-streams/tree/main/packages/y-durable-streams) — a new Yjs provider on [Durable Streams](/primitives/durable-streams), an open HTTP protocol for persistent, resumable, real-time streams. | ||
|
|
||
| Instead of WebSocket relay servers, document updates flow through plain HTTP. Clients POST edits and subscribe for real-time updates via SSE or long-polling — no persistent connections, no sticky sessions. Because it's standard HTTP, it works with the infrastructure you already have: load balancers, reverse proxies, CDNs. Snapshots are cacheable at the edge, so fan-out scales without extra effort. |
There was a problem hiding this comment.
This focuses on HTTP and connection details. Is the lede not the para below? What do Durable Streams do -- they provide persistence, durability and sync. Plus with this impl also compaction etc.
I would prioritize what this does rather than tilting at the WebSocket straw man.
|
|
||
| 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) specification. | ||
|
|
||
| ## Demo |
There was a problem hiding this comment.
The demo is totally awesome. It just needs a little more packaging. This is the main feedback I wanted to relay on the post -- we can get loads more value from the work with some simple tweaks.
Right now the demo is an interactive iframe embed in the page. However, it's not obvious that it's interactive or that it's multi-player or that it's an app at all.
I suggest:
- screen recording a 30 - 45 second screencast of using the game. Use Screen Studio so you record yourself as well and just talk about the game and how it's built whilst using it.
- publish this to the ElectricSQL YouTube and use the YoutubeEmbed component to embed the video below the warning box in the header above -- that way it's impossible to miss it and it's obvious it's a screencast video of a demo app
- here in the page if we want to embed the app then it needs clearer signposting that it is indeed an embedded interactive app, not just an embedded screenshot. I would also personally have a primary button that opens the app in target blank (or a popover window) because I think that will be easier for people to test the multiplayer and use as an app vs the embed here
- if possible, publish a /demos/territory-wars demo, using the markdown front matter of the demo page to link to the video, demo app and source then you can embed / link to that from the page here.
|
|
||
| ## Next steps | ||
|
|
||
| - sign up to [Electric Cloud](https://dashboard.electric-sql.com) |
| excerpt: >- | ||
| Sync Yjs documents over plain HTTP. y-durable-streams brings built-in compaction, real-time presence, and fan-out via CDN to collaborative apps and agentic systems. | ||
| authors: [balegas] | ||
| image: /img/blog/yjs-durable-streams-on-electric-cloud/header.png |
There was a problem hiding this comment.
The image is just slightly not vertically centered. It needs the top padding cropped out slightly. Ideally exported as an 1536 x 947 pixel image.
commit: |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #4059 +/- ##
==========================================
- Coverage 88.67% 83.50% -5.18%
==========================================
Files 25 65 +40
Lines 2438 3850 +1412
Branches 613 611 -2
==========================================
+ Hits 2162 3215 +1053
- Misses 274 633 +359
Partials 2 2
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
balegas
force-pushed
the
blog/yjs-durable-streams-on-electric-cloud
branch
from
fea0515 to
2dde8a8
Compare
| [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 Streams](/primitives/durable-streams), now live on [Electric Cloud](/cloud). It brings built-in persistence, compaction, and real-time presence to collaborative apps and agentic systems. | ||
|
|
||
| >[!info] 🚀 Try it now | ||
| >[Create a Yjs service](https://dashboard.electric-sql.cloud/?intent=create&serviceType=yjs), see the [integration docs](https://durablestreams.com/yjs), [source code](https://github.com/durable-streams/durable-streams/tree/main/packages/y-durable-streams), and [demo app](https://github.com/balegas/territory-wars). |
There was a problem hiding this comment.
The demo can be the link to the demo page now. (Same for any similar links).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
balegas
force-pushed
the
blog/yjs-durable-streams-on-electric-cloud
branch
from
b523b79 to
400af4c
Compare
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2 participants
Summary
published: false— outline to be prosed up by authorTest plan
/blog-reviewbefore publishing🤖 Generated with Claude Code