Files
Muhammad Amin Saffari Taheri d16f824217 Add SolidJS integration with docs quickstart (#5052)
# Description of Changes

This PR adds support for Solid.
Related issue: https://github.com/clockworklabs/SpacetimeDB/issues/4820

The initial implementation was with an LLM, since Solid and React are
very similar. Then I improved on it.
The docs though are completely written by the LLM, I just read through
them once to make sure there aren't any problems.

# API and ABI breaking changes

There are no API or ABI changes. Just added support for Solid.

# Expected complexity level and risk

I'd say around 1 or 2. I haven't tested it too much except for the
example that I added.

# Testing

I'll be testing it more with the test app I'm planing to build.
- [ ] I've added the test solid router similar to test react router, and
it was working, but it'll be nice if someone else can verify as well.
- [ ] I'll be testing it more with the test app I'm planing to build

---------

Co-authored-by: Tyler Cloutier <cloutiertyler@users.noreply.github.com>
Co-authored-by: clockwork-labs-bot <clockwork-labs-bot@users.noreply.github.com>
2026-06-03 22:23:36 +00:00

2.8 KiB

Get a SpacetimeDB SolidJS app running in under 5 minutes.

Prerequisites

Install the SpacetimeDB CLI before continuing.


Create your project

Run the spacetime dev command to create a new project with a SpacetimeDB module and SolidJS client.

This will start the local SpacetimeDB server, publish your module, generate TypeScript bindings, and start the SolidJS development server.

spacetime dev --template solid-ts

Open your app

Navigate to http://localhost:5173 to see your app running.

The template includes a basic SolidJS app connected to SpacetimeDB.

Explore the project structure

Your project contains both server and client code.

Edit spacetimedb/src/index.ts to add tables and reducers. Edit src/App.tsx to build your UI.

my-spacetime-app/
├── spacetimedb/          # Your SpacetimeDB module
│   └── src/
│       └── index.ts      # Server-side logic
├── src/                  # SolidJS frontend
│   ├── App.tsx
│   └── module_bindings/  # Auto-generated types
└── package.json

Understand tables and reducers

Open spacetimedb/src/index.ts to see the module code. The template includes a person table and two reducers: add to insert a person, and sayHello to greet everyone.

Tables store your data. Reducers are functions that modify data — they're the only way to write to the database.

import { schema, table, t } from 'spacetimedb/server';

const spacetimedb = schema({
  person: table(
    { public: true },
    {
      name: t.string(),
    }
  ),
});
export default spacetimedb;

export const add = spacetimedb.reducer(
  { name: t.string() },
  (ctx, { name }) => {
    ctx.db.person.insert({ name });
  }
);

export const sayHello = spacetimedb.reducer(ctx => {
  for (const person of ctx.db.person.iter()) {
    console.info(`Hello, ${person.name}!`);
  }
  console.info('Hello, World!');
});

Test with the CLI

Open a new terminal and navigate to your project directory. Then use the SpacetimeDB CLI to call reducers and query your data directly.

cd my-spacetime-app

# Call the add reducer to insert a person
spacetime call add Alice

# Query the person table
spacetime sql "SELECT * FROM person"
 name
---------
 "Alice"

# Call sayHello to greet everyone
spacetime call say_hello

# View the module logs
spacetime logs
2025-01-13T12:00:00.000000Z  INFO: Hello, Alice!
2025-01-13T12:00:00.000Z  INFO: Hello, World!

Next steps