Schema

Request body

The body of POST /api/v1/render is a render payload, discriminated on mockupType. Ten 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 joinedDate field is only rendered for platform: "x" (the X profile card), and username and verified only for platform: "x" and platform: "whatsapp". Every other platform ignores them. They apply to receivers[0], the person or business the conversation is with.

"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:

Comment attachment

attachment turns a comment into a voice comment or a poll. Pick the shape with type:

A voice comment:

{
  "attachment": { "durationSeconds": 9, "type": "voice" },
  "id": "c1",
  "likes": 7800,
  "text": "nobody talk to me I'm making this tonight",
  "timestamp": "2026-10-05T09:41:00.000Z",
  "userId": "dev"
}

A creator poll:

{
  "attachment": {
    "options": [
      { "id": "o1", "text": "the 3-hour lasagna", "votes": 8920 },
      { "id": "o2", "text": "the 10-minute version", "votes": 5760 }
    ],
    "status": "closed",
    "type": "poll"
  },
  "id": "c2",
  "likes": 12400,
  "text": "which one do I film next",
  "timestamp": "2026-10-05T09:41:00.000Z",
  "userId": "creator"
}

For mockupType: "comment-popup"

This is the type behind the free Comment pop-up video maker. props describes a pile of comment cards, from any mix of apps, that pop in one after another. Video only, renderKind must be "video". There is no top-level platform and no props.platform; each card in comments carries its own platform instead. The top-level canvas field is ignored for this type, props.aspectRatio is the frame.

Comment pop-up comment

comments is an array of CommentPopupComment:

Duration follows the comment count and speed, roughly 5 to 12 seconds for 5 to 10 comments.

{
  "mockupType": "comment-popup",
  "renderKind": "video",
  "resolutionScale": "2x",
  "rendererVersion": "mockup-remotion-v1",
  "props": {
    "aspectRatio": "9:16",
    "background": "brand",
    "seed": 1,
    "sound": true,
    "speed": "normal",
    "comments": [
      {
        "id": "c1",
        "platform": "instagram",
        "username": "mia.codes",
        "text": "wait this is actually insane, how"
      },
      {
        "id": "c2",
        "platform": "tiktok",
        "username": "dev.dani",
        "text": "no because I need this for my portfolio",
        "avatar": "https://cdn.example.com/avatars/dani.jpg"
      },
      {
        "id": "c3",
        "platform": "youtube",
        "username": "codewithsam",
        "text": "subscribed just for this"
      }
    ]
  }
}

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:

Comment pop-up mockups (mockupType: "comment-popup") — 4 platforms. Video only. Set platform per entry in props.comments instead of as a single top-level field:

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