Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
willeastcott authored Dec 12, 2024
1 parent eb5757e commit 63a5056
Showing 1 changed file with 30 additions and 2 deletions.
32 changes: 30 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,20 +32,48 @@ See PlayCanvas Web Components in action here: https://playcanvas.github.io/web-c

## Usage 🚧

### Installing from NPM

PlayCanvas Web Components is available as a package on [NPM](https://www.npmjs.com/package/@playcanvas/web-components).
You can install it (and the PlayCanvas Engine) as follows:

```bash
npm install playcanvas @playcanvas/web-components --save-dev
```

You can then use a bundler (such as Webpack or Rollup) to build your application. Or you can import the components as follows:
Next, in your HTML file, you will need an import map because the web components need to be able to find the PlayCanvas Engine (which is an external dependency):

```html
<script type="importmap">
{
"imports": {
"playcanvas": "/node_modules/playcanvas/build/playcanvas.mjs"
}
}
</script>
```

Tou can then import the components as follows:

```html
<script type="module" src="/node_modules/@playcanvas/web-components/dist/pwc.mjs"></script>
```

Instead of loading the library from a local package, you can instead opt to load it from a CDN.
### Using a CDN

Instead of loading the library from a local package, you can instead opt to load it from a CDN (such as jsDelivr). In this case, you would update the import map:

```html
<script type="importmap">
{
"imports": {
"playcanvas": "https://cdn.jsdelivr.net/npm/[email protected]/build/playcanvas.mjs"
}
}
</script>
```

And the components would now be imported as follows:

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@playcanvas/[email protected]/dist/pwc.mjs"></script>
Expand Down

0 comments on commit 63a5056

Please sign in to comment.