PlayCanvas Web Components

| User Manual | API Reference | Examples | Blog | Forum |

PlayCanvas Web Components are a set of custom HTML elements for building 3D interactive web apps. Using the declarative nature of HTML makes it both easy and fun to incorporate 3D into your website. Check out this simple example:

<!-- A lit sphere -->
<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>

Examples

Explore the PlayCanvas Web Components examples gallery.

Getting Started

The PlayCanvas Engine is a peer dependency, so your page needs an import map that tells the browser where to find both packages.

CDN (no install, no build step) — load both from jsDelivr:

<script type="importmap">
    {
        "imports": {
            "playcanvas": "https://cdn.jsdelivr.net/npm/playcanvas@latest/build/playcanvas.mjs",
            "@playcanvas/web-components": "https://cdn.jsdelivr.net/npm/@playcanvas/web-components@latest/dist/pwc.min.mjs"
        }
    }
</script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@playcanvas/web-components@latest/dist/pwc.min.mjs"></script>

npm — for projects with a package.json, dev server or bundler:

npm install playcanvas @playcanvas/web-components

Then point the import map at the installed packages:

<script type="importmap">
    {
        "imports": {
            "playcanvas": "/node_modules/playcanvas/build/playcanvas.mjs",
            "@playcanvas/web-components": "/node_modules/@playcanvas/web-components/dist/pwc.mjs"
        }
    }
</script>
<script type="module" src="/node_modules/@playcanvas/web-components/dist/pwc.mjs"></script>

New project — scaffold a Vite and TypeScript app with one of 12 runnable starters:

npm create playcanvas@latest my-app -- -f web-components

The Getting Started Guide walks through a complete first page, version pinning and bundler setups.

Editor Support

The package ships a Custom Elements Manifest, which editors use to offer tag and attribute completions, valid attribute values and hover documentation when authoring HTML.

VS Code — add the following to your workspace .vscode/settings.json:

{
  "html.customData": [
    "./node_modules/@playcanvas/web-components/dist/vscode.html-custom-data.json"
  ]
}

JetBrains IDEs (WebStorm, IntelliJ IDEA) — no setup required. The IDE discovers the bundled web-types.json automatically.

Other tooling — the manifest itself is at @playcanvas/web-components/dist/custom-elements.json and is declared in the package's customElements field, which is how tools such as lit-analyzer and Storybook locate it.

Development

Setting Up Local Development

1. Clone the repository:

   git clone https://github.com/playcanvas/web-components.git
   cd web-components

2. Install dependencies:

   npm install

3. Build the library in watch mode and start the development server:

   npm run dev

4. Open http://localhost:3000/examples/ in your browser to see the examples.

Building

To build the library:

npm run build

The built files will be available in the dist directory.

API Documentation

To generate API documentation:

npm run docs

The documentation will be generated in the docs directory.