@playcanvas/react


@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.

$3

- 🎭 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.

$3

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

``bash
npx create playcanvas@latest -t react-t
`

$3

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

npm
`bash
npm install @playcanvas/react
`

$3

Here's how you render a sphere.

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

export function AssetViewer() {
return (







);
};
`

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.

$3

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

$3

To install rules for PlayCanvas Blocks:

`bash
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

If you want to build the repo from scratch, check out the following. The monorepo is split into 3 main packages:

- @playcanvas/react - This contains the main react library
- @playcanvas/blocks - High level React components for common 3D use cases
- @playcanvas/docs - The Documentation site.

If you want to run this entire project locally, including docs just npm install and npm run dev from the root of the monorepo. This will install and build all the local dependencies and run a local webserver of the docs.

You can make changes to either the react or blocks lib and build them locally by doing npm run build:lib or npm run build:blocks` respectively.

All contributions are welcome :heart: