I want to use some HTML UI component libraries in PlayCanvas. Currently, I have tried bootstrap and tailwind. Bootstrap can be used in PlayCanvas, but tailwind cannot. Does PlayCanvas support the introduction of any UI component libraries?
Hi @leooooooo,
PlayCanvas can be used with any regular JavaScript library, it doesn’t enforce any particular behavior on that.
Most likely what you are asking is how to use a library in the PlayCanvas editor. Make sure to load a browser build instead of a module and it will work. In some cases you may need to load additional CSS files manually (it’s not enough add .css files as assets, you need to load them using JavaScript).
Potentially you could use module builds of libraries, search around the forum and there are some topics on how to load a module using a PlayCanvas script.
Hope that helps.
1 Like
Thank you for your reply. I probably know how to import some CSS libraries. I have a question, can frameworks like Vue or React be imported into PlayCanvas for use? Or how to use PlayCanvas projects in Vue (or React)
Most tend to use React and Vue with the PlayCanvas app as part of the site project, either as a canvas or iframe. Some users have done this so you may be able find some posts on this.
AFAIK, the easiest route is to use an iframe for the PlayCanvas app and post window messages between the two.
If PlayCanvas is used as an iframe, it needs to be packaged and released every time before it can be used.Can I import Vue or React into the PlayCanvas editor?
Only the build on playcanv.as is hosted in an iframe (which you can remove by adding /e before the /p in the URL).
The downloaded self hosted build doesn’t contain an iframe.
If you are talking about using the self hosted build in an iframe of the Vue/React app, we suggest using the REST API to automatically download a build from a script and modify contents (if need be) to make the process a lot easier.
If you want to use Vue or React in the PlayCanvas Editor, I would suspect you have the opposite problem where you need to build/bundle the Vue/React app code into the Editor project with NPM/Node/esbuild/etc and the REST API to upload the built files.
Another possibility is to use Vue or React UMD builds (if one exists) and import that into the Editor. That way you can build Vue/React UI directly in the Editor. I don’t know enough about either frameworks to understand if there are limitations via this method.