quickstart-frontend.mdx

title	React
icon	react

npm install rivetkit

import { actor, setup } from "rivetkit";

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

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

TODO: important registry name

npx rivet-cli dev src/registry.ts

TODO: If you want to set up a custom backend server, see other quickstart

import { useState } from "react";
import { createClient, createRivetKit } from "@rivetkit/react";
import type { Registry } from "../backend/registry";

const client = createClient<Registry>(`http://localhost:6420/registry`);
const { useActor } = createRivetKit(client);

function App() {
	const [count, setCount] = useState(0);
	const [counterName, setCounterName] = useState("test-counter");

	const counter = useActor({
		name: "counter",
		key: [counterName],
	});

	counter.useEvent("newCount", (x: number) => setCount(x));

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

	return (
		<div>
			<h1>Counter: {count}</h1>
			<input
				type="text"
				value={counterName}
				onChange={(e) => setCounterName(e.target.value)}
				placeholder="Counter name"
			/>
			<button onClick={increment}>Increment</button>
		</div>
	);
}

export default App;

npx rivet-cli deploy src/registry.ts --frontend

Your endpoint is now TODO

Test it with TODO

TODO

Configuration options

Configure storage driver

TODO: See backend

Add your own endpoints

TODO: See backend & integrate with frontend

Run standalone server (no dev CLI)

TODO: See backend

Next Steps