React Quickstart - Rivet

import { Hosting } from "@/components/docs/Hosting"; import { ConfigurationOptions } from "@/components/docs/ConfigurationOptions";

Steps

If you're using an AI coding assistant (like Claude Code, Cursor, Windsurf, etc.), add Rivet skills for enhanced development assistance:

npx skills add rivet-dev/skills

</Step> <Step title="Install Dependencies">

npm install rivetkit @rivetkit/react

</Step> <Step title="Create Backend Actor and Start Server">

Create your actor registry on the backend and start the server:

import { actor, setup } from "rivetkit";

export const counter = actor({
	state: { count: 0 },
	actions: {
		increment: (c, x: number) => {
			c.state.count += x;
			c.broadcast("newCount", c.state.count);
			return c.state.count;
		},
	},
});

export const registry = setup({
	use: { counter },
});

registry.start();

</Step> <Step title="Create React Frontend">

Set up your React application:

<CodeGroup workspace> ```tsx Counter.tsx import { createRivetKit } from "@rivetkit/react"; import { useState } from "react"; import type { registry } from "./index";

const { useActor } = createRivetKit<typeof registry>("http://localhost:6420");

function Counter() { const [count, setCount] = useState(0);

// Get or create a counter actor for the key "my-counter"
const counter = useActor({
	name: "counter",
	key: ["my-counter"]
});

// Listen to realtime events
counter.useEvent("newCount", (x: number) => setCount(x));

const increment = async () => {
	// Call actions
	await counter.connection?.increment(1);
};

return (
	<div>
		<p>Count: {count}</p>
		<button onClick={increment}>Increment</button>
	</div>
);

}


```ts index.ts @hide
import { actor, setup } from "rivetkit";

export const counter = actor({
	state: { count: 0 },
	actions: {
		increment: (c, x: number) => {
			c.state.count += x;
			c.broadcast("newCount", c.state.count);
			return c.state.count;
		},
	},
});

export const registry = setup({
	use: { counter },
});

registry.start();

</CodeGroup>

For detailed information about the React client API, see the React Client API Reference.

</Step> <Step title="Setup Vite Configuration">

Configure Vite for development:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
  },
})

</Step> <Step title="Run Your Application">

Start both the backend and frontend:

Terminal 1: Start the backend

npx tsx --watch backend/index.ts

bun --watch backend/index.ts

deno run --allow-net --allow-read --allow-env --watch backend/index.ts

</CodeGroup>

Terminal 2: Start the frontend

npx vite

Open http://localhost:5173 in your browser. Try opening multiple tabs to see realtime sync in action.

</Step> <Step title="Deploy"> <Hosting /> </Step> </Steps>

Configuration Options