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 63a5056 commit c523176
Showing 1 changed file with 17 additions and 15 deletions.
32 changes: 17 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,33 +44,35 @@ npm install playcanvas @playcanvas/web-components --save-dev
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>
<script type="importmap">
{
"imports": {
"playcanvas": "/node_modules/playcanvas/build/playcanvas.mjs"
}
}
</script>
```

Tou can then import the components as follows:
You can then import the components as follows:

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

You can now incorporate any of the PlayCanvas Web Components elements into your HTML!

### 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>
<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:
Expand Down

0 comments on commit c523176

Please sign in to comment.