stand for ukrainian independence image
Stand for Ukrainian Independence. Contribute.
stand for ukrainian independence image
Help Center
Exploring WordPress Playground: Web Tool Features and Benefits
dashellle
Daria Zelinska
WordPress Copywriter
Show all articles
Updated on
Useful Resources

Exploring WordPress Playground: Web Tool Features and Benefits

How would you use WordPress? Normally, you would have to set up a local environment, hosting, running server software, PHP, and a full database. It’s quite a straightforward process, although it takes up time and effort. For some, installing and configuring WordPress seems like a lot, so they go looking for alternative site-building software. Minimum effort, maximum action, as they say. 

The WordPress team saw the need to address the issue, and so they did. During State of the Word 2022, Matt Mullenweg announced something truly extraordinary called WordPress Playground. What is it, and what makes it so mind-blowing? You’ll find out in a bit.

What Is WordPress Playground?

Playground is a WordPress demo where you simply select the desired theme, add plugins to it, and run a test website. WordPress core, PHP, and a database are running 100% from the web browser. 

{Playground} is happening 100% in the browser. So, basically, it’s a virtual machine that gets spun up using this new thing called WebAssembly. […] It creates a database, a PHP, your web server, everything, just right there in a little window. This is wild.” (Matt Mullenweg)

Can you imagine? Now, you don’t have to do plugin installation to test WordPress; it all takes place in the browser window! Playground is a new approach to demonstrating WordPress’s potential – no additional installation and setup are required.

wordpress playground demo

For now, the demo supports eight themes and seven plugins. You can choose to run one theme and several plugins at once.

Here is how the Playground works:

  1. Choose the desired theme and plugins.
  2. Press the “Start Playground” button.
  3. You will be taken to the sample page. 
  4. Explore the available functionality: edit the site, customize themes, add new elements, edit users, log out, etc.
  5. Preview the result. 

As soon as you close the browser window, the site will be automatically erased.

Pro tip

Want to learn more about how WordPress Playground works? Check out the GitHub page.

What Makes WordPress Playground Useful?

As explained before, Playground creates a live virtual environment where one can test WordPress before installing it.

wordpress playground custom page

It is a flexible tool powered by WebAssembly, which will be particularly useful for designers, regular users, and educators because:

  • it shows you how the plugin and themes work using the WordPress core;
  • the WordPress website you will be testing is a private instance;
  • it allows you to embed a real website into a tutorial/course.

What else can it bring to the table? Because WordPress developers made the demo run from a browser, they had to implement the key platform dependencies for it first. First, they created a module – src/php-wasm – to bring PHP into JavaScript as a WebAssembly binary. Second, they implemented SQLite using a separate plugin, wp-sqlite-db. Third, the web server runs thanks to the Service Worker API.

NOTE

Sure thing, there is way more work behind WordPress Playground. To find out more, feel free to check out the documentation.

For web developers, the perks include even more:

  • edit the code live and see the results immediately;
  • run code snippets in the documentation/courses;
  • switch between PHP and WordPress during testing;
  • replay and fix the failed CI tests in the browser.

I guess it’s safe to say the WordPress team has done a decent job, and the project will definitely change the way users approach and use their software.

WordPress Playground FAQ

What is WordPress Playground?

It is a unique experimental project by the WordPress team, which creates a virtual playground for testing plugins and themes without having to install the WordPress core.

How does WordPress Playground work?

The WordPress demo runs from a web browser and is powered by WebAssembly, SQLite, and Service Worker API. First, the Playground asks you to select a theme and plugin(s), then it quickly generates a test website where you can add pages and posts, edit theme parts, try out plugins, etc. Once you close the window, the site will be erased.

What makes the Playground unique?

WordPress Playground is a no-sweat way to test the builder. You can see how plugins work, what theme parts look like, how to add posts and pages, preview results, and more. From the developer’s standpoint, it allows editing the code live, fixing the failed CI tests, switching from PHP to WordPress mode and vice versa, etc. It is a true ground-breaker, which can’t be found in other website builders yet.

Who can contribute?

Anyone can contribute, even non-developers. The WordPress team states it’s not necessary to know WebAssembly, as the project is “primarily built with JavaScript.” They value all kinds of input, be it a question, suggestion, observation, etc.

Wrapping Up

Needless to say, WordPress Playground has made a splash in the industry. It is a unique project allowing anyone to see what the builder can help them achieve right from the browser window. Can you imagine it – WordPress, PHP, and a database running from a web browser? Isn’t it pure magic?!

Sure, the WordPress team are not magicians; they are hard-working and talented people who love what they do to the extent they manage to release such powerful things as Playground. I can hardly imagine a better way to promote the builder than to let users test WordPress online with no additional installation. Do you agree? 😎     

P.S. Don’t miss out and go check the Playground’s demo page. It’s fun!