{"id":14987510,"url":"https://github.com/joebobmiles/zustand-middleware-yjs","last_synced_at":"2025-04-06T04:12:03.809Z","repository":{"id":41828356,"uuid":"384152250","full_name":"joebobmiles/zustand-middleware-yjs","owner":"joebobmiles","description":"Zustand middleware that enables sharing of state between clients via Yjs.","archived":false,"fork":false,"pushed_at":"2024-08-14T17:48:28.000Z","size":795,"stargazers_count":119,"open_issues_count":8,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T02:07:31.320Z","etag":null,"topics":["crdt","decentralized","distributed","local-first","middleware","offline-first","p2p","peer-to-peer","realtime","shared-editing","state-mangement","yjs","zustand"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joebobmiles.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-08T14:30:32.000Z","updated_at":"2025-02-28T12:46:34.000Z","dependencies_parsed_at":"2024-02-18T18:43:57.366Z","dependency_job_id":"f8dab795-9e84-44f4-b48e-c46c725d1d1a","html_url":"https://github.com/joebobmiles/zustand-middleware-yjs","commit_stats":{"total_commits":280,"total_committers":3,"mean_commits":93.33333333333333,"dds":"0.11428571428571432","last_synced_commit":"be592180ad0a6c9cc15b29b27625111a7c05e45c"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joebobmiles%2Fzustand-middleware-yjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joebobmiles%2Fzustand-middleware-yjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joebobmiles%2Fzustand-middleware-yjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joebobmiles%2Fzustand-middleware-yjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joebobmiles","download_url":"https://codeload.github.com/joebobmiles/zustand-middleware-yjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247430872,"owners_count":20937874,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["crdt","decentralized","distributed","local-first","middleware","offline-first","p2p","peer-to-peer","realtime","shared-editing","state-mangement","yjs","zustand"],"created_at":"2024-09-24T14:14:51.360Z","updated_at":"2025-04-06T04:12:03.787Z","avatar_url":"https://github.com/joebobmiles.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Yjs Middleware for Zustand\n\nOne of the difficult things about using Yjs is that it's not easily integrated\nwith modern state management libraries in React. This middleware for Zustand\nsolves that problem by allowing a Zustand store to be turned into a CRDT, with\nthe store's state replicated to all peers.\n\nThis differs from the other Yjs and Zustand solution, `zustand-yjs` by allowing\nany Zustand store be turned into a CRDT. This contrasts with `zustand-yjs`'s\nsolution, which uses a Zustand store to collect shared types and access them\nthrough special hooks.\n\nBecause this solution is simply a middleware, it can also work anywhere Zustand\ncan be used. The vanilla Zustand `create()` function handles middleware exactly\nthe same as the React version. And not only that, but it can be composed with\nother middleware, such as Immer or Redux!\n\n## Example\n\n```tsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\n\nimport * as Y from \"yjs\";\nimport create from \"zustand\";\nimport yjs from \"zustand-middleware-yjs\";\n\n// Create a Y Doc to place our store in.\nconst ydoc = new Y.Doc();\n\n// Create the Zustand store.\nconst useSharedStore = create(\n  // Wrap the store creator with the Yjs middleware.\n  yjs(\n    // Provide the Y Doc and the name of the shared type that will be used\n    // to hold the store.\n    ydoc, \"shared\",\n          \n    // Create the store as you would normally.\n    (set) =\u003e\n      ({\n        count: 0,\n        increment: () =\u003e\n          set(\n            (state) =\u003e\n            ({\n              count: state.count + 1,\n            })\n          ),\n      })\n  )\n);\n\n// Use the shared store like you normally would any other Zustand store.\nconst App = () =\u003e\n{\n  const { count, increment } = useSharedStore((state) =\u003e\n    ({\n      count: state.count,\n      increment: state.increment\n    }));\n\n  return (\n    \u003c\u003e\n      \u003cp\u003ecount: {count}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e increment()}\u003e+\u003c/button\u003e\n    \u003c/\u003e\n  );\n};\n\nrender(\n  \u003cApp /\u003e,\n  document.getElementById(\"app-root\")\n);\n```\n\n## Caveats\n\n 1. The Yjs awareness protocol is not supported. At the moment, it is unclear\n    if the library is able to support Yjs protocols. This means that, for now,\n    support for the awareness protocol is not planned.\n      * This does not mean you cannot use awareness in your projects - see the\n        sister project [y-react](joebobmiles/y-react) for an example of using\n        awareness without the middleware.\n\n# License\n\nThis library is licensed under the MIT license:\n\n\u003e Copyright © 2021 Joseph R Miles\n\u003e \n\u003e Permission is hereby granted, free of charge, to any person obtaining a copy\n\u003e of this software and associated documentation files (the “Software”), to deal \n\u003e in the Software without restriction, including without limitation the rights\n\u003e to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n\u003e copies of the Software, and to permit persons to whom the Software is \n\u003e furnished to do so, subject to the following conditions:\n\u003e \n\u003e The above copyright notice and this permission notice shall be included in all\n\u003e copies or substantial portions of the Software.\n\u003e \n\u003e THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n\u003e IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n\u003e FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n\u003e AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n\u003e LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n\u003e OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n\u003e SOFTWARE. ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoebobmiles%2Fzustand-middleware-yjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoebobmiles%2Fzustand-middleware-yjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoebobmiles%2Fzustand-middleware-yjs/lists"}