Overview Runs 712 Secrets Access Renderer Analytics v1.1

OUTPUT RENDERING

Custom renderer

Style how your action outputs look on /p/:slug. Upload a TSX file, it's esbuild-compiled server-side and served in an iframe sandbox with your schema as props.

CASCADE · PR #66

1. Custom (your TSX)

In use. Full control.

→

2. Component library

Floom-built: FlightTable, Chart, Markdown, Map, Diff, Key-Value. Picks by output type.

→

3. Auto (schema → UI)

Default. Renders raw JSON → inferred components.

FlightResults.tsx compiled · 184 KB

1// Receives run output as schema-typed props

2import { type FlightOutput } from './floom-schema'

3import { Card, Badge } from '@floom/ui'

5export default function FlightResults({ output }: { output: FlightOutput }) {

6 return (

7 <div className="grid gap-3">

8 {output.flights.map(f => (

9 <Card key={f.id}>

10 <div className="flex items-center justify-between">

11 <span>{f.airline} {f.number}</span>

12 <Badge tone={f.onTimeRate > 0.9 ? 'good' : 'warn'}>

13 {Math.round(f.onTimeRate * 100)}% on-time

14 </Badge>

15 </div>

16 <div className="text-sm text-muted">

17 {f.depart} → {f.arrive} · {f.duration}

18 </div>

19 </Card>

20 ))}

21 </div>

22 )

23}

Sandbox preview · sample output

Lufthansa LH441

HAM 10:30 → LIS 13:10 · 3h 40m

92% on-time

TAP Portugal TP557

HAM 14:15 → LIS 17:00 · 3h 45m · 1 stop

78% on-time

Ryanair FR5543

HAM 06:50 → LIS 09:25 · 3h 35m

89% on-time

iframe-sandboxed · no network · runs in <50ms

LAST COMPILE · 2 min ago

[00:00] esbuild · entry FlightResults.tsx

[00:01] ✓ type-check · 0 errors · 0 warnings

[00:01] ✓ tree-shake · output 184 KB · gzip 52 KB

[00:02] ✓ sandbox publish · sbx_flyfast_v1.4.0

FALLBACK

If custom fails

Floom drops to layer 2 (library) automatically. Errors go to /runs. Users never see a broken render.

COMPONENT LIBRARY · LAYER 2

Floom-built

FlightTable Chart Markdown Map Diff KeyValue CodeBlock

Renderer · /studio/:slug/renderer

Custom renderer

If custom fails

Floom-built