How do I render a carousel?

Render specific pages, batch a full carousel, or produce an image set from a single multi-page template.

Published Mar 25, 2026·Updated Oct 27, 2026

Multi-page templates let you design multiple variations or slides within a single template. When generating images, you can render all pages at once or select specific ones.

Rendering Specific Pages#

Use response.includePages to render only the pages you need. This saves render credits and speeds up generation.

JSON

{
  "templateId": "<MULTI_PAGE_TEMPLATE_ID>",
  "modifications": {
    "page1@title": "Cover Slide",
    "page3@title": "Final Slide"
  },
  "response": {
    "format": "png",
    "type": "url",
    "includePages": [1, 3]
  }
}

This renders only pages 1 and 3, skipping page 2.

In the response, page is the position of the image in this response, not the template page number. Here the two images come back as page: 1 and page: 2. Use pageId to match each image to its template page.

Page-Specific Modifications#

Use the page{N}@ prefix to target elements on specific pages. This lets you customize each page independently.

JSON

{
  "modifications": {
    "page1@title": "Why Choose Us",
    "page1@subtitle": "Trusted by 10,000+ teams",
    "page1@background": "https://example.com/bg-blue.jpg",

    "page2@title": "Key Features",
    "page2@subtitle": "Everything you need to scale",
    "page2@background": "https://example.com/bg-purple.jpg",

    "page3@title": "Get Started Today",
    "page3@subtitle": "Start your free trial",
    "page3@background": "https://example.com/bg-green.jpg"
  }
}

You can also apply styles per page:

JSON

{
  "modifications": {
    "page1@title": "Dark Theme Slide",
    "page1@title.color": "#ffffff",
    "page1@canvasBackgroundColor": "#0f172a",

    "page2@title": "Light Theme Slide",
    "page2@title.color": "#1a1a1a",
    "page2@canvasBackgroundColor": "#ffffff"
  }
}

Example: Instagram Carousel#

Generate a 5-slide Instagram carousel from a single template:

JavaScript

const slides = [
  { title: "5 Tips for Better Sleep", subtitle: "A quick guide" },
  {
    title: "Tip 1: Consistent Schedule",
    subtitle: "Go to bed at the same time every night",
  },
  {
    title: "Tip 2: Limit Screen Time",
    subtitle: "Put your phone away 1 hour before bed",
  },
  {
    title: "Tip 3: Cool Environment",
    subtitle: "Keep your room between 60-67°F",
  },
  { title: "Swipe for More", subtitle: "Follow us for daily tips" },
];

const modifications = {};
slides.forEach((slide, i) => {
  modifications[`page${i + 1}@title`] = slide.title;
  modifications[`page${i + 1}@subtitle`] = slide.subtitle;
});

const response = await fetch("https://api.orshot.com/v1/studio/render", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer <YOUR_API_KEY>",
  },
  body: JSON.stringify({
    templateId: "<CAROUSEL_TEMPLATE_ID>",
    modifications,
    response: {
      format: "png",
      type: "url",
    },
  }),
});

const data = await response.json();
// data.data = array of 5 { page, pageId, content } entries

Global vs Page-Specific Modifications#

On a multi-page template, a content key without the page{N}@ prefix is not applied to any page. The response returns a warning that names the prefixed key to use. Send one prefixed key per page:

JSON

{
  "modifications": {
    "page1@brand_logo": "https://example.com/logo.png",
    "page2@brand_logo": "https://example.com/logo.png",
    "page1@title": "Page 1 Title",
    "page2@title": "Page 2 Title"
  }
}

Style keys are different. A bare dotted key such as title.color or title.fontSize applies to every page that has a title layer. The same goes for inline keys and canvas keys such as canvasBackgroundColor.

Flow Text (Automatic Multi-Page)#

If your template uses flowing content (text with textMode: "flow"), additional pages are created automatically based on how much text there is. You don't need to design each page — the flow engine handles page breaks.

The API request is the same as any render. The response includes all generated pages:

JSON

{
  "data": [
    { "page": 1, "pageId": "abc-123", "content": "https://..." },
    { "page": 2, "pageId": null, "content": "https://...", "sourcePageId": "abc-123", "sourcePageNumber": 1, "flowPage": 1 },
    { "page": 3, "pageId": null, "content": "https://...", "sourcePageId": "abc-123", "sourcePageNumber": 1, "flowPage": 2 }
  ],
  "totalPages": 3,
  "flowTotalPages": 2
}

Overflow pages have pageId: null. They include sourcePageId and sourcePageNumber (the template page they came from) and flowPage (which overflow page it is).

includePages picks pages from your template, not from the flow output. Each picked page that overflows still expands into all its flow pages.

Each page rendered counts as a separate render against your plan usage — this applies to both designed multi-page templates and flow-generated overflow pages.

←

Which image format should I use?

How do I change styles without editing?

→

Was this page helpful?