New Prototype Runs WordPress in the Browser with No PHP Server

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.

image source: demo from wordpress-wasm repo

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.

7

7 responses to “New Prototype Runs WordPress in the Browser with No PHP Server”

    • Well, in the case of WP Readme – I’ve built it using Astro .js and Svelte and it’s served from the edge with Cloudflare. WordPress is compiled into a Wasm and it’s only loaded on the front-end.

  1. This still won’t fix the fact that the WordPress code base is an absolute mess. Fix the code to be more framework style and then we will talk. Why can’t they just rewrite the whole thing to be JAMStack based. It’s much better this way!

    • Go ahead and rewrite it, and then tackle the issue of rewriting the thousands of plugin integrations
      Then you will realize and appreciate why php is used for CMSes

    • WordPress uses event-driven architecture using hooks, while frameworks use MVC. Event-driven suits well with the current WordPress plugin ecosystem. No need for rewrite.

    • I’m a fan of JAM. But you don’t need such a radical departure to fix che absolute mess of globals, inconsistent naming, no classes, terrible database structure that is wordpress.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: