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

Use the Linux x86_64 download, even when building on macOS or Windows. Add the Dockerfile from Packaging to the extracted Linux package; that archive currently omits it. Then run:

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:

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. 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:

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

Requirements

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 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:

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.

API endpoints

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

Package contents