Show HN: SyncedStore CRDT – build multiplayer collaborative apps for React / Vue
1–10 of 27 posts
Re: Show HN: SyncedStore CRDT – build multiplayer collaborative apps for React / Vue
#2Hi HN!
With CRDTs (Conflict-free Replicated Data Types) becoming more mature and getting more attention lately, I decided to dive in and use it as the basis for a new project. I love the technology, and how it enables me to create Google Docs style collaborative apps, that seamlessly sync data across users / devices but also work offline.
However, I also found that it's not yet trivial to build! This is why I started building a library that makes developing multiplayer apps super-simple, with a very minimum API surface. (basically, you can just modify plain javascript objects and changes are shared across users).
I'm now excited to share SyncedStore - and looking forward to your feedback :)
It's designed specifically for React, Vue, Svelte but also works with plain JS. By using Javascript Proxies, the data store looks like plain javascript objects, except that they'll now sync automatically across devices / users!
Re: Show HN: SyncedStore CRDT – build multiplayer collaborative apps for React / Vue
#3So cool to see libraries like yours coming out! (am in love with Y.js)
Re: Show HN: SyncedStore CRDT – build multiplayer collaborative apps for React / Vue
#4Awesome!
I assume you’ve been using this in another project?
How did you handle/implement undo-redo?
Re: Show HN: SyncedStore CRDT – build multiplayer collaborative apps for React / Vue
#5This is awesome to see. I have gotten interested in CRDTs in the last couple years due to them being used in the Elixir/Phoenix ecosystem.
One question though, how do you integrate a backend into your library? I don't see anything mentioned in the docs.
Re: Show HN: SyncedStore CRDT – build multiplayer collaborative apps for React / Vue
#6This is awesome to see. I have gotten interested in CRDTs in the last couple years due to them being used in the Elixir/Phoenix ecosystem. One question though, how do you integrate a backend into your library? I don't see anything mentioned in the docs.
Thanks! As it builds on Yjs (many kudos to Kevin Jahns for creating that awesome project + community), any backend that's compatible with Yjs works.
The demos work based on WebRTC / BroadcastChannel (for the same browser / device), but I've listed different backends you can use here: https://syncedstore.org/docs/sync-providers
Re: Show HN: SyncedStore CRDT – build multiplayer collaborative apps for React / Vue
#7FYI, the examples don't work for me in Brave browser on linux:
React example: "/App.tsx: Cannot read property 'getItem' of null (2:0)"
Vue example: "file:///src/store.ts: Cannot read property 'getItem' of null (1:0)"
Works fine in Chromium and Firefox though, so not sure what's up.
Re: Show HN: SyncedStore CRDT – build multiplayer collaborative apps for React / Vue
#8FYI, the examples don't work for me in Brave browser on linux: React example: "/App.tsx: Cannot read property 'getItem' of null (2:0)" Vue example: "file:///src/store.ts: Cannot read property 'getItem' of null (1:0)" Works fine in Chromium and Firefox though, so not sure what's up.
Re: Show HN: SyncedStore CRDT – build multiplayer collaborative apps for React / Vue
#9Love this! Thanks for sharing, I have some amazing use cases for this type of work and I can't wait to dig into the code to learn more. The future for CRDT is indeed hot right now and everyone wants it into their app, Google paved the way and now other big names, like Figma, Invision etc are getting on this hard!
Re: Show HN: SyncedStore CRDT – build multiplayer collaborative apps for React / Vue
#10Wow this is so awesome!
How/where does the data get saved for later? I'm guessing from the example, you don't need a database? E.g. I can just save the data to a document database, and next time someone works on it, just sync with the database? Or do I not need it at all because it's stored on the browser? And how would the information be associated with accounts, if someone wanted that feature?
Also curious how/where the demo site is deployed (guessing Vercel doesn't work since they don't seem to support websockets? I see that Hocuspocus is mentioned — is that required as a backend to make it all work?
Sorry I'm new to all of this and it sounds like magic, but I'd LOVE to learn how to implement this; especially on something like Vercel, if possible