Architecture overview

WordPress Playground consists of the following high-level components:

• WordPress
• WebAssembly PHP
• Browser bindings
• PHP.wasm packages for the shared API, platform bindings, and version-specific binaries
• 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.