Svelte and Yjs?

Has anyone started work on a Yjs-backed store for Svelte[1]?

I’m thinking about ways to combine Yjs’ reactivity with Svelte’s simple “subscribe” API for its stores. I’d love to learn from others who’ve tried & failed, or learned anything along the way. I suspect it wouldn’t be too hard, but I could be wrong :slight_smile:

– Duane

[1] https://svelte.dev/ For those who don’t know about Svelte, it’s a beautiful way to compile javascript, CSS, and HTML down to reactive javascript. It plays a similar role as React, but IMO it does so in a more elegant way–I find it much easier to start with big pieces and then break them down into smaller ones, and the reactive stores are built in a very practical and minimalist way (so there’s much less to learn than, say, Redux or other glue pieces for React).

1 Like

I think this would be a very interesting project!

I once built a redux alternative based on Yjs (unpublished). In another project I hooked up Yjs to Angular (Angular v1, it was a horrible experience). Generally, Yjs plays nicely with web frameworks once you created some kind of abstraction around it. It would be awesome to start a generic framework integration!

1 Like

Interesting, I’ve been mulling over the possibility of abstracting the Yjs data types away from React and providing a state manager which can be passed arbitrary immutable state data… setState would send new state up to server/swarm and Yjs would call setState and cause a re-render when state changes are received?

Not exactly sure about the idea though. Perhaps it should provide sensible defaults but allow the user to take control of the Yjs data structure if necessary? I have no idea what that API would look like.

@canadaduane Did awesome work on the Svelte integration: https://github.com/relm-us/svelt-yjs

There is also https://github.com/tandem-pt/zustand-yjs - a state manager for React applications.

It would be interesting to build a general abstraction for immutable application state that frameworks like React & Svelte could consume.

1 Like