Multi-Page Images

Generate images from multi-page templates — render specific pages, batch generate carousels, or create image sets from a single template.

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.

How Multi-Page Works#

When your Studio template has multiple pages (e.g., a carousel, slide deck, or a set of variations), the API returns an array of images — one for each page.

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: "<MULTI_PAGE_TEMPLATE_ID>",
    modifications: {
      "page1@title": "Slide 1: Introduction",
      "page2@title": "Slide 2: Features",
      "page3@title": "Slide 3: Pricing",
    },
    response: {
      format: "png",
      type: "url",
    },
  }),
});

Response#

The response returns a content array with one entry per page:

{
  "data": {
    "content": [
      "https://storage.orshot.com/cloud/renders/images/page1.png",
      "https://storage.orshot.com/cloud/renders/images/page2.png",
      "https://storage.orshot.com/cloud/renders/images/page3.png"
    ],
    "renders": 3,
    "mimeType": "image/png"
  }
}

Rendering Specific Pages#

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

{
  "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.

Page-Specific Modifications#

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

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

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

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.content = array of 5 image URLs

Global vs Page-Specific Modifications#

If you pass a modification without the page{N}@ prefix, it applies to all pages:

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

In this example, brand_logo is updated on every page, while each title is set independently.

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:

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

Overflow pages include sourcePageNumber (the template page they came from) and flowPage (which overflow page it is). Use includePages to render only specific pages from the flow output.

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.

Ready to automate?

Start rendering images, PDFs and videos from your templates in under 2 minutes. Free plan, no credit card.

Get your API key

Image, PDF and video generation via API
Visual editor with AI and smart layouts
Zapier, Make, MCP and 50+ integrations
White-label embed for your own app
60 free renders — no credit card required