Collaborative Valtio state
npm install valtio-y
Two-way sync between Valtio proxies and Yjs CRDTs. Build collaborative apps with automatic conflict resolution and offline support—just mutate objects naturally.
``typescript`
state.todos.push({ text: "Buy milk", done: false });
state.users[0].name = "Alice";
// Automatically syncs across all connected users
Open any demo in multiple browser tabs and watch them sync in real-time:
🎮 Minecraft Clone - Simple showcase inspired by Minecraft. Lets multiple users place and remove blocks in real time using Three.js and valtio-y.
🎨 Whiteboard - Collaborative drawing with shapes, colors, and real-time cursors. Google Docs for drawing.
📝 Sticky Notes - Production-ready app running on Cloudflare Workers (this is real infrastructure, not a demo server).
✅ Todos App - Classic collaborative todo list. Real-time updates, no refresh needed.
🧪 Simple Demo – Best for understanding the basic sync patterns (objects, arrays, primitives); other demos above are more production-focused.
Create a synchronized proxy and mutate it like any normal object. Changes automatically sync across clients.
`js
import * as Y from "yjs";
import { createYjsProxy } from "valtio-y";
// Create a Yjs document
const ydoc = new Y.Doc();
// Create a synchronized proxy
const { proxy: state } = createYjsProxy(ydoc, {
getRoot: (doc) => doc.getMap("root"),
});
// Mutate state like a normal object
state.text = "hello";
state.count = 0;
// Nested objects work too
state.user = { name: "Alice", age: 30 };
state.user.age = 31;
// Arrays work naturally
state.todos = [{ text: "Learn valtio-y", done: false }];
state.todos.push({ text: "Build something cool", done: false });
state.todos[0].done = true;
`
That's it! State is now synchronized via Yjs. Add a provider to sync across clients.
`bashnpm
npm install valtio-y valtio yjs
React Integration
Use Valtio's
hook to automatically re-render components when data changes:`jsx
import { useSnapshot } from "valtio/react";function TodoList() {
const snap = useSnapshot(state);
return (
{snap.todos.map((todo, i) => (
checked={todo.done}
onChange={() => (state.todos[i].done = !state.todos[i].done)}
/>
{todo.text}
))}
);
}
`Key principle: Read from the snapshot (
), mutate the proxy (state).valtio-y works with any framework that Valtio supports: React, Vue, Svelte, Solid, and vanilla JavaScript.
For optimizing large lists with thousands of items, see the Performance Guide.
Note for text inputs: When using controlled text inputs (like
or