WordPress Playground lets you run WordPress entirely in your browser

If you don’t keep up with WordPress ecosystem news, you might not be aware of a cool new project called WordPress Playground. And I include myself in this group as I had never heard of WordPress Playground until the project page was submitted to Hacker News a few days ago.

But WordPress Playground is so neat that it deserves a quick explanation here. The idea is quite simple. Playground lets you run a WordPress instance directly from your web browser without having to mess around with a server — no need to install PHP, MySQL or Apache.

You can try it out on playground.wordpress.net. In just a few seconds, you get a brand new WordPress site with a full admin panel and the ability to create posts and pages. At this point, you probably have two questions: How is this possible? And why is it useful?

Adam Zielinski and other contributors from Automattic and the WordPress community have created a WebAssembly-based WordPress runtime so that you can start a WordPress server by loading a page. The usual MySQL database has been replaced with a file-based SQLite database. And a service worker acts as the web server and translates browser requests into WordPress responses.

WordPress loads in less than ten seconds on my laptop. You can mess around as much as you want as changes are gone when you refresh the page. There are options to store data in the browser or in a local computer directory too.

And that’s the main idea behind WordPress Playground. It’s a sandboxed environment where you can try new things, showcase some stuff you’ve been working on and test your code against different versions of WordPress and PHP.

For instance, WordPress Playground can be used to try a plugin, a theme or a block to see if it fits your needs. You don’t have to install it on a live WordPress site and it’s easier than creating a staging site.

There are two ways to install a plugin in WordPress Playground. You can download a ZIP file of a plugin and then upload it to Playground. Or you can simply change the URL to something like playground.wordpress.net/?plugin=MYCOOLNEWPLUGIN to automatically boot up a WordPress site with the plugin installed.

WordPress Playground can handle many configuration options as query parameters in the URL, such as the PHP version, the WordPress version, the WordPress URL that should be loaded when you load the page, etc.

These parameters could be particularly useful for plugin developers that want to test a new version of their plugin on a fresh WordPress install. Theme developers could also use Playground to embed a live demo of their theme in an <iframe> tag.

Using WordPress as an app platform

When I interviewed Automattic CEO Matt Mullenweg a few years ago, he told me that he wanted to build the operating system of the web with WordPress. And it’s true that WordPress is highly flexible. It can be used to showcase a restaurant menu or as the foundation for a high-traffic media site (TechCrunch is a WordPress website).

Some people also use WordPress as a headless content management system. WordPress takes care of content, users and media files, but the frontend is completely separated from WordPress and uses the API to interact with your content.

As WordPress Playground is essentially a standalone WordPress, you can also run a WordPress instance on your local device. For instance, there’s a VS Code plugin that you can use to debug your themes and plugins locally. You can also launch a local WordPress environment with a CLI tool.

Even more insane and amazing, Ella van Durpe used WordPress Playground as the basis for a new note-taking app for iOS and macOS. Blocknotes is a stripped down version of WordPress that lets you create notes like you would create posts in WordPress.

Ella van Durpe shared a few screenshots on Twitter:

As you can see, your notes are then saved as HTML files in iCloud Drive and synchronized across Apple devices. Blocknotes is currently available on TestFlight and works well already. This project reminds me of TiddlyWiki, a wiki-style notebook in the form of a single HTML file.

Now, I can’t wait to see other potential use cases for WordPress Playground. It’s awesome to see web technologies used in new ways. And Playground is a perfect example of that.