mcpField
S
spacetimedb-client-typescript

spacetimedb-client-typescript

github.com/danmossaDevelopment2164 installsUpdated 19w ago
Repository

About spacetimedb-client-typescript

A skill for implementing SpacetimeDB clients in TypeScript and JavaScript. It covers generated bindings, subscriptions, reducers, and React usage.

Key features

  1. 01Generated TypeScript bindings
  2. 02Query builder and subscriptions
  3. 03Reducer usage
  4. 04React provider and hooks
  5. 05SDK package migration guidance

Use cases

  1. 01Building a TypeScript or JavaScript client
  2. 02Subscribing to table data with lifecycle control
  3. 03Using SpacetimeDB data and reducers in React

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/danmossa/spacetimedb-skills --skill spacetimedb-client-typescript

After installing, type/spacetimedb-client-typescriptin Claude Code to confirm it loaded.

Bundled filesreferences/clients-typescript.md

Details

From the project README

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

NeedOpen
TypeScript SDK API and framework integrationsreferences/clients-typescript.md

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.

Comments

Markdown supported