POST: Render from Studio Template

Learn how you can make a POST request to render from a custom template on Orshot

What are Studio Templates?

Templates that you've designed in Orshot Studio are Studio Templates. These templates are custom designs that you can customize and paramterize

You can render content from a custom template that you've designed using Orshot Studio by making POST request to Orshot API

https://api.orshot.com/v1/studio/render

POST Request

await fetch("https://api.orshot.com/v1/studio/render", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer <ORSHOT_API_KEY>",
  },
  body: JSON.stringify({
    templateId: <TEMPLATE_ID>,
    modifications: {
      canvasBackgroundColor: "#eff2fa", // Supports CSS Color Values(HEX, RGBA, linear-gradient)
      canvasBackgroundImage: "https://acme.com/public/web-background.png",
      title: "Custom Title",
      imageUrl: "Custom Image URL"
    },
    response : {
      type: "base64",
      format: "png",
      scale: 1,
      includePages: [1, 3] // only for multi-page templates
      fileName: "" // specify custom file name(without extension) for output file
    },
    pdfOptions : { // applicable only if response.format is "pdf"
      margin: "20px",
      rangeFrom: 1, // show only from page 1(set to "null" to show all pages)
      rangeTo: 2 // to page 2(set to "null" to show all pages)
    },
  }),
});

Response Structure

{
  "data": {
    "content": "data:image/png;base64,iVBORw0.....",
    "format": "png",
    "type": "base64",
    "responseTime": 325.22
  }
}

{
  "data": [
    {
      "page": 1,
      "content": "https://storage.orshot.com/cloud/w-11/renders/images/FMEI22AVte8.png"
    },
    {
      "page": 2,
      "content": "https://storage.orshot.com/cloud/w-11/renders/images/4J6NvUi0UJW.png"
    },
    {
      "page": 3,
      "content": "https://storage.orshot.com/cloud/w-11/renders/images/Xsmpnp3aVIu.png"
    }
  ],
  "format": "png",
  "type": "url",
  "responseTime": 3166.01,
  "totalPages": 3,
  "renderedPages": 3
}

Single Page Templates

Templates with only one page
Response can be accessed at the value at data.content, it's in string format
(base64 format + binary type) response combination isn't supported

Multi Page Templates

Templates with more than one pages
Response can be accessed at data.content, it's in array format with content

Parameters

templateId: Each Studio template has a unique templateId(integer) which you can see on Template's page or payground
modifications: Object structure of the dynamic modidifcations that you've set in the template. Additionally, you can also use style parameters to dynamically set styles for your layers, learn more
response.format - Supports png, webp, jpg, pdf, mp4, webm, gif
response.type
response.fileName: works only when the response format is either url or binary, can be used to specify custom file name for the output files. In carousel templates, the file name will be suffixed by -page-1, -page-2 etc. Also if response/format is set to url, the custom file name will be suffixed with -[UNIQUE_HASH] to make sure it's a unique file

Video Generation

For templates with video elements, you can render them as video files by setting response.format to mp4, webm, or gif.

await fetch("https://api.orshot.com/v1/studio/render", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer <ORSHOT_API_KEY>",
  },
  body: JSON.stringify({
    templateId: <TEMPLATE_ID>,
    modifications: {
      "videoElement": "https://example.com/custom-video.mp4", // Dynamic video URL
      "videoElement.trimStart": 0, // Start time in seconds
      "videoElement.trimEnd": 10, // End time in seconds
      "videoElement.muted": false, // Include audio
      "videoElement.loop": true, // Loop the video
    },
    videoOptions: { // global video option
      trimStart: 0, // in seconds
      trimEnd: 20, // in seconds
      muted: true,
      loop: true,
    },
    response: {
      type: "url",
      format: "mp4", // or "webm", "gif"
    },
  }),
});

Video Parameters

For video elements with a parameter ID set, you can pass dynamic video properties:

{parameterId} - Custom video URL
{parameterId}.trimStart - Start time in seconds
{parameterId}.trimEnd - End time in seconds
{parameterId}.muted - true or false for audio
{parameterId}.loop - true or false for looping

POST: Render from Studio Template

On this page