Skip to content

blog: Yjs durable streams on Electric Cloud#4059

Open
balegas wants to merge 26 commits intomainfrom
blog/yjs-durable-streams-on-electric-cloud
Open

blog: Yjs durable streams on Electric Cloud#4059
balegas wants to merge 26 commits intomainfrom
blog/yjs-durable-streams-on-electric-cloud

Conversation

@balegas
Copy link
Copy Markdown
Contributor

@balegas balegas commented Mar 25, 2026

Summary

  • Adds draft blog post for Yjs durable streams release on Electric Cloud
  • Release post format: TLDR, context, what's shipping, get started
  • published: false — outline to be prosed up by author

Test plan

  • Author expands outline bullets into prose
  • Confirm cloud baseUrl pattern in code snippet
  • Add demo video/GIF asset
  • Fill in frontmatter (title, description, excerpt)
  • Run /blog-review before publishing

🤖 Generated with Claude Code

balegas and others added 13 commits March 28, 2026 01:42
Outline for release post announcing Yjs durable streams as a managed
service on Electric Cloud. Published: false.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add multiplayer territory game demo (built with Yjs CRDTs on Durable
Streams) to the blog post. Players claim cells by moving over them,
with Yjs LWW resolving contention. Embedded as an iframe.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
VitePress dev server intercepts directory paths. Using the explicit
filename bypasses VitePress routing and serves the static file.

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>
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>
@balegas balegas force-pushed the blog/yjs-durable-streams-on-electric-cloud branch from e5a16f2 to de80976 Compare March 28, 2026 01:42
balegas and others added 2 commits March 28, 2026 01:44
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@netlify
Copy link
Copy Markdown

netlify bot commented Mar 28, 2026

Deploy Preview for electric-next ready!

Name Link
🔨 Latest commit 9c3049f
🔍 Latest deploy log https://app.netlify.com/projects/electric-next/deploys/69cbfe3ab85cee0008063c73
😎 Deploy Preview https://deploy-preview-4059--electric-next.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

balegas and others added 9 commits March 28, 2026 01:53
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>
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>
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&nbsp;sync.
Copy link
Copy Markdown
Contributor

@thruflo thruflo Mar 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 ...

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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&nbsp;sync.

>[!info] 🚀&nbsp; Try it now
>Sign up to [Electric&nbsp;Cloud](https://dashboard.electric-sql.com), create a&nbsp;Yjs service, and connect your app.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(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&nbsp;stack.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is very LLM-tell.

>Sign up to [Electric&nbsp;Cloud](https://dashboard.electric-sql.com), create a&nbsp;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&nbsp;app](https://github.com/durable-streams/durable-streams/tree/main/examples/yjs-demo) on&nbsp;GitHub.

## The problem with WebSockets
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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&nbsp;Streams](/primitives/durable-streams), an open HTTP protocol for persistent, resumable, real-time streams.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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&nbsp;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&nbsp;effort.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)&nbsp;specification.

## Demo
Copy link
Copy Markdown
Contributor

@thruflo thruflo Mar 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:

  1. 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.
  2. 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
  3. 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
  4. 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)
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use the intent link.

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
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Mar 31, 2026

Open in StackBlitz

npm i https://pkg.pr.new/@electric-sql/react@4059
npm i https://pkg.pr.new/@electric-sql/client@4059
npm i https://pkg.pr.new/@electric-sql/y-electric@4059

commit: fea0515

@codecov
Copy link
Copy Markdown

codecov bot commented Mar 31, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 83.48%. Comparing base (0b45e63) to head (fea0515).
⚠️ Report is 6 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #4059      +/-   ##
==========================================
- Coverage   88.67%   83.48%   -5.20%     
==========================================
  Files          25       65      +40     
  Lines        2438     3850    +1412     
  Branches      613      615       +2     
==========================================
+ Hits         2162     3214    +1052     
- Misses        274      634     +360     
  Partials        2        2              
Flag Coverage Δ
electric-telemetry 65.18% <ø> (?)
elixir 74.50% <100.00%> (?)
elixir-client 78.87% <100.00%> (?)
packages/experimental 87.73% <ø> (ø)
packages/react-hooks 86.48% <ø> (ø)
packages/start 82.83% <ø> (ø)
packages/typescript-client 93.81% <ø> (ø)
packages/y-electric 56.05% <ø> (ø)
typescript 88.67% <ø> (ø)
unit-tests 83.48% <100.00%> (-5.20%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

- Remove embedded iframe, link to demo page instead
- Add territory-wars demo to /demos with screenshot
- Remove game rules from demo description
- Add header image and SnapshotSyncDiagram component
- Remove outdated outline file

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@balegas balegas force-pushed the blog/yjs-durable-streams-on-electric-cloud branch from fea0515 to 2dde8a8 Compare March 31, 2026 15:10
[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.

>[!info] 🚀&nbsp; 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&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).
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants