Glass Garden

Drag-and-drop cloud infrastructure that actually runs, entirely in your browser

The two canvases below are running inside a WebAssembly VM in this tab. The code in them runs as real Node processes and calls a local AWS region with the ordinary AWS SDK, so nothing is simulated and nothing leaves your machine. You can interact with them, edit the code they run, and view the live metrics and logs they emit. You can create your own projects at glass.garden.

Where does the count live?

Three instances of a page-view counter sit behind a load balancer, with nowhere to keep a count yet.

Press play at the top of the canvas, then select the HTTP Load Balancer and open its Preview tab to see the page its Express servers are serving. Refresh a few times. Each request is drawn as a dot landing on the instance the page names, and there is nowhere to keep a count yet.

Now open the menu in the top left, add a Table (DynamoDB), and drag a connection from View Counter to it. Every instance restarts knowing the table's name, and the same page starts counting: one total, shared by all three.

To see how it counts, select View Counter and choose Edit Resource Code. Any changes you make to the code are applied on restart.

A backlog you can drain

This one starts on its own when you scroll to it. Signups arrive five times a second, and each one puts a password on a queue for a function to hash. Hashing a password is slow, and with its concurrency set to one the function can't keep up, so the queue's backlog climbs.

Select Hash Password and raise Max Concurrency in its Config tab. More execution environments start, and the backlog drains. Each one runs on its own thread, so the hashing really does run in parallel across your CPU's cores.

Embed your own

Create a project at glass.garden, right-click it in the sidebar, and choose Copy link. Put the link in an iframe, with its address changed to a subdomain of embed.glass.garden named for the project:

<iframe
	src="https://intro.embed.glass.garden/#project=…"
	allow="cross-origin-isolated"
	loading="lazy"
	width="100%"
	height="700"
></iframe>

A reader's changes are saved per subdomain, and a different project on the same subdomain replaces them, so give each project its own, like the counter and queue subdomains on this page.

The page showing it has to send these two headers, or the frame shows an Open in Glass Garden link instead:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: credentialless

They also block other sites' frames, such as YouTube videos, unless those sites allow it, so send them only on pages that show a project. Add ?start before the # to have the canvas start when a reader scrolls to it, like the second one above. Glass Garden's README covers the rest.

Glass Garden is open source, and a self-hosted instance can serve embeds from your own domain.