Home
Getting Started

Quick start

Create a renderer-agnostic game definition and attach it to React Three Fiber.

Install the umbrella package and the peer dependencies for the renderer you use.

pnpm add strata-game-library react react-dom three @react-three/fiber @react-three/drei

Define the game in pure TypeScript, then render it through the optional React Three Fiber adapter.

import { createRPGGame } from "strata-game-library";
import { StrataGame, Water } from "strata-game-library/r3f";

const game = createRPGGame({
  name: "River Crossing",
  version: "1.0.0",
  world: {
    regions: {
      meadow: { name: "Meadow", center: [0, 0, 0], radius: 80 },
    },
    connections: [],
  },
  scenes: {
    meadow: { id: "meadow", render: () => <Water size={200} depth={20} /> },
  },
  initialScene: "meadow",
  modes: { exploration: { systems: [] } },
  initialState: { currentRegion: "meadow", player: { name: "Scout" } },
});

export function App() {
  return <StrataGame game={game} />;
}

The root package stays renderer-independent. Import integrations deliberately from strata-game-library/r3f, /reactylon, /pixi, /astro, /capacitor, /react-native, or /yuka. See the adapter guide for peer-install and architecture choices.

Next, read the architecture and package reference before selecting a lower-level package.