\n \n\n## Live Examples\n\n**Open any demo in multiple browser tabs and watch them sync in real-time:**\n\n🎮 **[Minecraft Clone](https://valtio-y-minecraft.agcty.workers.dev)** - Simple showcase inspired by Minecraft. Lets multiple users place and remove blocks in real time using Three.js and valtio-y.\n\n🎨 **[Whiteboard](https://valtio-y-whiteboard.agcty.workers.dev)** - Collaborative drawing with shapes, colors, and real-time cursors. Google Docs for drawing.\n\n📝 **[Sticky Notes](https://valtio-y-stickynotes.agcty.workers.dev/)** - Production-ready app running on Cloudflare Workers (this is real infrastructure, not a demo server).\n\n✅ **[Todos App](https://valtio-y-todos.agcty.workers.dev)** - Classic collaborative todo list. Real-time updates, no refresh needed.\n\n🧪 **[Simple Demo](https://valtio-y-simple.agcty.workers.dev/)** – Best for understanding the basic sync patterns (objects, arrays, primitives); other demos above are more production-focused.\n\n## Quick Start\n\nCreate a synchronized proxy and mutate it like any normal object. Changes automatically sync across clients.\n\n```js\nimport * as Y from \"yjs\";\nimport { createYjsProxy } from \"valtio-y\";\n\n// Create a Yjs document\nconst ydoc = new Y.Doc();\n\n// Create a synchronized proxy\nconst { proxy: state } = createYjsProxy(ydoc, {\n getRoot: (doc) => doc.getMap(\"root\"),\n});\n\n// Mutate state like a normal object\nstate.text = \"hello\";\nstate.count = 0;\n\n// Nested objects work too\nstate.user = { name: \"Alice\", age: 30 };\nstate.user.age = 31;\n\n// Arrays work naturally\nstate.todos = [{ text: \"Learn valtio-y\", done: false }];\nstate.todos.push({ text: \"Build something cool\", done: false });\nstate.todos[0].done = true;\n```\n\nThat's it! State is now synchronized via Yjs. Add a provider to sync across clients.\n\n## Installation\n\n```bash\n# npm\nnpm install valtio-y valtio yjs\n\n# pnpm\npnpm add valtio-y valtio yjs\n\n# bun\nbun add valtio-y valtio yjs\n```\n\n## React Integration\n\nUse Valtio's `useSnapshot` hook to automatically re-render components when data changes:\n\n```jsx\nimport { useSnapshot } from \"valtio/react\";\n\nfunction TodoList() {\n const snap = useSnapshot(state);\n\n return (\n
\n );\n}\n```\n\n**Key principle:** Read from the snapshot (`snap`), mutate the proxy (`state`).\n\nvaltio-y works with any framework that Valtio supports: React, Vue, Svelte, Solid, and vanilla JavaScript.\n\n**For optimizing large lists** with thousands of items, see the [Performance Guide](../guides/performance-guide.md#optimizing-lists).\n\n**Note for text inputs:** When using controlled text inputs (like `` or `
![\"Sticky](\"https://i.imgur.com/a36KJ2a.gif\")
\n \n