GraphQL Server in the Browser using WebAssembly
Tags: webassembly, graphql, playground, rust
Published: 2024-07-11 20:28:47

---
title: GraphQL Server in the Browser using WebAssembly
published: true
date: 2024-06-18 00:00:00 UTC
tags: WebAssembly,GraphQL,Playground,Rust
canonical_url: https://exograph.dev/blog/playground
---

On the heels of our [last feature release](https://exograph.dev/blog/cloudflare-workers), we are excited to announce a new feature: Exograph Playground in the browser! Thanks to the magic of WebAssembly, you can now run Exograph servers entirely in your browser, so you can try Exograph without even installing it. That's right, we run a [Tree Sitter](https://tree-sitter.github.io/tree-sitter) parser, typechecker, GraphQL runtime, _and_ Postgres **all in your browser**.

## See it in action[​](https://exograph.dev/blog/playground#see-it-in-action "Direct link to See it in action")

Head over to the [Exograph Playground](https://exograph.dev/playground) to try it out. It shows a few pre-made models and populates data for you to explore. It also shows sample queries to help you get started.

<!-- -->

A few models need authentication, so you can click on the "Key" icon in the middle center of the GraphiQL component to simulate the login action.

When you open the playground, the top-left portion shows the model. The top-right portion shows tabs to give insight into Exograph's inner workings. The bottom portion shows the GraphiQL interface to run queries and mutations.

<!-- -->
[![](https://exograph.dev/assets/images/screenshot-492818f0ce1f649e4bdc1aa0a402f823.png)<button style="width:220px;height:66px;position:absolute;top:calc(50% - 33px);left:calc(50% - 110px"><span>Open Playground</span></button>](https://exograph.dev/playground)
  

You can also create your model by replacing the existing model in the playground. The playground supports sharing your playground project as a gist.

## How it works[​](https://exograph.dev/blog/playground#how-it-works "Direct link to How it works")

The Exograph Playground runs entirely in the browser. Besides the initial loading of static assets (like the WebAssembly binary and JavaScript code), you don't need to be connected to the internet. This is possible because we compiled Exograph, written in Rust, to WebAssembly.

![Playground Architecture](https://exograph.dev/assets/images/how-it-works-9967b1881fb7d1b8d16f371f22efdead.png)

### Builder[​](https://exograph.dev/blog/playground#builder "Direct link to Builder")

The builder plays a role equivalent to the [`exo build`](https://exograph.dev/docs/cli-reference/development/build) command. It reads the source code, parses and typechecks it, and produces an intermediate representation (equivalent to the `exo_ir` file). The builder also includes elements equivalent to the [`exo schema`](https://exograph.dev/docs/cli-reference/development/schema) command to compute the SQL schema and migrations.

On every change to the source code, the builder validates the model, reports any errors, and produces an updated intermediate representation. You can see the errors in the "Problems" tab.

The builder also produces the initial SQL schema and migrations for the model as you change it. The playground will automatically apply migrations as needed. You can see the schema in the "Schema" tab.

### Runtime[​](https://exograph.dev/blog/playground#runtime "Direct link to Runtime")

The runtime is equivalent to the [`exo-server`](https://exograph.dev/docs/cli-reference/production) command. It processes the intermediate representation the builder produced and serves the GraphQL API. When you run a query, it sends it to the runtime, which computes the SQL query, runs against the database, and returns the results.

The runtime also sends logs to the playground, which you can see in the "Traces" tab. This aids in understanding what Exograph is doing under the hood, including the SQL queries it executes.

### Postgres[​](https://exograph.dev/blog/playground#postgres "Direct link to Postgres")

The playground uses [pglite](https://github.com/electric-sql/pglite), which is Postgres compiled to WebAssembly. Currently, we store Postgres data in memory, so you will lose the data when you refresh the page. We plan to add support for saving the data to local storage.

### GraphiQL[​](https://exograph.dev/blog/playground#graphiql "Direct link to GraphiQL")

The GraphiQL is a standard GraphQL query interface. You can run queries and mutations against the Exograph server. The playground populates the initial query for you to get started.

## Sharing Playground Project as a Gist[​](https://exograph.dev/blog/playground#sharing-playground-project-as-a-gist "Direct link to Sharing Playground Project as a Gist")

The playground supports sharing the content as a gist. You can load such a gist using the `gist` query parameter. For example, to load the gist with ID `abcd`, you can use the URL `https://exograph.dev/playground?gist=abcd`.

You can create a gist to share your model, the seed data, and the initial query populated in GraphiQL. The files in gist follow the same layout as the project directory in Exograph, except you use `::` as the directory separator.

- `src::index.exo`: The model
- `tests::init.gql`: The seed data. See [Initializing seed data](https://exograph.dev/docs/production/testing#initializing-seed-data) for more details.
- `playground::query.graphql`: The initial query in GraphiQL
- `README.md`: The README to show in the playground

We will keep improving the sharing experience in the future.

## What's next[​](https://exograph.dev/blog/playground#whats-next "Direct link to What's next")

This is just the beginning to make Exograph easier to explore. Here are a few planned features to make the playground even better (your feedback is welcome!):

- **Support JavaScript Modules** : In non-browser environments, Exograph supports [Deno Modules](https://exograph.dev/docs/deno). Deno cannot be compiled to WebAssembly, so we cannot run it in the browser. However, browsers already have a JavaScript runtime 🙂, which we will support in the playground.
- **Persistent Data** : We plan to add support for saving the data to local storage so you can continue working on your data model across sessions.
- **Improved Sharing** : We will add a simple way to create gists for your playground content and share it with others.

Try it out and let us know what you think. If you develop a cool model, publish it as a [gist](https://gist.github.com/) and share it with us on [Twitter](https://twitter.com/exographdev) or [Discord](https://discord.gg/EPdqyvCpNw). We would appreciate a [star on GitHub](https://github.com/exograph/exograph)!