A React renderer for PlayCanvas – build interactive 3D applications using React's declarative paradigm.
npm install @playcanvas/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.
@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.
- 🎭 Simple Scene API
- ⏳ Suspenseful Asset loading
- ️👆 Pointer Events
- 🛠️ Physics out of the box
- ⚡ Script component
- 🏗️ Entity Component System
⚡ Start building in minutes with our Getting Started guide.
Create a new @playcanvas/react project and follow the instructions:
``bash`
npx create playcanvas@latest -t react-t
Or install in an existing project with your favorite package manager:
npm
`bash`
npm install @playcanvas/react
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à! ✨
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.
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.
Every component comes with MDC rules for autocompletion, documentation, and AI integration — ready for use in tools like Cursor or Windsurf.
`bash`
mkdir -p .cursor/rules && curl -s https://developer.playcanvas.com/user-manual/playcanvas-react/rules -o .cursor/rules/playcanvas-react.mdc
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.
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: