Title: Architecture overview
Published: July 15, 2026
Last modified: July 16, 2026

---

# Architecture overview

## In this article

 * [Tooling](https://developer.wordpress.org/playground/developers/architecture/?output_format=md#tooling)
    - [NX: building packages and projects](https://developer.wordpress.org/playground/developers/architecture/?output_format=md#nx-building-packages-and-projects)
    - [Lerna: publishing packages and projects](https://developer.wordpress.org/playground/developers/architecture/?output_format=md#lerna-publishing-packages-and-projects)

[ Back to top](https://developer.wordpress.org/playground/developers/architecture/?output_format=md#wp--skip-link--target)

WordPress Playground consists of the following high-level components:

 * [WordPress](https://developer.wordpress.org/playground/developers/architecture/wordpress)
 * [WebAssembly PHP](https://developer.wordpress.org/playground/developers/architecture/wasm-php-overview)
 * [Browser bindings](https://developer.wordpress.org/playground/developers/architecture/browser-concepts)
 * Node.js bindings via [@php-wasm/node](https://npmjs.com/package/@php-wasm/node)
 * [Public API](https://developer.wordpress.org/playground/developers/apis/)

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

## 󠀁[Tooling](https://developer.wordpress.org/playground/developers/architecture/?output_format=md#tooling)󠁿

### 󠀁[NX: building packages and projects](https://developer.wordpress.org/playground/developers/architecture/?output_format=md#nx-building-packages-and-projects)󠁿

WordPress Playground uses [NX](https://nx.dev/), a build system designed for monorepos.

The dependencies between Playground packages and projects [are too complex](https://github.com/WordPress/wordpress-playground/pull/151)
for a bundler like Webpack, and NX handles this complexity much better:
 ⌊Dependency
graph⌉

To learn more, head over to the [NX developer docs](https://nx.dev/getting-started/intro).

### 󠀁[Lerna: publishing packages and projects](https://developer.wordpress.org/playground/developers/architecture/?output_format=md#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](https://github.com/WordPress/wordpress-playground)
and [Playground Tools](https://github.com/WordPress/playground-tools/).

We use [Lerna](https://lerna.js.org) 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.

First published

July 15, 2026

Last updated

July 16, 2026

Edit article

[ Improve it on GitHub: Architecture overview ](https://raw.githubusercontent.com/WordPress/wordpress-playground/trunk/packages/docs/site/docs/developers/23-architecture/01-index.md)

Changelog

[ See list of changes: Architecture overview ](https://developer.wordpress.org/playground/developers/architecture/?output_format=md#)

[  Previous: PHP extension dependencies](https://developer.wordpress.org/playground/developers/apis/javascript-api/php-extension-dependencies/)

[  Next: WebAssembly PHP](https://developer.wordpress.org/playground/developers/architecture/wasm-php-overview/)