Skip to main content

Learn the PlayCanvas API with the Engine Examples Browser

· 2 min read
Will Eastcott
Will Eastcott
CEO

PlayCanvas has a rich JavaScript API that allows you to build just about any type of interactive content imaginable - games, playable ads, product configurators, AR, VR and more! But learning a new API can be tough. Reading API reference documentation is all well and good, but many people prefer to learn by experimentation. And by examining the code of real world examples. This led the PlayCanvas team to build a new application: the Engine Examples Browser.

Starting exploring the Examples Browser now:

https://playcanvas.github.io/

The browser is written entirely in TypeScript and uses a Webpack build process. Naturally, it is 100% open source (MIT license) and the source can be found here.

The Examples Browser has some pretty cool features:

  • Gallery panel. Select any of the 86 examples from the (filterable) list on the left, either by name or thumbnail.
  • Inspect Source. Expand the source panel (built on the awesome Monaco code editor) on the right to inspect any example's source code.
  • Edit and hot reload. Edit any example and hit the Play button to refresh the running example. Monaco uses PlayCanvas' TypeScript definitions to provide inline API hints.
  • Embed links. Want to embed PlayCanvas examples in your own site? Simply hit the embed icon and copy the URL!
  • Share to Twitter. Want to share a specific example with the world? Just hit the Twitter icon!

If you would like to request an example to be added to the browser, submit an issue here. Or if you're feeling creative, submit a pull request of your own to the repo! Stay tuned for newly added examples in the coming months. Enjoy!