lib

@playcanvas/react

⚡ A full-featured library for interactive 3D in React.

@playcanvas/react is a thin wrapper around PlayCanvas - a batteries included library for building interactive 3D content in React. Designed to get you up and running fast.

Why PlayCanvas React?

@playcanvas/react is designed to get you building fast — without the usual mess of wiring together separate libraries for physics, input or asset management. It's a complete, batteries-included toolkit for interactive 3D experiences in React.

It's built around PlayCanvas - a battle-tested, real-time 3D engine and ships with powerful built-in features out of the box.

Features

• 🎭 Simple Scene API
• ⏳ Suspenseful Asset loading
• ️👆 Pointer Events
• 🛠️ Physics out of the box
• ⚡ Script component
• 🏗️ Entity Component System

Getting Started

⚡ Start building in minutes with our Getting Started guide.

Quick Start

Create a new @playcanvas/react project and follow the instructions:

npx create playcanvas@latest -t react-t

Manual Installation

Or install in an existing project with your favorite package manager:

npm

npm install @playcanvas/react

Show me the code

Here's how you render a sphere.

import { Application, Entity } from '@playcanvas/react';
import { Camera, Render } from '@playcanvas/react/components';
import { OrbitControls } from '@playcanvas/react/scripts';

export function AssetViewer() {
    return (
        <Application>
            <Entity position={[0, 2, 0]}>
                <Camera />
                <OrbitControls />
            </Entity>
            <Render type="sphere" />
        </Application>
    );
}

Et voilà! ✨

Ready to build something?

Now you've got the tools you're ready to start building. Start with the Getting Started for a step-by-step intro, or jump straight into the Playground to explore real examples in action.

• Hello World
• Loading a 3D model
• Interaction
• Physics
• Splats

You can also jump straight into the docs or api.

Who’s building with @playcanvas/react?

Developers and studios are already using @playcanvas/react in production

• ⚡ Snap AI uses @playcanvas/react to build real-time 3D interfaces inside their next-gen tools.
• ✨ Your project here? Submit a PR and we’ll feature it below.

AI Ready

Every component comes with MDC rules for autocompletion, documentation, and AI integration — ready for use in tools like Cursor or Windsurf.

Install AI Rules for @playcanvas/react

mkdir -p .cursor/rules && curl -s https://developer.playcanvas.com/user-manual/playcanvas-react/rules -o .cursor/rules/playcanvas-react.mdc

Install AI Rules for Blocks

To install rules for PlayCanvas Blocks:

npx shadcn@latest add https://developer.playcanvas.com/user-manual/playcanvas-react/r/blocks.json

This installs the rules for the registry and for @playcanvas/react and adds them to your project.

Grab the rules manually here if you prefer.

Contributing

The monorepo is split into 2 packages:

• @playcanvas/react - The main React library
• @playcanvas/blocks - High-level React components for common 3D use cases

To get set up, run pnpm install from the root of the monorepo. You can then build each package with pnpm run build:lib or pnpm run build:blocks, and run the tests with pnpm test.

All contributions are welcome ❤️