import { InstallCardLink } from "@site/src/components/InstallCardLink"; import { StepByStep, Step, StepText, StepCode } from "@site/src/components/Steps";

Get a SpacetimeDB React app running in under 5 minutes.

Prerequisites

Node.js 18+ installed
SpacetimeDB CLI installed

<StepByStep> <Step title="Create your project"> <StepText> Run the `spacetime dev` command to create a new project with a SpacetimeDB module and React client.

  This will start the local SpacetimeDB server, publish your module, generate TypeScript bindings, and start the React development server.
</StepText>
<StepCode>

bash

spacetime dev --template react-ts my-spacetime-app

</StepCode>

</Step> <Step title="Open your app"> <StepText> Navigate to [http://localhost:5173](http://localhost:5173) to see your app running.

  The template includes a basic React app connected to SpacetimeDB.
</StepText>

</Step> <Step title="Explore the project structure"> <StepText> Your project contains both server and client code.

  Edit `spacetimedb/src/index.ts` to add tables and reducers. Edit `client/src/App.tsx` to build your UI.
</StepText>
<StepCode>

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

</StepCode>

</Step> <Step title="Understand tables and reducers"> <StepText> 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 `say_hello` to greet everyone.

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

typescript

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

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

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

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

</StepCode>

</Step> <Step title="Test with the CLI"> <StepText> Use the SpacetimeDB CLI to call reducers and query your data directly. </StepText> <StepCode> ```bash # Call the add reducer to insert a person spacetime call <database-name> add Alice

Query the person table

spacetime sql <database-name> "SELECT * FROM person" name

"Alice"

Call say_hello to greet everyone

spacetime call <database-name> say_hello

View the module logs

spacetime logs <database-name> 2025-01-13T12:00:00.000000Z INFO: Hello, Alice! 2025-01-13T12:00:00.000000Z INFO: Hello, World!

    </StepCode>
  </Step>
</StepByStep>

## Next steps

- See the [Chat App Tutorial](../00300-tutorials/00100-chat-app.md) for a complete example
- Read the [TypeScript SDK Reference](../../00200-core-concepts/00600-client-sdk-languages/00700-typescript-reference.md) for detailed API docs