Spacetimedb Client Typescript

Use this skill for TypeScript and JavaScript client implementation.

Core TypeScript patterns

Generate bindings into the client source tree, then import generated names from that path:

spacetime generate --lang typescript --out-dir client/src/module_bindings --module-path spacetimedb

import { DbConnection, tables } from "./module_bindings";

const conn = DbConnection.builder()
  .withUri("ws://localhost:3000")
  .withDatabaseName("my-database")
  .onConnect((ctx, identity, token) => {
    console.log("Connected", identity.toHexString());
    ctx.subscriptionBuilder().subscribe(tables.user);
  })
  .onConnectError((_ctx, err) => console.error(err))
  .onDisconnect(() => console.log("Disconnected"))
  .build();

Query and cache rules

• Prefer generated query builders: tables.user, tables.user.where((u) => u.online.eq(true)), and arrays of table refs.
• Use raw SQL subscriptions only for advanced cases that the query builder cannot express.
• subscribeToAllTables() cannot be canceled after it is initiated; use specific subscriptions for lifecycle control.
• Row callbacks (onInsert, onDelete, onUpdate) run for rows entering/leaving/updating the local cache, including subscription application/removal.
• Use generated reducers from the binding; method names and argument shape come from generated code.
• For React, pass a DbConnection.builder() to SpacetimeDBProvider without calling .build(). Use useTable(tables.foo) and useReducer(reducers.foo) for reactive data and calls.
• @clockworklabs/spacetimedb-sdk is deprecated; use the spacetimedb package with CLI 1.4.0 or later.

Reference map

Guidance

• Use generated binding names from the actual project when available; examples in the reference are patterns, not guaranteed local identifiers.
• Keep subscription setup, cache reads, reducer observations, and reducer calls in the order shown by the SDK reference.
• Route framework bootstrapping back to spacetimedb-quickstarts when project setup is the main task.