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.

!Editor

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

1. Install dependencies:

npm install

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

npm run dev

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

1. Create a global link from source

cd <library>
    npm link

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

!Playwright

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

1. Run the container with Docker compose

docker compose up

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

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