Architecture overview

WordPress Playground consists of the following high-level components:

• WordPress
• WebAssembly PHP
• Browser bindings
• Node.js bindings via @php-wasm/node
• Public API

Visit each section to learn more about the specific parts of the architecture.

Tooling

NX: building packages and projects

WordPress Playground uses NX, a build system designed for monorepos.

The dependencies between Playground packages and projects are too complex for a bundler like Webpack, and NX handles this complexity much better:

To learn more, head over to the NX developer docs.

Lerna: publishing packages and projects

WordPress Playground includes several NPM packages, a VS Code extension, WordPress plugins, a web app, and other GitHub releases, all managed across two monorepos: the main wordpress-playground and Playground Tools.

We use Lerna to build, manage, and publish all JavaScript/TypeScript packages. Lerna handles everything simultaneously: it increments the version number, sets a new tag, and publishes the modified packages to npm.

The published packages share the same version number, so when updating a single package, Lerna bumps the version number of all dependent packages.