PlayCanvas Editor

| User Manual | API Reference | Blog | Forum |

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.

[!TIP] AI-assisted development: The Editor includes a built-in Model Context Protocol (MCP) integration, allowing AI assistants to inspect and modify projects directly through an open Editor session.

Local Development

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

1. Clone the repository:

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

2. Install dependencies:

   npm install
   

3. Build the Editor frontend and start a local web server:

   npm run develop
   

4. 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:

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

1. Create a global link from source

   cd <library>
   npm link
   

2. 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:

1. 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

2. Run the container with Docker compose

   docker compose up
   

3. 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:

1. Install dependencies:

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

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

   npm run codegen
   

[!NOTE] Run npm run for the full list of npm scripts