Workers

Render

Three workers cover server-side rendering: render (generic), ultron-render (carousel pipeline), ultron-render-preview (pre-publish previews). Backed by Satori plus Resvg for vector to raster conversion, and a small JS template engine for canvas-style outputs.

Updated today

Three render surfaces

Worker	Purpose	Called by
render	Generic SSR for canvas blocks, brand teardowns, ad-hoc layouts.	Marketing swarm pipeline, watcher worker, capture worker.
ultron-render	Final carousel render. Loads design library + theme tokens, executes the DSL.	Marketing swarm 'render' stage, content publisher.
ultron-render-preview	Cheap preview render. Lower DPR, no asset cache invalidation.	Pre-publish UI in the dashboard.

Overview

At a glance

Workers: render, ultron-render, ultron-render-preview
Vector engine: Satori (React to SVG)
Raster engine: Resvg (SVG to PNG / PDF)
Asset store: R2 buckets per pipeline (briefs, exemplars, design assets)
Default output: PNG at 2x DPR
Max canvas size: 4096 by 4096 px

Splitting render into three workers separates concerns: generic SSR can scale independently of carousel-specific logic, and previews can degrade quality to stay snappy without affecting final renders. All three share the same Satori plus Resvg core; the difference is the template library and the output discipline.

Worker shape

Common to all three, with per-worker extras.

wrangler.toml (key bindings, common)toml

1name = "render" # or ultron-render, ultron-render-preview

2main = "src/index.ts"

4[[r2_buckets]]

5binding = "ASSETS" # design tokens, brand DNA docs, exemplar PNGs

7[[kv_namespaces]]

8binding = "TEMPLATE_CACHE" # compiled templates cached per hash

10[ai]

11binding = "AI" # used by render for layout-from-brief calls

Render flow

render flowtxt

1# Per render request:

2# 1. Validate payload. Spec must declare { kind, theme, slides[] | sections[] }.

3# 2. Resolve theme tokens. Load /themes/<id>.ts from the asset cache.

4# 3. For each slide / section / block:

5# a. Lookup the component in the design library by name.

6# b. Resolve any image refs (R2 keys + content hash, signed URL).

7# c. Compose with theme tokens.

8# 4. Pass the composed React tree to Satori -> SVG bytes.

9# 5. Pipe SVG through Resvg -> PNG (or PDF when requested).

10# 6. Optionally upload to R2 and return a signed URL, or stream PNG bytes

11# inline (preview path uses inline).

Output formats

Format	When	Notes
PNG	Default. Used by carousel renders and previews.	2x DPR by default; configurable per call.
PDF	When the request sets format=pdf	Resvg generates PDF directly without an intermediate raster.
SVG	When the request sets format=svg	Raw vector. Useful for downstream editing or further processing.
WebP	When the request sets format=webp	Resvg -> WebP via a small encode step.

File map

cf-workers/render

wrangler.toml

src

index.tscommon entry; route by /render, /preview, /carousel

compose.tscompose React tree from spec + theme

rasterise.tsSatori + Resvg wrappers

cf-workers/ultron-render

wrangler.toml

src

index.ts

carousel.tscarousel-specific pipeline

cf-workers/ultron-render-preview

wrangler.toml

src

index.ts

preview.tslow-DPR fast path