Automattic sponsored lead contributor Adam Zielinski today released a demo of WordPress running in the browser without a PHP server. This is accomplished using WebAssembly (WASM), a format for a stack-based virtual machine that enables web-based deployment for both client and server applications, and Emscripten, an open-source compiler toolchain for WebAssembly. It’s not stable yet, but the concept is intriguing, as it opens up a world of potential use cases.
The project is available on GitHub and Zielinski briefly explained how it works:
- PHP is compiled in WASM with Emscripten
- WordPress is packaged in a dataset
- A service worker intercepts HTTP requests and redirects them to WordPress
The project uses the wp-db-sqlite plugin to run WordPress with SQLite, as WASM does not support MySQL.
Zielinski detailed some possible applications for running WordPress in the browser, which he says could “transform the learning, contribution and use of WordPress:”
- make WordPress manual code examples editable (early preview)
- provide an in-browser IDE to help new contributors without having to set up a local development environment (preview)
- create an in-browser IDE to test code on different versions of WordPress, PHP, and Gutenberg
- scale WordPress by running many small, standalone WASM instances directly on edge servers.
- integrate a demo of a plugin, a pattern or a theme (example: wpreadme.com)
- importing an existing WordPress website into the WASM runtime environment to create a staging website
The prototypes are in their very early stages and have some limitations at the moment. The block editor works but the site editor does not, and browser sites cannot communicate with WordPress.org to fetch plugins and themes.
Zielinski is eager to recruit contributors to help build this vision and make it a reality. It’s quite an undertaking, but the benefits that contributors and developers can reap from being able to instantly launch an in-browser IDE for WordPress are enormous.
“Before, learning WordPress and writing code were separated,” Zielinski said of using Stackblitz to create more interactive documents. “Now they can be the same. From executable code snippets to svelte new document formats, WebContainers + WebAssembly WordPress is an educational game changer.
For more technical details on how it works, check out Zielinski’s post and click through the various demos. The project repository includes a pre-built demo that anyone can run with more instructions to build the assembly yourself.