Skip to main content

Build

WordPress Playground can help you to create and learn WordPress quickly, even on mobile with no signal. You can use Playground where you work best, whether that’s in the browser, Node.js, mobile apps, VS Code, or elsewhere.

Setting up a local WordPress environment quickly​

You can seamlessly integrate Playground into your development workflow to launch a local WordPress environment quickly for testing your code. You can do this directly from the terminal or your preferred IDE.

Save changes done on a Block Theme and create GitHub Pull Requests​

You can connect your Playground instance to a GitHub repository and create a Pull Request with the changes you’ve made through the WordPress UI, leveraging the Create Block Theme plugin.

With this workflow, you could build a block theme completely in your browser and save your changes to GitHub, or you could improve/fix an existing one.

Some more examples of this workflow:

Synchronize your Playground with a local folder and create GitHub Pull Requests​

In the Dock, click the Autosaved or Unsaved save status, select Save in a local directory, click Choose..., and select a directory dedicated to this Playground. After granting write access, click Save. Playground copies the current site into the selected directory and overwrites files with matching names; it does not import an existing site from that directory.

The Store permanently pane with local-directory storage selected

Local-directory storage uses the File System Access API, so availability depends on browser and platform support for choosing and writing to directories. Chromium-based desktop browsers usually support it. Browsers without that capability can still use browser storage and ZIP export. See Browser support for the broader compatibility model.

Files changed in Playground are written to the selected directory. Files changed on disk are not pulled into the running Playground automatically. For a local-directory Playground, open the Saved status menu in the Dock and choose Reload files from disk when you want Playground to read the current files from the directory.

With this workflow, you can create GitHub PRs directly from changes made in your local directory.

See here a little demo of this workflow in action:

Integrate with other APIs to create new tools.​

Playground can be combined with different APIs to create amazing tools. The possibilities are endless.

You can use WordPress Playground in Node.js to create new tools. The @php-wasm/node package, which ships the PHP WebAssembly runtime, is the package used for https://playground.wordpress.net/, for example.

Another interesting app built on top of Playground is Translate Live (see example) which, in combination with OpenAI provides a WordPress translations tool “in place” where translations can be seen and modified in their real context (see example). Read more about this tool at Translate Live: Updates to the Translation Playground

Work offline and as a native app​

When you first visit playground.wordpress.net, your browser automatically caches all the necessary files to use Playground. From that point on, you can access playground.wordpress.net, even without an internet connection, ensuring you can continue working on your projects without interruptions.

You can also install Playground on your device as a Progressive Web App (PWA) to launch the Playground directly from your home screen—just like a native app.

Read Introducing Offline Mode and PWA Support for WordPress Playground for more info.

Embed a WordPress site in non-web environments​

The How to ship a real WordPress site in a native iOS app via Playground? guide shows how we can leverage Playground to wrap a WordPress site into an IOS app.