Skip to main content

PlayCanvas Web Components

PlayCanvas Web Components let you put real-time 3D on a web page with nothing but HTML. Each <pc-*> tag wraps a piece of the PlayCanvas Engine — an app, a scene, a camera, a light — so you compose interactive 3D scenes the same way you compose the rest of your page: with markup.

Drag to look around the meadow above. Its camera, sun, haze and sound are HTML elements, and so are the scripts that paint its sky and generate its terrain, trees and grass. It's one of 40+ live examples you can explore, complete with source code.

Get Started →Browse the Examples

Your First Scene​

This is a complete 3D scene. It is running right here in the page, and you can edit it: the preview re-runs as you type.

Live Example
<pc-app>
    <pc-scene>
        <pc-entity name="camera" position="0 0 3">
            <pc-camera></pc-camera>
        </pc-entity>
        <pc-entity name="light" rotation="45 45 0">
            <pc-light></pc-light>
        </pc-entity>
        <pc-entity name="ball">
            <pc-render type="sphere"></pc-render>
        </pc-entity>
    </pc-scene>
</pc-app>

<pc-app> is the canvas and <pc-scene> is the world inside it. Each <pc-entity> is an object with a position in that world, and the tags inside an entity give it abilities: this one is a camera, that one is a light, the third renders a sphere. Some things to try:

  • Change the ball's type="sphere" to "cone", "capsule" or "cylinder".
  • Tint the light with <pc-light color="orange">.
  • Paint the background with <pc-camera clear-color="midnightblue">.
  • Duplicate the ball entity and move the copy aside with position="1.2 0 0".

To put a scene like this on a page of your own, add the two <script> tags that load the library. Getting Started has the complete file.

What You Can Build​

The same tags scale from one sphere to complete, polished experiences. Each of these showcases is a single HTML page: open it to explore it live, read its source and remix it on StackBlitz.

A silver sports car above a row of paint swatches

Car Configurator

Pick a paint and watch a sports car change color.

A camera drone beside a panel with Explode all and Reset buttons

Product Viewer

Hover a drone's parts to highlight them, and click to pull them out of the assembly.

The Sun beside a panel of facts about it

Solar System

Scroll the page to travel from the Sun out past eight worlds.

A Gaussian splat capture of a marble angel in a domed hall

Gaussian Splats

Render a photoreal 3D capture with the <pc-gsplat> tag.

An animated character standing in a stone courtyard under great arches

Third Person Controller

Walk, run and jump through a courtyard, with physics and blended animation.

A lamp lighting the mechanism behind a clock face in a dusty belfry

Clock Tower

A clock mechanism set to your local time, with dusty light and chimes.

The examples browser has more, including webcam AR, vehicles and ragdolls, particles, positional sound, and 2D and 3D user interfaces.

Why PlayCanvas Web Components?​

  • HTML is the whole API. Build complete, interactive scenes in markup, with no build step and no engine boilerplate. Reach for JavaScript only when you want custom behavior.
  • Every attribute is live. Change an attribute from JavaScript, from a framework or straight from your browser's dev tools, and the scene updates instantly. See Attributes for the shared conventions.
  • The full engine underneath. This is not a simplified toy layer. The same PlayCanvas Engine that powers thousands of web applications does the rendering, WebGPU-first with automatic fallback to WebGL 2. When you need more than the tags offer, every element hands you its engine object.
  • A web standard, not a framework. The components are Custom Elements, so they work in a plain HTML page or alongside any framework that renders to the DOM. All they ask of a browser is WebGL 2 or WebGPU, ES Modules and Custom Elements, all standard in current Chrome, Edge, Firefox and Safari.
  • Your editor knows every tag. The package ships a Custom Elements Manifest, so VS Code and JetBrains IDEs complete tags and attributes and show their documentation as you type.
  • Open source and MIT licensed. Developed in the open on GitHub, free for personal and commercial projects alike, and contributions are welcome.

Where Do You Want to Start?​

🚀 I'm new here

Load the library from a CDN, or scaffold a project with npm create playcanvas, and render your first page in minutes.

Getting Started →

📦 I have a 3D model

Load a glTF or GLB file, see what is inside it, and adjust its parts from markup.

Loading Models →

✨ I have a Gaussian splat

Build a splat viewer page step by step: load a capture, add a camera you can orbit, and tune the app for splat rendering.

Your First Splat App →

🧩 I want to make it interactive

Attach scripts to entities for motion and gameplay, configure them from markup, and reuse the ready-made scripts that ship with the engine.

Adding Behavior with Scripts →
Using React?

Web Components work anywhere HTML does, React included. If you would rather write your scene as React components, with hooks and JSX, see PlayCanvas React.

In This Section​