# PlayCanvas Web Components > `@playcanvas/web-components` builds PlayCanvas Engine scenes declaratively from custom HTML elements (``, ``, `` and so on), in plain HTML with no build step, plus a small JavaScript API for reaching the engine. The tag pages below are its attribute reference. Use this index for pages built from `` elements. The engine features the tags wrap, such as materials, lighting, physics, Gaussian splats and XR, work the same way underneath, and the [Engine](https://developer.playcanvas.com/user-manual/engine/llms.txt) index covers them. ## Rules - **Load the engine and the components through an import map** with entries for both, for example `"playcanvas": "https://cdn.jsdelivr.net/npm/playcanvas@latest/build/playcanvas.mjs"` and `"@playcanvas/web-components": "https://cdn.jsdelivr.net/npm/@playcanvas/web-components@latest/dist/pwc.min.mjs"`. The engine is a peer dependency and is never bundled into the components. - **The document structure is fixed**: `` holds the resources (``, `` and ``) as direct children, referenced by `id`, and a `` with the `` hierarchy. - **Component tags go directly inside the entity they add a component to**: a ``, `` or ``, with at most one tag of each kind per host. A tag names its engine component without the `pc-` prefix and hyphens: `` adds `entity.rigidbody`. - **Attribute values follow HTML conventions**: kebab-case names, space-separated vectors (`position="0 1 -3"`), colors as a CSS color name, a hex code or 3 or 4 numbers from 0 to 1, and bare booleans (`cast-shadows`). An absent attribute applies the engine default, and an invalid value logs a console warning and applies the default. Remove an attribute to reset it rather than setting it to an empty string. - **Look attributes up in the tag reference** instead of inferring their names from examples. - **Load models** by declaring the GLB as a `` and instancing it with ``, and reach inside a model with ``. - **Add behavior with engine `Script` classes**: load the module with ``, then attach it with ``, where `name` matches the class's `static scriptName`. Write update loops and per-entity behavior as scripts, not page scripts. - **Physics needs ammo.js**, declared as `` inside ``, which waits for it before starting. - **From JavaScript**, `import { whenReady } from '@playcanvas/web-components'` and `await whenReady('pc-app')` (or any element) before reading `.app`, `.entity` or `.component`, which are `null` until the element is ready. ## Guides - [PlayCanvas Web Components](https://developer.playcanvas.com/user-manual/web-components.md): The concepts, an overview of the tags, and a map of these docs. - [Getting Started](https://developer.playcanvas.com/user-manual/web-components/getting-started.md): Loading the components from a CDN or npm, the import map, and a first scene. - [Building a Scene](https://developer.playcanvas.com/user-manual/web-components/building-a-scene.md): A lit scene step by step: `pc-app`, `pc-scene`, a camera, a mesh and a light, and how the elements nest. - [Loading Models](https://developer.playcanvas.com/user-manual/web-components/loading-models.md): Loading a GLB with `pc-asset` and `pc-model`, listing its hierarchy with `hierarchy()`, and changing its nodes with `pc-node`. - [Attributes](https://developer.playcanvas.com/user-manual/web-components/attributes.md): How attribute values are parsed: defaults, booleans, numbers, enums, vectors, colors, and asset and material ids. - [Adding Behavior with Scripts](https://developer.playcanvas.com/user-manual/web-components/scripting.md): Attaching engine `Script` classes with `pc-script` and `pc-script-instance`, and setting their attributes. - [Programmatic Access](https://developer.playcanvas.com/user-manual/web-components/programmatic-access.md): Driving the engine from JavaScript: `whenReady`, the engine objects behind the elements, and pages with several apps. - [Reusable Scenes with Templates](https://developer.playcanvas.com/user-manual/web-components/templates.md): Declaring a subtree once in an HTML template and cloning it into live instances, like prefabs. - [XR Support](https://developer.playcanvas.com/user-manual/web-components/xr.md): WebXR with the engine's XR scripts: a camera rig with `xrSession`, and starting sessions from app events. ## Tag reference - [Tag Reference](https://developer.playcanvas.com/user-manual/web-components/tags.md): Every tag grouped by role, the document structure they form, and where each may be placed. - [pc-app](https://developer.playcanvas.com/user-manual/web-components/tags/pc-app.md): The root element: creates the application, with graphics options. - [pc-scene](https://developer.playcanvas.com/user-manual/web-components/tags/pc-scene.md): The scene inside `pc-app`, with fog, exposure and gravity. - [pc-entity](https://developer.playcanvas.com/user-manual/web-components/tags/pc-entity.md): Entities: names, transforms, hierarchy, and the component tags valid inside them. - [pc-asset](https://developer.playcanvas.com/user-manual/web-components/tags/pc-asset.md): Declares an asset to load by URL, with its type inferred from the extension and optional lazy loading. - [pc-material](https://developer.playcanvas.com/user-manual/web-components/tags/pc-material.md): A physically based material: color, metalness, gloss, opacity and texture maps. - [pc-model](https://developer.playcanvas.com/user-manual/web-components/tags/pc-model.md): Instances a GLB container asset, and hosts components and child entities on the entity it creates. - [pc-node](https://developer.playcanvas.com/user-manual/web-components/tags/pc-node.md): Binds to a node inside a loaded model to override its transform, state and tags, or add components to it. - [pc-camera](https://developer.playcanvas.com/user-manual/web-components/tags/pc-camera.md): Projection, field of view, clipping planes, clearing and tone mapping. - [pc-light](https://developer.playcanvas.com/user-manual/web-components/tags/pc-light.md): Directional, omni and spot lights: color, intensity and shadows. - [pc-render](https://developer.playcanvas.com/user-manual/web-components/tags/pc-render.md): Primitive shapes with a material and shadow settings. - [pc-sky](https://developer.playcanvas.com/user-manual/web-components/tags/pc-sky.md): A skybox from a texture asset, with box, dome or infinite projection and optional scene lighting. - [pc-gsplat](https://developer.playcanvas.com/user-manual/web-components/tags/pc-gsplat.md): Renders a Gaussian splat asset, with shadow and LOD settings. - [pc-rigid-body](https://developer.playcanvas.com/user-manual/web-components/tags/pc-rigid-body.md): The rigid body type, mass, friction and restitution. - [pc-collision](https://developer.playcanvas.com/user-manual/web-components/tags/pc-collision.md): Box, sphere, capsule, cone, cylinder and mesh collision shapes. - [pc-joint](https://developer.playcanvas.com/user-manual/web-components/tags/pc-joint.md): Fixed, ball, hinge, slider and 6DoF joints between two rigid bodies. - [pc-wasm](https://developer.playcanvas.com/user-manual/web-components/tags/pc-wasm.md): Loads WebAssembly modules such as Ammo, Basis and the Draco decoder. - [pc-script](https://developer.playcanvas.com/user-manual/web-components/tags/pc-script.md): The script component, which hosts `pc-script-instance` elements. - [pc-script-instance](https://developer.playcanvas.com/user-manual/web-components/tags/pc-script-instance.md): Attaches one script class to an entity, with attributes set one by one or as JSON. - [pc-anim](https://developer.playcanvas.com/user-manual/web-components/tags/pc-anim.md): Plays, switches and cross-fades animation clips over an entity hierarchy. - [pc-anim-clip](https://developer.playcanvas.com/user-manual/web-components/tags/pc-anim-clip.md): Declares a named animation clip of a `pc-anim`. - [pc-particle-system](https://developer.playcanvas.com/user-manual/web-components/tags/pc-particle-system.md): Emits particles as defined by a JSON asset. - [pc-sound](https://developer.playcanvas.com/user-manual/web-components/tags/pc-sound.md): The sound component, which groups `pc-sound-slot` elements. - [pc-sound-slot](https://developer.playcanvas.com/user-manual/web-components/tags/pc-sound-slot.md): A positional or non-positional audio clip, with volume, pitch and autoplay. - [pc-audio-listener](https://developer.playcanvas.com/user-manual/web-components/tags/pc-audio-listener.md): The point positional sounds are heard from. - [pc-screen](https://developer.playcanvas.com/user-manual/web-components/tags/pc-screen.md): A 2D screen for user interface elements, with resolution and scale modes. - [pc-element](https://developer.playcanvas.com/user-manual/web-components/tags/pc-element.md): Text, image and group elements of a user interface. - [pc-button](https://developer.playcanvas.com/user-manual/web-components/tags/pc-button.md): A button with tint and sprite transitions for its states. - [pc-layout-group](https://developer.playcanvas.com/user-manual/web-components/tags/pc-layout-group.md): Arranges child elements horizontally or vertically, with spacing, padding and fitting. - [pc-layout-child](https://developer.playcanvas.com/user-manual/web-components/tags/pc-layout-child.md): Size limits and fit proportions of a child in a layout group. - [pc-scroll-view](https://developer.playcanvas.com/user-manual/web-components/tags/pc-scroll-view.md): A scrollable viewport with scrollbars and mouse-wheel support. - [pc-scrollbar](https://developer.playcanvas.com/user-manual/web-components/tags/pc-scrollbar.md): A draggable scrollbar that drives a scroll view. ## API reference - [Web Components API](https://api.playcanvas.com/web-components/llms.txt): The classes behind the elements, and the library's JavaScript API. - [Web Components on GitHub](https://github.com/playcanvas/web-components): The source, with examples. ## Optional - [All pages of this index in one file](https://developer.playcanvas.com/user-manual/web-components/llms-full.txt): 41 pages (349 KB), for downloading and searching rather than reading into context.