---
title: Playground
description: Interactive demo with live editing, benchmarks, and three SSR engines side by side
---


The Proa Playground is an interactive environment for exploring Proa's SSR engine. Edit JSON props, see renders update instantly, compare performance against React on Node.js and Bun, and run load tests, all from your browser.

## Getting started

### Download and run

Download the package for your platform from the [Ecosystem Apps](/ecosystem/apps#reference-showcases) page, extract it, and run:

```bash
tar xzf proa-playground-*.tar.gz
cd proa-playground-*
./run.sh
```

The server starts at `http://localhost:3001`.

### Docker

Use the **Linux x86_64 download**, even when building on macOS or Windows.
Add the [Dockerfile from Packaging](/docs/ffi/packaging#docker) to the extracted
Linux package; that archive currently omits it. Then run:

```bash
docker build --platform linux/amd64 -t proa/playground .
docker run --rm --platform linux/amd64 -p 127.0.0.1:3001:3001 proa/playground
```

Open `http://localhost:3001`. The image includes Node and Bun for the comparison
engines. A native macOS or Windows executable cannot run in this Linux image.

## Pages

### Playground (`/playground`)

The main interactive UI. It has three panels:

- **JSON Props editor** (left), edit the data passed to the renderer. Changes apply on the next render.
- **Preview** (right), live HTML output rendered by the selected engine.
- **Stats bar** (top), SSR render time, JSON deserialization time, end-to-end time, and HTML size.

Use the breadcrumb at the top to switch between travel and footwear showcases and pages (Home, Search, Listing, Catalog, Product).

### Reference showcases (`/ecosystem/apps#reference-showcases`)

The Apps page includes reference showcase links for every combination of showcase and engine:

| Showcase | Pages | Engines |
|----------|-------|---------|
| Airbnb | Home, Search, Listing | Proa, Node, Bun |
| Nike | Catalog, Product | Proa, Node, Bun |

Each showcase page lives under `/showcase/...` and is a reference implementation rendered with the selected SSR engine. Links within each page stay within the same engine, clicking the Airbnb logo on a Bun page navigates to the Bun home page, not the Proa one.

### API Docs (`/api/docs`)

Interactive API documentation powered by [Scalar](https://scalar.com). Covers all endpoints with full request/response schemas and per-page JSON examples you can send directly from the browser.

## Engines

The playground runs three SSR engines for comparison:

| Engine | How it works |
|--------|-------------|
| **Proa (Rust)** | Templates compiled to byte sequences at build time. Static markup is consolidated; dynamic values are written directly to the output buffer. |
| **React (Node)** | `renderToString()` served by Hono on Node.js 20+. |
| **React (Bun)** | The packaged React/Hono server running on Bun. |

The native Proa engine runs without Node or Bun. Those runtimes are optional
comparison engines.

### Requirements

| Dependency | Required | Minimum version |
|-----------|----------|----------------|
| Proa binary | Yes | Included in package |
| Node.js | Optional | 20+ |
| Bun | Optional | 1.3+ |
| pnpm | Optional | 9.15.2 (for JS dependency installs) |

The `run.sh` script checks versions and attempts to install JavaScript
dependencies on first launch. Current archives contain an obsolete build-machine
path in the comparison-engine launcher. The [Docker example](/docs/ffi/packaging#docker)
starts those engines explicitly; installing Node or Bun alone does not repair
that archived launcher. The native Proa engine remains available.

## Rendering

### Single render

Click **Render** or press `Ctrl/Cmd+Enter` to render the current page with the JSON props in the editor. The stats bar updates with timing:

- **SSR**, pure template-to-bytes render time (measured server-side)
- **JSON deser**, time to deserialize the JSON props
- **E2E**, total server handler time (deser + render + response build)
- **HTML**, response body size in KB

### Engine switching

Use the engine toggle buttons (Proa, React Node, React Bun) to switch which engine renders the page. The preview updates on the next render. The **Open full page** link opens the showcase page in a new tab for the selected engine.

### curl

Click **Copy curl** to copy a ready-to-use `curl` command for the current page and engine. Run it from your terminal for cleaner timing without browser overhead.

## Load testing

Click **Load Test** to run a benchmark across all three engines. Choose a preset:

| Preset | Requests | Concurrency |
|--------|----------|-------------|
| Light | 500 | 10 |
| Medium | 2,000 | 50 |
| Heavy | 5,000 | 100 |
| Stress | 10,000 | 200 |

The test runs each engine sequentially and reports:

- **SSR Render Time**, pure render, no HTTP (Proa is in-process, Node/Bun measured via response headers)
- **HTTP Roundtrip**, full request-to-response via localhost
- **Throughput**, requests per second
- **Failed requests**, requests that returned errors or timed out

### Accuracy note

Treat playground timings as exploratory measurements. The engines share CPU and compete with the server and browser, so scheduling, warm-up, and instrumentation affect both absolute times and ratios. For performance comparisons, pin versions and inputs, verify equivalent output, and run isolated repeated trials as described in [Performance](/docs/guides/performance).

## API endpoints

| Method | Path | Description |
|--------|------|-------------|
| `POST` | `/api/render` | Render a page. Body: `{"page": "listing", "props": {...}}` |
| `POST` | `/api/loadtest` | Run load test. Body: `{"page": "listing", "iterations": 2000, "concurrency": 50}` |
| `GET` | `/api/props` | Default JSON props for all pages |
| `GET` | `/api/openapi.json` | OpenAPI 3.1 spec |
| `GET` | `/api/docs` | Scalar API reference UI |
| `GET` | `/health` | Health check: `{"status": "ok", "engine": "proa"}` |

Full schemas and examples are available at `/api/docs`.

## Package contents


```proa-filetree
proa-playground-{target}/
  proa-playground
  run.sh
  Dockerfile
  README.md
  LICENSE
  showcase-props.json
  ffi/
    libproa_demo.dylib
    proa.h
  public/
    images/
    fonts/
    assets/
  hono-ssr/
    server.ts
    package.json
  react-ssr-shared/
    src/
    package.json
```


| File | Description |
|------|-------------|
| `proa-playground` | Axum HTTP server with embedded playground UI |
| `run.sh` / `run.bat` | Launch script with version checks and dep install |
| `Dockerfile` | Not in every archive; use the [Packaging example](/docs/ffi/packaging#docker) |
| `ffi/` | Shared library + C header for calling renders from any language |
| `public/` | Images, fonts, CSS, JS for the showcase pages |
| `hono-ssr/` | Hono server for React SSR comparison engines |
| `react-ssr-shared/` | React components (same pages rendered by Node/Bun) |
| `showcase-props.json` | Default props for all showcase pages |