Render templates on Lambda

A HyperFrames template is a composition with declared variables. The same project can produce many videos without rewriting its HTML. Use this guide after deploying the AWS Lambda render stack.

Declare the inputs

Declare variables on the document, then bind them in the composition. This example exposes a headline and accent color:

<!doctype html>
<html
  data-composition-variables='[
    {"id":"title","type":"string","label":"Headline","default":"Welcome"},
    {"id":"accent","type":"color","label":"Accent","default":"#6d5dfc"}
  ]'
>
  <body>
    <div
      id="stage"
      data-composition-id="welcome"
      data-width="1920"
      data-height="1080"
      data-duration="5"
      style="color:var(--accent)"
    >
      <h1 data-var-text="title">Welcome</h1>
    </div>
  </body>
</html>

See Variables for every type and binding method.

Test locally

Render one realistic payload before using cloud infrastructure:

hyperframes render ./my-template \
  --variables '{"title":"Hello Ada","accent":"#ff4d67"}' \
  --strict-variables \
  --output renders/ada-preview.mp4

--strict-variables rejects undeclared keys and values with the wrong type.

Render one version on Lambda

hyperframes lambda render ./my-template \
  --width 1920 \
  --height 1080 \
  --variables '{"title":"Hello Ada","accent":"#ff4d67"}' \
  --output-key renders/ada.mp4 \
  --wait

Without --wait, the command returns a render ID. Check it later with:

hyperframes lambda progress <render-id>

Reuse the project upload

lambda render can upload the project for each call. For repeated renders, create a content-addressed site once:

hyperframes lambda sites create ./my-template

Pass the returned ID with later renders:

hyperframes lambda render ./my-template \
  --site-id <site-id> \
  --width 1920 \
  --height 1080 \
  --variables '{"title":"Hello Lin"}'

An unchanged project keeps the same site ID and skips another S3 upload.

Render a batch

Create one JSON object per line. outputKey is required; variables and executionName are optional.

{"outputKey":"renders/ada.mp4","variables":{"title":"Hello Ada","accent":"#ff4d67"}}
{"outputKey":"renders/lin.mp4","variables":{"title":"Hello Lin","accent":"#36b37e"}}

Start the batch:

hyperframes lambda render-batch ./my-template \
  --batch ./recipients.jsonl \
  --width 1920 \
  --height 1080 \
  --max-concurrent 10

The command uploads the project once and returns one manifest row per input line. A failure to start one row does not discard the other started renders. Validate the file without starting AWS executions:

hyperframes lambda render-batch ./my-template \
  --batch ./recipients.jsonl \
  --width 1920 \
  --height 1080 \
  --strict-variables \
  --dry-run \
  --json

Keep variables small

The complete Step Functions Standard execution input is limited to 256 KiB. HyperFrames checks this before starting the execution. Use variables for JSON data. Store images, audio, and video separately and pass their URLs instead of base64 content.

{
  "title": "Hello Ada",
  "avatarUrl": "https://cdn.example.com/avatars/ada.png"
}

Control concurrency

Three settings control different layers:

Setting	Controls
`lambda deploy --concurrency`	Maximum concurrent invocations for the deployed Lambda function
`lambda render --max-parallel-chunks`	Maximum chunk workers used by one render
`lambda render-batch --max-concurrent`	Maximum render executions started concurrently by the batch command

Start conservatively and measure a real composition before increasing them.

Use the SDK

For a backend service, @hyperframes/aws-lambda/sdk exposes deploySite, renderToLambda, and getRenderProgress. See the AWS package reference for the current types and a working example.

Overview

Command line

SDK

Composition and animation

Rendering and deployment

Advanced rendering

Packages

Integrations

Contributing

Render templates on Lambda

Declare the inputs

Test locally

Render one version on Lambda

Reuse the project upload

Render a batch

Keep variables small

Control concurrency

Use the SDK

​Declare the inputs

​Test locally

​Render one version on Lambda

​Reuse the project upload

​Render a batch

​Keep variables small

​Control concurrency

​Use the SDK

Declare the inputs

Test locally

Render one version on Lambda

Reuse the project upload

Render a batch

Keep variables small

Control concurrency

Use the SDK