Schema

Request body

The body of POST /api/v1/render is a render payload, discriminated on mockupType. Nine mockup types are supported, each with its own props shape:

The two chart types (contribution-chart, dashboard-chart) are the free-tool charts — you don't send a platform (it's implied by the chart type — GitHub / Stripe); the whole card is described by props.

Top-level fields, common to every type:

The schema validates strictly. Unknown top-level fields are rejected with 400 validation_failed. The top-level platform must equal props.platform.

Chat props

For mockupType: "chats", props describes the conversation itself and how it should look:

Messages

messages is an array of ChatMessage:

Examples:

{ "id": "m1", "type": "text", "userId": "u1", "text": "Hey!", "timestamp": "2026-04-30T10:15:00Z" }

{
  "id": "m2",
  "type": "image",
  "userId": "u1",
  "timestamp": "2026-04-30T10:16:00Z",
  "images": [
    {
      "id": "i1",
      "filename": "beach.jpg",
      "data": "https://cdn.example.com/beach.jpg",
      "mimeType": "image/jpeg",
      "size": 245760
    }
  ]
}

{
  "id": "m3",
  "type": "mixed",
  "userId": "u1",
  "text": "Look at this!",
  "timestamp": "2026-04-30T10:17:00Z",
  "images": [/* ... */],
  "status": "read"
}

Images

ChatMessageImage:

Recommendation: prefer https:// URLs over data URLs. Data URLs balloon the request body and easily push past the 10 MB cap if you have multiple image messages.

Users

ChatUser:

Each conversation has exactly one sender and one or more receivers. The sender's messages render on the right side; receivers' messages render on the left.

The username, verified, and joinedDate fields are only rendered for platform: "x" (the X profile card and header) and are ignored by every other platform. On X they apply to the receivers[0] — the person whose profile the conversation shows.

"receivers": [
  {
    "id": "u2",
    "name": "Jane Doe",
    "username": "janedoe",
    "verified": true,
    "joinedDate": "2011-03"
  }
]

Custom theme

When platform: "custom", supply a customTheme so the renderer knows how to color bubbles and the background:

customTheme is ignored for non-custom platforms — those use the platform's official colors.

Story props

For mockupType: "stories", props describes the story and how it should look:

Notification props

For mockupType: "notifications", props describes a stack of fake iOS push notifications on a lock screen. Video exports show them arriving one by one:

Notification items

notifications is an array of NotificationItem:

Story author

StoryAuthor:

Story slides

slides is an array of StorySlide, rendered in order:

AI chat props

For mockupType: "ai", props describes an AI assistant conversation (ChatGPT, Claude, etc.):

AI chat messages

messages is an array of AIChatMessage:

Video renders (renderKind: "video") animate the conversation: each user prompt appears, the assistant pauses, then its answer streams in like a typewriter. Streaming speed scales with answer length. Duration is derived from the messages automatically.

Post props

For mockupType: "posts", props describes a single social post:

Post object

Post author

Post metrics

All fields are optional numbers — include only what the target platform displays: likes, comments, reposts, shares, views, bookmarks, saves, reactions, upvotes, downvotes.

Comment props

For mockupType: "comments", props describes a post's comment thread:

Comment user

Comment

comments is an array of Comment, each of which can nest replies:

Email props

For mockupType: "emails", props describes an email thread:

Email conversation

Email participant

Email message

GitHub chart props

For mockupType: "contribution-chart" (no platform, image only). Renders a GitHub-style contribution chart — the grid of green squares. The contribution count is derived automatically from the filled squares.

{
  "mockupType": "contribution-chart",
  "renderKind": "image",
  "resolutionScale": "2x",
  "rendererVersion": "mockup-remotion-v1",
  "props": { "levels": [0, 1, 2, 3, 4, 2, 1], "year": 2026, "theme": "light" }
}

Stripe chart props

For mockupType: "dashboard-chart" (no platform, image only). Renders a Stripe-dashboard-style metric card — a headline number, a line, and (optionally) a dotted previous-period line with an auto-calculated percentage.

{
  "mockupType": "dashboard-chart",
  "renderKind": "image",
  "resolutionScale": "2x",
  "rendererVersion": "mockup-remotion-v1",
  "props": {
    "metric": "MRR",
    "points": [4200, 6300, 9800, 13400, 18200, 24800],
    "comparePoints": [2800, 4100, 6200, 8300, 11400, 15800],
    "currencyCode": "USD",
    "theme": "light"
  }
}

Supported platforms

Chat mockups (mockupType: "chats") — 23 chat apps. Use the slug (left column) as the value of platform and props.platform:

Both render kinds are supported for chats — set renderKind: "image" for a PNG or "video" for an MP4.

AI chat mockups (mockupType: "ai") — 5 platforms. Supports image and video:

Story mockups (mockupType: "stories") — 2 platforms. Supports image and video:

Post mockups (mockupType: "posts") — 8 platforms. Image only:

Comment mockups (mockupType: "comments") — 8 platforms. Image only:

Email mockups (mockupType: "emails") — 4 platforms. Image only: