Have you heard about WordPress Alchemy? It’s a serverless version that runs inside the browser and goes by WordPress Playground.
Table of Contents
Developed by Adam Zieliński in 2022, this groundbreaking project isn’t alchemy, it’s WebAssembly (WASM). The same technology used to drive browser-based IDEs is at the core of Playground, supporting Zieliński‘s vision to empower developers, users, learners, extenders, and contributors.
Zieliński’s motivation was to overcome the challenges of setting up a local development environment as a prerequisite to building a WordPress site. Playground relieves you from the typical hassle and invites you to step into a new world of bliss where nothing can go wrong—a fresh instance is just a quick refresh away.
You can use Playground to showcase, test, and build themes, plugins, blocks, even entire sites. It’s a single-click, zero-setup environment for development, code reviews, design experiments, handovers, onboarding, and education: you can also embed a live instance in any webpage using an <iframe> element, giving new life to WordPress tutorials.
The triple foundation
Playground is composed of three interchangeable APIs, which you can mix and match as needed:
- The Query API – a no-code browser-based configuration that allows you to add parameters to the Playground URL.
- The Blueprint API – a low-code JSON-based configuration file that serves as a build script for your WordPress installation.
- The JavaScript API – an NPM package to import a Playground client into an app or website.
You can combine the three APIs: Most of the attributes of the Query API map to the Blueprint API, which means you could write the structured data (Blueprint) as a URL fragment (Query). Add a pound sign (#) after the .net/ and paste your configuration (links open in new tabs): https://playground.wordpress.net/#{"preferredVersions": {"php":"7.4", "wp":"6.3"}}
Or use both formats, like so:
https://playground.wordpress.net/?mode=seamless#{"preferredVersions": {"php":"7.4", "wp":"6.3"}}
API mapping
When combined, Playground would ignore any Blueprint-supported parameters set via the Query API. So, mode and storage—only available via the Blueprint API—are always valid, but plugin, not necessarily. For example, running https://playground.wordpress.net/?mode=seamless&plugin=gutenberg#{"plugins": [gutenberg]}
Would result in https://playground.wordpress.net/?mode=seamless#{"plugins": [gutenberg]}.
If your Blueprint isn’t too complicated, you don’t even need to encode it—append the URL with supported attributes, and the browser will take care of the rest.
When it gets too wieldy, you can reference a JSON file in the URL, like this:
https://playground.wordpress.net/?blueprint-url=https://PATH/TO/YOUR/blueprint.json
Finally, you can write the Blueprint inside the code of a JavaScript API-based instance.
Click here for an example that creates and opens a new post:
<body>
<iframe id="wp-playground" title="Demo Playground instance" style="width: 100%; height: 100dvh; border: 1px solid currentColor;"></iframe>
<script type="module">
import { startPlaygroundWeb } from 'https://unpkg.com/@wp-playground/client/index.js';
const client = await startPlaygroundWeb({
iframe: document.getElementById('wp-playground'),
remoteUrl: `https://playground.wordpress.net/remote.html`,
blueprint: {
"landingPage": "/?p=3",
"preferredVersions": {
"php": "8.0",
"wp": "latest"
},
"features": {
"networking": true,
},
"steps": [
{
"step": "login"
},
{
"step": "runPHP",
"code": "<?php require_once('/wordpress/wp-load.php'); wp_insert_post(['ID' => 3, 'post_title' => 'Created by a Blueprint', 'post_content' => '<!-- wp:paragraph --><p>Hoora!</p><!-- /wp:paragraph -->', 'post_status' => 'publish']);"
}
]
}
});
await client.isReady();
</script>
</body>
Cross-platform development environment
Playground is perfect for quick prototyping, but it also supports local development via the WP-NOW package and the VS Code extension. A great perk of using the extension is having auto-complete and validation in the IDE. Declare the Blueprint JSON schema ("$schema": "https://playground.wordpress.net/blueprint-schema.json") at the top of your JSON file, and the editor will pop little hints as you type.
A local WordPress development environment isn’t new, of course; MAMP and XAMPP have been here forever, and more recent GUI and CLI tools like WordPress Studio, Kinsta’s DevKinsta, and WordPress’s own WP-ENV simplify local installation.
However, none is as fast, seamless, and lightweight as WP-NOW, or portable as Playground’s VS Code extension. Furthermore, while all these platforms require a computer, Playground is as technically agnostic as browsers would allow it: Playground is cross-platform, partially works offline, and every new functionality is measured by its usability and accessibility, considering instrumental support for different devices and contexts, including smartphones and tablets.
Get to know the APIs
Learn how to take advantage of Playground’s layers of functionality to create interactive demos and share your work without ever leaving your browser.
No-code: the Query API
Playground is an excellent way to get familiar with WordPress. Type https://playground.wordpress.net (opens in new tab) in your browser address bar, hit Enter, and start exploring.
Want to test a specific theme from the WordPress theme directory? Add a question mark (?) after the .net/, and type theme=the_theme_slug. How about a plugin? Locate it in the plugin directory, get the slug, and write plugin=the_plugin_slug.
You can also do both and add as many attributes as you’d like: just separate them with an ampersand (&). Here’s an example URL query that allows you to explore the latest beta version:
https://playground.wordpress.net/?plugin=gutenberg&theme=ollie&mode=seamless&wp=nightly (opens in a new tab)
Play around with the query to test out different variations: replace seamless with browser, nightly with 5.9, ollie with stacks, or remove &plugin=gutenberg to see the changes:
https://playground.wordpress.net/?mode=browser&wp=5.9&theme=stacks (opens in a new tab)
Enable local storage
Playground instances are temporary by design; once you refresh or close the tab, all your changes will be gone. To make it less ephemeral, enable the browser storage option: using the Query API, add storage=browser to the URL or click the Settings button on the top-right and select the storage type. After you refresh, you’ll see that the warning emoji (⚠️) disappeared.
You can chain as many plugins as you’d like (?plugin=jetpack&plugin=woocommerce), or open a specific page—in the admin or front end: (links open in new tabs)
- The Template section of the Site Editor:
https://playground.wordpress.net/?url=/wp-admin/site-editor.php?path=/wp_template - A new post:
https://playground.wordpress.net/?theme=blue-note&url=/wp-admin/post-new.php
Playground will download and install everything, log you in, activate the theme and plugin you chose, and spin up a fresh copy of your custom WordPress within seconds.
Build a site and share it
When you launch a standard Playground instance (not in seamless mode or via the JavaScript API), you’ll notice a new simulated browser chrome above the familiar WordPress admin bar.