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.

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.

Find additional examples in the Examples.

Features

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

And lots more. Check out the API Reference for more.

What does it look like?

Less talking, more doing. Here’s a simple example of a 3D app in React.

import { Application, Entity } from '@playcanvas/react'
import { Camera } from "@playcanvas/react/components"
import { OrbitControls } from "@playcanvas/react/scripts"
 
const App = () => (
  <Application>
    <Entity position={[0, 0, 4]}>
      <Camera clearColor="blue"/>
      <OrbitControls />
    </Entity>
    <Entity position={[0, 0, 0]}>
      <Render type="cube" />
    </Entity>
  </Application>
);

Getting started

The quickest way to get started is to run the following

pnpm create playcanvas -t react-ts

npm create playcanvas@latest -t react-ts

yarn create playcanvas -t react-ts

This will spin up a new project and dev environment and get you up and running in seconds.

Alternatively try the playcanvas-react.app/new  Stackblitz starter template.

Installing manually

If you already have a project setup you can install the library via npm.

pnpm add @playcanvas/react

npm install @playcanvas/react

npm install @playcanvas/react

Ready to build?

If you’re familiar with React but new to PlayCanvas and 3D in general, the best place to start is the Getting Started Guide. It will walk you through creating a simple app and explain the core concepts.

If you’re already using PlayCanvas, but new to React, it’s worth checking out the React docs  first, which provide a great introduction to the React ecosystem. From then you can jump into the API Reference.

You can learn more about PlayCanvas on the developer site  and through the tutorials . Similarly the React docs has a great tutorial section 

AI assisted editors

To get your IDE up to speed, run the following from the root of your project to install the latest MDC rules. Or grab them directly from playcanvas-react.app/rules .

mkdir -p .cursor/rules && curl -s https://playcanvas-react.vercel.app/rules -o .cursor/rules/playcanvas-react.mdc

mkdir -p .windsurf/rules && curl -s https://playcanvas-react.vercel.app/rules -o .windsurf/rules/playcanvas-react.mdc

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.
• GSplat Share  – Share your splats with optional time-limited and password-protected links.
• ✨ Your project here? Submit a PR  and we’ll feature it below.