Automattic-sponsored core contributor Adam Zielinski published a demo today of WordPress running in the browser with no PHP server. This is accomplished using WebAssembly (WASM), a format for a stack-based virtual machine that enables deployment on the web for client and server applications, and Emscripten, an open source compiler toolchain to 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 to WASM with Emscripten
- WordPress is packaged into a data bundle
- A service worker traps HTTP requests and re-routes them to WordPress
The project uses the wp-db-sqlite plugin to run WordPress with SQLite, as WASM doesn’t support MySQL.
Zielinski detailed some possible applications for running WordPress in the browser, which he said could “transform learning, contributing, and using WordPress:”
- making WordPress handbook code samples runeditable (early preview)
- providing an in-browser IDE to assist new contributors without having without having to set up a local development environment (early preview)
- creating an in-browser IDE for testing code on different WordPress, PHP, and Gutenberg versions
- scaling WordPress up by spinning up many tiny self-contained WASM instances directly on the edge servers.
- embedding a demos of a plugin, pattern, or theme (example: wpreadme.com)
- importing an existing WordPress website into WASM runtime to create a staging website
The prototypes are in their very early stages and have a few limitations right now. The block editor works but not the site editor, and the sites in the browser cannot communicate with WordPress.org to fetch plugins and themes.
Zielinski is eager to recruit contributors to help build out this vision and make it a reality. It’s quite an undertaking but the benefits contributors and developers stand to gain from having the ability to instantly spin up an in-browser IDE for WordPress are enormous.
“Learning WordPress and writing code used to be separated,” Zielinski said regarding using Stackblitz to create more interactive docs. “Now they can be one and the same. From runnable code snippets to new, svelte-like docs formats, WebContainers + WebAssembly WordPress is an educational game-changer.”
For more technical details on how this works, check out Zielinski’s post and click through to the various demos. The repository for the project includes a pre-built demo that anyone can run with more instructions for building the assembly yourself.
You mean, “PHP Server running in browser serves up WordPress”