JSPM

@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 playcanvas-react.vercel.app/new template.

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://playcanvas-react.vercel.app/rules -o .cursor/rules/playcanvas-react.mdc

Install AI Rules for Blocks

To install rules for PlayCanvas Blocks:

npx shadcn@latest add https://playcanvas-react.vercel.app/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 ❤️