How was the playcanvas UI made?

So I just started thinking about working on doing some website UI design,so I wanted to know what software was used to make the playcanvas frontend(UI)?

@will and @vaios would be the best people around to answer that.

From my experience developing extensions for the Playcanvas editor, I can say it uses strictly plain HTML/CSS and vanilla Javascript with Node.js handling the communication with the backend.

The editor code is not minified, on purpose, so you can take a look at how things communicate, how the panels are initialized, the event handlers used etc. There is a very elegant implementation of an event based system used by all objects/methods to communicate and interact. An event system that I can imagine, in the future, being documented and officially exposed in the Editor, to be used by the Playcanvas users to write editor extensions themselves.

1 Like

oh nice

When you say the front-end, do you mean the website or the Editor?

Both

The developer documentation is generated from markdown and from a quick look, it’s looks like a custom HTML CSS template rather than anything special such as bootstrap, angular etc

See: https://github.com/playcanvas/developer.playcanvas.com

I suspect the main site is much of the same.

If you are interested in web front-end work, look at flexbox as a starting point to help with content layout.

2 Likes