Docs

Playground

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 page, extract it, and run:

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

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

Docker

If you have Docker installed, you can build and run from inside the extracted package:

docker build -t proa/playground .
docker run -p 3001:3001 proa/playground

All dependencies (Node 22, Bun) are included in the 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:

Each showcase page lives under /showcase/... and is a pixel-perfect recreation 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. 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:

Proa always works. Node and Bun are optional, if they're not installed, the playground runs with just Proa.

Requirements

The run.sh script checks versions and installs JS dependencies automatically on first launch.

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:

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

All timings in the playground are slower than isolated benchmarks. The server handles the benchmark while also serving requests, all three engines share the same CPU, and the browser competes for resources. Relative comparisons between engines are meaningful; for absolute numbers, use curl or the FFI library.

API endpoints

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

Package contents