@vuer-ai/vuer-rtc

CRDT-based real-time collaborative state management for 3D scenes.

Installation

pnpm add @vuer-ai/vuer-rtc

Quick Start

import { createGraph } from '@vuer-ai/vuer-rtc';

const store = createGraph({
  sessionId: 'my-session',
  onSend: (msg) => websocket.send(JSON.stringify(msg)),
});

// Edit (uncommitted, updates UI immediately)
store.edit({
  otype: 'node.insert',
  key: 'scene',
  path: 'children',
  value: { key: 'cube', tag: 'Mesh', name: 'Cube' },
});

// Commit (sends to server as one message)
store.commit('Create cube');

// Receive from server
websocket.onmessage = (e) => store.receive(JSON.parse(e.data));

// Undo/redo (synced across all clients)
store.undo();
store.redo();

React Integration

import { GraphProvider, useGraph, useNode, useGraphActions } from '@vuer-ai/vuer-rtc/hooks';

function App() {
  return (
    <GraphProvider sessionId="my-session" onSend={sendToServer}>
      <Scene />
    </GraphProvider>
  );
}

function Scene() {
  const graph = useGraph();
  return (
    <>
      {Object.keys(graph.nodes).map(key => (
        <Node key={key} nodeKey={key} />
      ))}
    </>
  );
}

function Node({ nodeKey }: { nodeKey: string }) {
  const node = useNode(nodeKey);
  const { edit, commit } = useGraphActions();

  const onDrag = (delta: [number, number, number]) => {
    edit({ otype: 'vector3.add', key: nodeKey, path: 'position', value: delta });
  };

  const onDragEnd = () => {
    commit(`Move ${node?.name}`);
  };

  if (!node) return null;
  return <mesh position={node.position} onDrag={onDrag} onDragEnd={onDragEnd} />;
}

Operation Types

| Category | Operations | |----------|-----------| | Number | number.set, number.add, number.multiply, number.min, number.max | | Vector3 | vector3.set, vector3.add, vector3.multiply | | Quaternion | quaternion.set, quaternion.multiply | | Color | color.set, color.blend | | String | string.set, string.concat | | Boolean | boolean.set, boolean.or, boolean.and | | Array | array.set, array.push, array.union, array.remove | | Object | object.set, object.merge | | Node | node.insert, node.remove | | Meta | meta.undo, meta.redo |

Documentation

Full documentation: rtc.vuer.ai

License

MIT