Payload Playground - Database adapters in the browser via WASM

[GermanJablo]

Overview

Deploying interactive demos or playgrounds provides significant advantages for both developers and users:

• Simplifies the creation of reproducible issues
• Eases PR documentation, enabling visual before/after comparisons without needing to switch branches
• Facilitates debugging by allowing real-time comparisons between feature branches and a live playground
• Acts as demos for new users who can explore PayloadCMS without needing to clone repositories, set up databases, compile code, or customize templates
• Allows embedding live examples directly in documentation

Many tools deploy a playground for these reasons, such as Lexical, Typescript or Tailwind.

While deploying a basic playground is usually straightforward and can often be automated through GitHub Actions, PayloadCMS faces an additional challenge: its reliance on a database backend. Deploying an open and publicly accessible database in a playground can lead to issues such as non-deterministic behavior and potential DB abuse.

Proposal

A potential solution to this problem is to leverage a database that runs locally in the user's browser, powered by WebAssembly (WASM). This approach would allow for fully isolated instances of the database, eliminating concerns about public DB exposure while still offering full CMS functionality in a demo environment.

The goal of this discussion is to gather input and collaborate on implementing a solution for Payload’s playground, starting with addressing this challenge.

Possible Solutions

There are currently 2 options for implementing a database in the browser via WASM:

• A recent option is PGLite, a WASM version of Postgres. Drizzle already has a driver that supports it.
• Another option would be to use SQLite. There are many more options in this camp that have been very well documented in this blog post. Since Payload uses Drizzle, I think this adapter would probably be the easiest to implement.

[akhrarovsaid]

I absolutely love this idea. Not only for how great it would be for visibility and ease-of-sharing of Payload, but also for Github issues where pulling down a repo may be more tedious or slower - just open up a new playground and quickly throw together a reproduction. We could pull in the existing templates for quickly demoing basic features and working examples. Imagine sending a customer a link to gauge interest, now that would be convenience. I completely agree that it would also be great in docs.

I would love to contribute to making this happen. Count me in. 10/10.

[GermanJablo]

That would be great because I don't have the bandwidth to run this right now.

After talking about this internally, a colleague pointed out to me that WASM Postgres or SQLite wouldn't be much use if we still have the Nextjs server on Node.

The idea I have right now is instantiating node in the browser with WASM to host the server:
https://blog.stackblitz.com/posts/introducing-webcontainers/

In that case we could use the normal database adapters.

Your contributions on this would be super welcome!

[akhrarovsaid]

WebContainers look great! Incredible technology which would actually be perfect for this.

I had a thought that may be worth exploring internally - initially when I thought of delivering such an environment, my mind went straight to MicroVM's. Something like Firecracker. I believe it's what CodeSandbox uses to deliver their environments. However, there are trade-offs to this approach. Namely infrastructure such as servers from a provider that supports nested virtualization, but in this way we can run the Nodejs parts of Payload on an actual "server" so to speak. Anyway, just a thought.

In any case the next question, at least in my mind, is what would a proof of concept look like and how do we get the ball rolling here?

[GermanJablo]

Well, the goal is clear and I see you understand it well.
These are not technologies that one uses on a daily basis so there will surely be exploration in the process.
If you want to help with this, I would say try to make progress and if you have questions or need feedback write to us here, or on Discord (you can @ me)