GitHub - playcanvas/editor: Browser-based visual editor for building WebGL, WebGPU, WebXR apps

The PlayCanvas Editor is a visual editing environment for building WebGL/WebGPU/WebXR apps. It can be accessed at https://playcanvas.com.

You can see more projects built using the Editor on the PlayCanvas website.

Local Development

To initialize a local development environment for the Editor Frontend, ensure you have Node.js 18 or later installed. Follow these steps:

Clone the repository:

git clone https://github.com/playcanvas/editor.git
cd editor

Install dependencies:
Build the Editor frontend and start a local web server:
Open the Editor at playcanvas.com and append the query parameter use_local_frontend to load the development build:
```
https://playcanvas.com/editor/scene/<YOUR_SCENE_ID>?use_local_frontend
```
This will load the Editor frontend from http://localhost:3487 instead of the production build.

Note

This query parameter is also supported in the code editor and launch page

Library integration testing

The Editor is built on the following open source libraries:

Library	Details
PlayCanvas Engine	Powers the Editor's 3D View and Launch Page
Observer	Data binding and history
PCUI	Front-end component library
PCUI-Graph	PCUI plugin for rendering node-based graphs

To test the integration of these libraries, use npm link. Follow these steps:

Create a global link from source
Create a link to the global link
```
cd editor
npm link <library>
```

Test Suite

The test suite for the PlayCanvas Editor uses Playwright for end-to-end testing.

Tests

Tests are split into two categories:

test-suite/test/api - tests for the Editor API behavior
test-suite/test/ui - tests for the Editor UI behavior

Running Tests

To run the test suite ensure you have Docker installed. Follow these steps:

Create a .env file based on the template

PC_HOST=playcanvas.com
PC_LOGIN_HOST=login.playcanvas.com
PC_LAUNCH_HOST=launch.playcanvas.com
PC_LOCAL_FRONTEND=<true|false>
PC_COOKIE_NAME=pc_auth
PC_COOKIE_VALUE=<playcanvas-cookie>

Important

The account used must be an existing account. Create one here

Run the container with Docker compose
Stop the container with Docker compose
```
docker compose down --remove-orphans
```

Note

To build the image from source instead of pulling from the registry append the --build flag

Test Suite Local Development

To create new tests, ensure you have Node.js 18 or later installed. Follow these steps:

Install dependencies:

cd test-suite
npx playwright install --with-deps
npm install

Create tests and put them into the respective folders. For dynamic recording of tests run this command:

Note

Run npm run for the full list of npm scripts