Introducing PCUI - An Open Source UI Framework for the Web ๐Ÿš€

The PlayCanvas team is incredibly excited to announce the open sourcing of a brand new product called PCUI: the PlayCanvas User Interface framework.

Read all about it here:

This is super cool for tools developers in general. But for PlayCanvas developers, itโ€™s even more exciting because this is the first step in formalizing an interface to interact with the Editor. In future, this is the API you will use to build your own plugins and extensions to the Editor.

Weโ€™re keen to spread the word. Can you help us out with a retweet + like for our announcement Twitter post?

Let us know what you think!

19 Likes

Dumb Question But Is This Available Now and also is there a demo for this

Yes. It is available now.

3 Likes

Amazing! Thank you very much for making this available!

1 Like

Check out this cool Youtube video from Mike at Gamefromscratch:

He does an awesome job of introducing PCUI to the global game dev community.

7 Likes

In the picture youโ€™re showing a color picker, is this one actually integrated, or is that a thing to create myself?
I do not see it in the src folder on github :slight_smile:

Iโ€™m trying to setup PCUI with this HTML file:

<!doctype html>
<html>
<head><meta charset="utf-8"></head>

<script type="text/javascript">

import { Button } from '@playcanvas/pcui/pcui.js'
const helloWorldButton = new Button({
    text: 'Click Me'
});
document.body.appendChild(helloWorldButton.dom);

</script>

<body>
</body>
</html>

And getting the error:
Uncaught SyntaxError: Cannot use import statement outside a module

What am I doing wrong?

Hi @AlexandreRangel,

Import can be used only on a script module, replace your initial script element with the following, and add your JS code to a separate file:

<script type="module" src="myFile.js"></script>
1 Like

Awesome! That could be great intermediary step towards custom Editor plugins I suppose :+1:

1 Like

Thank you @Leonidas, but I still donโ€™t fully grasp how should I organize and import the files.

Iโ€™m getting the error:
Uncaught SyntaxError: The requested module '../dist/pcui.js' does not provide an export named 'Button'

And my files are like that:

index.html :

<!doctype html>
<html><head><meta charset="utf-8">
  <script type="module" src="./dist/pcui.js"></script>
  <script type="module" src="./js/app.js"></script>
</head><body></body>
</html>

app.js :

import {Button} from '../dist/pcui.js'
const helloWorldButton = new Button({
    text: 'Click Me'
});
document.body.appendChild(helloWorldButton.dom);

Hereโ€™s the project: https://www.alexandrerangel.art.br/playcanvas/pcui-01/

Hi AlexandreRangel,

Currently the PCUI build output doesnโ€™t have perfect support for es modules in html. It works fully if you use a module bundler like webpack / rollup to import PCUI but if importing via a html module script itโ€™s only going to offer the global PCUI namespace.

To get it up and running in your example, you could rewrite your app.js file to import PCUI to the global namespace as follows:

import '../dist/pcui.js';
const helloWorldButton = new pcui.Button({
    text: 'Click Me'
});
document.body.appendChild(helloWorldButton.dom);
3 Likes

Thanks a lot @Elliott and @Leonidas !
Worked like a charm!

1 Like