Docs

Example payloads

JSON prop shapes for the five benchmark render entry points.

Each playground benchmark takes a JSON object. The entry points render the playground's showcase recreations of a travel marketplace (the Airbnb home, search, and listing pages) and a footwear store (the Nike catalog and product pages); the checked-in default props in proa_demo/showcase-props.json carry that page data. The samples on this page use placeholder names to show the shapes.

Entry point	Renders
`render_airbnb_home`	Travel home
`render_airbnb_search`	Travel search
`render_airbnb_listing_json`	Travel listing
`render_nike_catalog_json`	Catalog
`render_nike_pdp_json`	Product detail

Travel home

render_airbnb_home renders the dense travel-home benchmark. The default props under showcase-props.json > home are the showcase's listing data.

Required shape

type HomeProps = {
  listings: Array<{
    title: string;
    location: string;
    price_per_night: number;
    rating: string;
    property_type: string;
    image: string;
  }>;
  homes_sections: HomeSection[];
  experiences_sections: HomeSection[];
  services_sections: HomeSection[];
};

type HomeSection = {
  title: string;
  subtitle: string;
  listing_indexes: number[];
};

Every top-level array is required. Each listing_indexes value refers to an entry in the shared listings array, allowing repeated cards without repeating their source objects.

Minimal payload

{
  "listings": [{
    "title": "Harbor Point House",
    "location": "Harbor Point, Coast County",
    "price_per_night": 350,
    "rating": "4.92",
    "property_type": "Entire home",
    "image": "/images/synthetic/property-coast.svg"
  }],
  "homes_sections": [{
    "title": "Popular homes in Coast County",
    "subtitle": "",
    "listing_indexes": [0]
  }],
  "experiences_sections": [],
  "services_sections": []
}

The full synthetic fixture lives at proa_demo/showcase-props.json > home.

Travel search

render_airbnb_search renders the travel search benchmark. The default props live under showcase-props.json > search.

Required shape

type SearchProps = {
  title: string;
  subtitle: string;
  stay_info: string;
  filters: string[];
  listings: Array<{
    title: string;
    location: string;
    price_per_night: number;
    rating: string;
    reviews_count: number;
    property_type: string;
    beds: number;
    baths: number;
    image: string;
  }>;
};

The map column uses the first few listings for price pins. An empty listings array still renders the page chrome and filters.

{
  "title": "Harbor Point — Fictional Stays",
  "subtitle": "Entire homes and unique stays",
  "stay_info": "Flexible stay · 2 guests",
  "filters": ["Price", "Rooms and beds"],
  "listings": [{
    "title": "Harbor Point House",
    "location": "Harbor Point, Coast County",
    "price_per_night": 350,
    "rating": "4.92",
    "reviews_count": 128,
    "property_type": "Entire home",
    "beds": 3,
    "baths": 2,
    "image": "/images/synthetic/property-coast.svg"
  }]
}

The full synthetic fixture lives at proa_demo/showcase-props.json > search.

Travel listing

render_airbnb_listing_json renders the travel listing detail page.

The required object contains:

listing metadata: title, location, location_short, property_line, rating, review_count, overview_summary, and description;
prices and counts: nightly_rate, cleaning_fee, service_fee, and total_amenity_count;
page collections: photos, highlights, amenities, review_distribution, reviews, rules, safety items, cancellation items, and nearby links;
nested review_scores, host, optional cohost, and booking objects.

Start with proa_demo/showcase-props.json > listing. That file is the canonical complete example and is validated alongside the demo. Its image paths point at the showcase's /images/airbnb/ assets, which the playground package serves.

{
  "title": "Cliffside Coast House",
  "location": "Harbor Point, Coast County",
  "rating": "4.92",
  "photos": [{
    "src": "/images/synthetic/property-coast.svg",
    "alt": "Illustrated coast house exterior"
  }]
}

The excerpt shows the primary fields only; use the canonical complete object when calling the renderer.

Catalog

render_nike_catalog_json renders the footwear catalog benchmark.

type CatalogProps = {
  title: string;
  products: Array<{
    title: string;
    subtitle: string;
    price: string;
    messaging: string;
    image: string;
    colors: string[];
    color_count: string;
  }>;
};

{
  "title": "Footwear & Sneakers",
  "products": [{
    "title": "Stride Supply Pace 001",
    "subtitle": "Road Running Shoes",
    "price": "$145",
    "messaging": "New",
    "image": "/images/synthetic/product-shoe.svg",
    "colors": ["background-color:#26292B", "background-color:#EFBF4D"],
    "color_count": "2 Colors"
  }]
}

The full 117-card workload lives at proa_demo/showcase-props.json > nike-catalog.

Product detail

render_nike_pdp_json renders the footwear product detail page.

The object includes product identity and pricing (title, subtitle, current_price, original_price, discount_pct, color_name, style_code, description, reason_to_buy, weight, drop), benefits, whats_new, sizes, colorways, the review summary (avg_rating, review_count) and reviews, and recommended products.

{
  "title": "Stride Supply Velocity One",
  "subtitle": "Unisex Road Racing Shoes",
  "current_price": "$184",
  "original_price": "$220",
  "discount_pct": "16% off",
  "color_name": "Cloud/Ember/Graphite",
  "style_code": "SS-V1-101",
  "avg_rating": "4.5",
  "review_count": "48"
}

This excerpt documents the primary scalar fields. Use the complete validated object at proa_demo/showcase-props.json > nike-pdp as a starting point.

Next steps

Playground
- Interactive demo with live editing, benchmarks, and three SSR engines side by side
C ABI contract
- Call the playground FFI exports and free their buffers correctly.
Memory ownership
- Own, reuse, and free Proa FFI buffers from a host runtime.