Skip to main content

PlayCanvas Developer Site

Build interactive 3D for the web

Guides, tutorials, examples and API references for the PlayCanvas Engine, Editor, React, Web Components, SuperSplat and SplatTransform.

Start building

The PlayCanvas Editor with a chess scene open in the viewport

PlayCanvas Editor

Build visually

Assemble scenes, add scripts and publish from a collaborative editor that runs in your browser. There is nothing to install.

Create your first app5 minEditor tutorials
npm create playcanvas@latest

create-playcanvas

Build with code

Scaffold a Vite and TypeScript project for the Engine, React or Web Components from one of 12 runnable starters.

Create your first project

Or set up by hand: Engine · React · Web Components

A Gaussian splat of a honeybee, published on superspl.at

SuperSplat

Publish Gaussian splats

Clean up a splat capture in your browser, publish it to superspl.at and share it with anyone, on any device.

Publish your first splat10 minSplats in your own app

Explore the platform

From the engine at its core to the tools built on it, every product has its own guide.

Engine

The open-source engine every other product is built on, rendering with WebGL2 or WebGPU. Use it from npm or a CDN.

Editor

A browser-based, collaborative editor for building scenes, managing assets and publishing apps.

React

Build scenes declaratively from React components and hooks with @playcanvas/react.

Web Components

Build scenes in plain HTML with <pc-*> custom elements. No build step required.

SuperSplat

Clean up, publish and share 3D Gaussian splats, then curate them in Studio and embed them anywhere.

SplatTransform

A CLI and library that converts, filters and merges splat files and generates streamed LODs.

Core concepts

These topics apply however you build: in the Editor or with the Engine, React or Web Components.

Entity Component SystemEntities, components and the scene hierarchy.ScriptingAdd behavior with ESM scripts and attributes.AssetsLoad, preload and unload models, textures and more.GraphicsCameras, lighting, materials, shaders and post effects.Gaussian SplattingCapture, render and build apps with 3D Gaussian splats.AnimationState graphs, blending, layer masks and events.PhysicsRigid bodies, collisions, triggers, joints and ray casts.User InterfaceScreens, elements, text, buttons and scroll views.2DSprites, 9-slicing and texture packing.XRImmersive VR and AR experiences with WebXR.OptimizationProfile and speed up loading and rendering.Browse the User Manual

Learn by example

Run live examples, read their source and adapt them to your own project.

The Engine Examples browser running a clustered area lights example beside its source codeEngine ExamplesHundreds of live examples with full source, from rendering and physics to splats and XR.A grid of Editor tutorial thumbnailsEditor TutorialsStep-by-step guides to building games and interactive apps in the Editor.Orange and white spheres and capsules tumbling in a physics simulationReact ExamplesModel viewers, physics, motion and text, built with @playcanvas/react.A silver sports car above a row of paint swatchesWeb Components ExamplesLive HTML pages to explore, from a first scene to complete showcases.

API reference

Build with AI

Give your coding agent PlayCanvas know-how. Skills, the Editor MCP server and agent-ready docs help Claude Code, Codex, Cursor and other agents build and verify PlayCanvas apps.

npx skills add playcanvas/skills

Join the community

Get help, share what you make and keep up with what is new.

DiscordChat with the PlayCanvas team and community.ForumSearch past answers and ask detailed questions.GitHubStar the repositories, report issues and contribute.BlogRelease notes, tutorials and news.