### Setup Next.js Project and Install Dependencies

Source: https://orshot.com/docs/examples/instant-polaroid-app

Use create-next-app to scaffold a new Next.js project and install necessary dependencies like framer-motion, lucide-react, jszip, clsx, and tailwind-merge.

```bash
npx create-next-app@latest instant-polaroid
cd instant-polaroid
npm install framer-motion lucide-react jszip clsx tailwind-merge
```

--------------------------------

### Quick Start Render Request

Source: https://orshot.com/docs/api-reference/render-from-studio-template

A minimal request example including template ID, dynamic modifications, and response format.

```javascript
const res = 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: {
      title: "Custom Title",
      imageUrl: "https://acme.com/cover.png",
    },
    response: { type: "url", format: "png" },
  }),
});

const { data } = await res.json();
// data.content → the rendered image URL
```

--------------------------------

### Install Node.js SDK

Source: https://orshot.com/docs/sdks/node

Use npm to install the SDK package.

```bash
npm install @orshot/sdk
```

--------------------------------

### Dynamic URL Examples

Source: https://orshot.com/docs/integrations/dynamic-urls

Basic usage examples for generating images with text replacements and smart resizing.

```markdown
https://api.orshot.com/v1/studio/dynamic-url/hello-world.png?templateId=123&title=Hello%20World&subtitle=Welcome&sign=abc123def456
```

```markdown
https://api.orshot.com/v1/studio/dynamic-url/story.png?templateId=123&title=Hello%20World&sign=abc123def456&size=instagram-story
```

--------------------------------

### Install Skill Globally

Source: https://orshot.com/docs/integrations/agent-skill

Make the skill available across all projects by installing it globally.

```bash
npx skills add orshot-hq/orshot-agent-skills -g
```

--------------------------------

### Start Development Server (Bash)

Source: https://orshot.com/docs/examples/instant-polaroid-app

Run this command in your terminal to start the Next.js development server.

```bash
npm run dev
```

--------------------------------

### Install Orshot SDK

Source: https://orshot.com/docs/sdks/node

Choose the package manager command to install the Orshot SDK.

```bash
npm install --save orshot
```

```bash
yarn add orshot
```

```bash
pnpm install orshot
```

--------------------------------

### React component setup

Source: https://orshot.com/docs/orshot-embed/custom-asset-picker

Initial setup for handling the embed within a React component.

```jsx
import { useEffect, useRef, useState } from "react";

function EmbedWithAssetPicker() {
  const iframeRef = useRef(null);
  const [pickerState, setPickerState] = useState(null);
```

--------------------------------

### Configure All PDF Options

Source: https://orshot.com/docs/pdf-generation/pdf-options

A comprehensive example showing the structure of the pdfOptions object.

```json
{
  "pdfOptions": {
    "margin": "20px",
    "dpi": 300,
    "colorMode": "rgb",
    "rangeFrom": 1,
    "rangeTo": 5
  }
}
```

--------------------------------

### Install Orshot CLI

Source: https://orshot.com/docs/integrations/orshot-cli

Install the CLI globally using npm.

```bash
npm install -g orshot-cli
```

--------------------------------

### Non-Interactive Installation

Source: https://orshot.com/docs/integrations/agent-skill

Perform an automated installation suitable for CI/CD pipelines or scripting.

```bash
npx skills add orshot-hq/orshot-agent-skills -g -y -a cursor
```

--------------------------------

### Install Orshot SDK

Source: https://orshot.com/docs/sdks/node

Use npm to install the Orshot package.

```bash
npm
```

--------------------------------

### List Installed Skills

Source: https://orshot.com/docs/integrations/agent-skill

Displays all currently installed agent skills.

```bash
npx skills list
```

--------------------------------

### Search Brand Assets with JavaScript

Source: https://orshot.com/docs/api-reference/brand-assets-search

Examples of performing GET requests to search for assets, filter by type, or list all assets of a specific type.

```javascript
await fetch("https://api.orshot.com/v1/brand-assets/search?query=logo", {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer <ORSHOT_API_KEY>",
  },
});
```

```javascript
await fetch(
  "https://api.orshot.com/v1/brand-assets/search?query=primary&types=color,font",
  {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer <ORSHOT_API_KEY>",
    },
  }
);
```

```javascript
// Omit query to list all assets of the given type
await fetch("https://api.orshot.com/v1/brand-assets/search?types=font", {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer <ORSHOT_API_KEY>",
  },
});
```

--------------------------------

### Initialize Orshot Client

Source: https://orshot.com/docs/sdks/ruby

Setup the client instance using your API key.

```ruby
require 'orshot'

client = Orshot::Client.new('<ORSHOT_API_KEY>')
```

--------------------------------

### Publishing Configuration Examples

Source: https://orshot.com/docs/publish/publish-from-api

Configure the publish object for instant posts, drafts, or scheduled content.

```js
publish: {
  accounts: [1, 3],
  content: "Just shipped a new feature! 🚀"
}
// → [{ platform: "twitter", username: "acmehq", status: "published" },
//    { platform: "linkedin", username: "acmehq", status: "published" }]
```

```js
publish: {
  accounts: [1, 2],
  content: "Draft post — review before publishing",
  isDraft: true
}
// → [{ platform: "twitter", username: "acmehq", status: "drafted" },
//    { platform: "instagram", username: "acmeinsta", status: "drafted" }]
```

```js
publish: {
  accounts: [1, 2],
  content: "Launching next week!",
  schedule: {
    scheduledFor: "2030-01-15T14:00:00Z"
  },
  timezone: "America/New_York"
}
// → [{ platform: "twitter", username: "acmehq", status: "scheduled" },
//    { platform: "instagram", username: "acmeinsta", status: "scheduled" }]
```

--------------------------------

### Real-World Implementation Examples

Source: https://orshot.com/docs/dynamic-parameters/link

Practical use cases for marketing flyers, product catalogs, and reports.

```json
{
  "modifications": {
    "headline": "Limited Time Offer!",
    "cta_text": "Shop Now",
    "cta_text.href": "https://store.example.com/sale",
    "cta_text.fontSize": "28px",
    "cta_text.color": "#ffffff",
    "cta_text.backgroundColor": "#ff6600"
  },
  "response": {
    "format": "pdf",
    "type": "url"
  }
}
```

```json
{
  "modifications": {
    "product1_image.href": "https://shop.com/products/item-1",
    "product1_name": "Wireless Headphones",
    "product1_name.href": "https://shop.com/products/item-1",

    "product2_image.href": "https://shop.com/products/item-2",
    "product2_name": "Smart Watch",
    "product2_name.href": "https://shop.com/products/item-2"
  },
  "response": {
    "format": "pdf"
  }
}
```

```json
{
  "modifications": {
    "page1@source1.href": "https://research.com/paper/123",
    "page1@source1": "[1] Latest AI Research",

```

--------------------------------

### Full Example (Node.js)

Source: https://orshot.com/docs/developers/authorization-code

This example demonstrates the complete Authorization Code flow using Node.js and Express. It handles redirecting the user to Orshot for authorization, storing the code verifier, and exchanging the authorization code for tokens.

```javascript
import crypto from "crypto";
import express from "express";

const app = express();
const CLIENT_ID = process.env.ORSHOT_CLIENT_ID;
const CLIENT_SECRET = process.env.ORSHOT_CLIENT_SECRET;
const REDIRECT_URI = "http://localhost:3000/callback";

// Store verifiers by state (use a proper session store in production)
const pendingAuth = new Map();

app.get("/login", (req, res) => {
  const state = crypto.randomBytes(16).toString("hex");
  const codeVerifier = crypto.randomBytes(32).toString("base64url");
  const codeChallenge = crypto
    .createHash("sha256")
    .update(codeVerifier)
    .digest("base64url");

  pendingAuth.set(state, codeVerifier);

  const url = new URL("https://orshot.com/oauth/authorize");
  url.searchParams.set("client_id", CLIENT_ID);
  url.searchParams.set("redirect_uri", REDIRECT_URI);
  url.searchParams.set("response_type", "code");
  url.searchParams.set("code_challenge", codeChallenge);
  url.searchParams.set("code_challenge_method", "S256");
  url.searchParams.set("scope", "workspace:read render:generate");
  url.searchParams.set("state", state);

  res.redirect(url.toString());
});

app.get("/callback", async (req, res) => {
  const { code, state } = req.query;
  const codeVerifier = pendingAuth.get(state);

  if (!codeVerifier) {
    return res.status(400).send("Invalid state");
  }
  pendingAuth.delete(state);

  const response = await fetch("https://api.orshot.com/v1/oauth/token", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      grant_type: "authorization_code",
      client_id: CLIENT_ID,
      client_secret: CLIENT_SECRET,
      code,
      redirect_uri: REDIRECT_URI,
      code_verifier: codeVerifier,
    }),
  });

  const tokens = await response.json();
  // Store tokens securely — tokens.access_token, tokens.refresh_token
  res.json({ success: true, workspace_ids: tokens.workspace_ids });
});

app.listen(3000);

```

--------------------------------

### Install Orshot PHP SDK

Source: https://orshot.com/docs/sdks/php

Use Composer to install the Orshot package in your project.

```bash
composer require rishimohan/orshot
```

--------------------------------

### URL Validation Examples

Source: https://orshot.com/docs/dynamic-parameters/link

Examples of valid and invalid URL formats for the .href parameter.

```json
{
  "link.href": "https://example.com",
  "link.href": "http://example.com",
  "link.href": "https://example.com/path/to/page",
  "link.href": "https://example.com?param=value",
  "link.href": "https://subdomain.example.com"
}
```

```json
{
  "link.href": "", // Empty string
  "link.href": "   ", // Whitespace only
  "link.href": "not-a-url", // Missing protocol
  "link.href": "ftp://example.com" // Unsupported protocol
}
```

--------------------------------

### Install Orshot Ruby SDK

Source: https://orshot.com/docs/sdks/ruby

Installation methods for the Orshot gem via Gemfile or command line.

```ruby
gem 'orshot'
```

```bash
bundle install
```

```bash
gem install orshot
```

--------------------------------

### Combine All Video Parameters

Source: https://orshot.com/docs/dynamic-parameters/video

Example showing multiple video parameters applied to a single template.

```json
{
  "templateId": "your-template-id",
  "modifications": {
    "bgVideo": "https://example.com/product-demo.mp4",
    "bgVideo.trimStart": 0,
    "bgVideo.trimEnd": 10,
    "bgVideo.muted": false,
    "bgVideo.loop": false,
    "title": "Product Launch",
    "title.fontSize": "48px"
  },
  "response": {
    "type": "url",
    "format": "mp4"
  }
}
```

--------------------------------

### REST API Integration Example

Source: https://orshot.com/docs/dynamic-parameters/content-type

This example demonstrates how to use the Orshot REST API to render a template with dynamic modifications, including setting content types for elements.

```bash
curl -X POST https://api.orshot.com/v1/studio/render \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "templateId": "your-template-id",
    "modifications": {
      "slot": "https://example.com/image.png",
      "slot.contentType": "image",
      "slot.objectFit": "contain"
    },
    "response": {
      "format": "png",
      "type": "url"
    }
  }'
```

--------------------------------

### GET /templates/all

Source: https://orshot.com/docs/api-reference/studio-templates-list

Retrieves a list of all studio templates available to the authenticated workspace.

```APIDOC
## GET /templates/all

### Description
Retrieves a list of all studio templates. Each template includes details such as dimensions, tags, thumbnail URLs, and arrays for page data and available modifications.

### Method
GET

### Endpoint
/templates/all

### Response
#### Success Response (200)
- **id** (Integer) - Unique identifier for the template
- **created_at** (String) - Timestamp when the template was created
- **workspace_id** (String) - ID of the workspace the template belongs to
- **user_id** (String) - ID of the user who created the template
- **canvas_width** (Number) - Width of the template canvas in pixels
- **canvas_height** (Number) - Height of the template canvas in pixels
- **updated_at** (String) - Timestamp when the template was last updated
- **name** (String) - Name of the template
- **description** (String) - Description of the template
- **tags** (Array) - Array of tag strings assigned to the template
- **thumbnail_url** (String) - URL to the template's thumbnail image
- **embed_user_id** (String) - Internal ID of the embed user
- **pages_data** (Array) - Array of page objects
- **modifications** (Array) - Array of available modification objects

### Error Handling
- **400**: Invalid page/limit parameters
- **403**: Missing or invalid API key or no studio templates found in workspace

### Rate Limits
- **Limit**: 30 requests per minute per API key.
```

--------------------------------

### GET /v1/studio/templates

Source: https://orshot.com/docs/developers/oauth-endpoints

Retrieves a list of available studio templates.

```APIDOC
## GET /v1/studio/templates

### Description
Retrieves a list of available studio templates.

### Method
GET

### Endpoint
/v1/studio/templates

### Parameters
#### Required Scope
- workspace:templates:read
```

--------------------------------

### Loading State Implementation

Source: https://orshot.com/docs/orshot-embed/integration

React example showing how to display a loading indicator while the iframe initializes.

```jsx
function DesignEditor() {
  const [isLoading, setIsLoading] = useState(true);

  return (
    <div className="relative">
      {isLoading && (
        <div className="absolute inset-0 flex items-center justify-center bg-gray-50 rounded-lg">
          <div className="text-gray-500">Loading design editor...</div>
        </div>
      )}
      <iframe
        src="https://orshot.com/embeds/abc123def"
        title="Orshot Embed"
        allow="clipboard-write"
        onLoad={() => setIsLoading(false)}
        className="w-full h-[600px] border-none rounded-lg"
      />
    </div>
  );
}
```

--------------------------------

### Install PHP SDK via Composer

Source: https://orshot.com/docs/sdks/php

Use this command to add the SDK to your project dependencies.

```bash
composer require orshot/php-sdk
```

--------------------------------

### REST API Integration

Source: https://orshot.com/docs/dynamic-parameters/video

Example of triggering a render via the REST API with video parameters.

```bash
curl -X POST https://api.orshot.com/v1/studio/render \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "templateId": "video-template-id",
    "modifications": {
      "productVideo": "https://example.com/product.mp4",
      "productVideo.trimStart": 0,
      "productVideo.trimEnd": 15,
      "productVideo.muted": false,
      "headline": "New Arrival",
      "headline.fontSize": "56px"
    },
    "response": {
      "type": "url",
      "format": "mp4"
    }
  }'
```

--------------------------------

### Fetch Workflows Request

Source: https://orshot.com/docs/api-reference/workflows-list

Example of a GET request to retrieve active workflows with a limit of 20.

```js
await fetch("https://api.orshot.com/v1/workflows?status=active&limit=20", {
  method: "GET",
  headers: {
    Authorization: "Bearer <ORSHOT_API_KEY>",
  },
});
```

--------------------------------

### Fetch Template Folders Request

Source: https://orshot.com/docs/api-reference/template-folders-get

Example request using the fetch API with an authorization header.

```javascript
await fetch("https://api.orshot.com/v1/studio/folders", {
  method: "GET",
  headers: {
    Authorization: "Bearer <ORSHOT_API_KEY>",
  },
});
```

--------------------------------

### Fetch Workflow Request

Source: https://orshot.com/docs/api-reference/workflow-get

Example of a GET request using the Fetch API with an authorization header.

```js
await fetch("https://api.orshot.com/v1/workflows/44", {
  method: "GET",
  headers: {
    Authorization: "Bearer <ORSHOT_API_KEY>",
  },
});
```

--------------------------------

### Complete integration example

Source: https://orshot.com/docs/orshot-embed/custom-asset-picker

A full implementation handling multiple asset types within a single message listener.

```javascript
const iframe = document.querySelector("iframe");

window.addEventListener("message", (event) => {
  if (!event.origin.includes("orshot.com")) return;

  if (event.data.type === "orshot:asset:request") {
    const { type, requestId } = event.data.data;

    // Open your custom picker based on asset type
    switch (type) {
      case "image":
        showImagePicker((selectedImage) => {
          iframe.contentWindow.postMessage(
            {
              type: "orshot:asset:response",
              requestId,
              url: selectedImage.url,
              fileName: selectedImage.name,
            },
            "*"
          );
        });
        break;

      case "font":
        showFontPicker((selectedFont) => {
          iframe.contentWindow.postMessage(
            {
              type: "orshot:asset:response",
              requestId,
              url: selectedFont.fileUrl,
              fontFamily: selectedFont.name,
            },
            "*"
          );
        });
        break;

      case "color":
        showColorPicker((hex) => {
          iframe.contentWindow.postMessage(
            {
              type: "orshot:asset:response",
              requestId,
              value: hex,
            },
            "*"
          );
        });
        break;
    }
  }
});
```

--------------------------------

### Expose Local Server with Ngrok

Source: https://orshot.com/docs/orshot-embed/webhooks

Commands to install and run ngrok for exposing a local development server to the internet.

```bash
# Install ngrok
npm install -g ngrok

# Expose your local server
ngrok http 3000

# Use the HTTPS URL in your webhook settings
https://abc123.ngrok.io/api/studio-webhook
```

--------------------------------

### Basic Workflow

Source: https://orshot.com/docs/integrations/orshot-cli

A standard sequence for authenticating, listing templates, and generating a screenshot.

```bash
# Authenticate
orshot auth login your-api-key

# List available templates
orshot templates library

# Generate with modifications
orshot generate library website-screenshot \
  -m websiteUrl="https://github.com" \
  -o github-screenshot.png
```

--------------------------------

### Bulk Create Response Examples

Source: https://orshot.com/docs/api-reference/enterprise-template-bulk-create

JSON response structures for successful creation, thumbnail generation, and partial failure scenarios.

```json
{
  "success": true,
  "created": 5,
  "failed": 0,
  "templates": [
    {
      "id": 12345,
      "name": "Instagram Post - Square",
      "canvas_width": 1080,
      "canvas_height": 1080
    },
    {
      "id": 12346,
      "name": "Instagram Story",
      "canvas_width": 1080,
      "canvas_height": 1920
    },
    {
      "id": 12347,
      "name": "Facebook Cover",
      "canvas_width": 820,
      "canvas_height": 312
    },
    {
      "id": 12348,
      "name": "Twitter Header",
      "canvas_width": 1500,
      "canvas_height": 500
    },
    {
      "id": 12349,
      "name": "LinkedIn Banner",
      "canvas_width": 1128,
      "canvas_height": 191
    }
  ]
}
```

```json
{
  "success": true,
  "created": 2,
  "failed": 0,
  "templates": [
    {
      "id": 12345,
      "name": "Instagram Post - Square",
      "canvas_width": 1080,
      "canvas_height": 1080,
      "thumbnails": {
        "success": true,
        "pages": [
          {
            "page": 1,
            "page_id": "page-1-uuid",
            "thumbnail_url": "https://storage.orshot.com/cloud/w-50/renders/thumbnails/a1b2c3.png",
            "error": null
          }
        ]
      }
    },
    {
      "id": 12346,
      "name": "Instagram Story",
      "canvas_width": 1080,
      "canvas_height": 1920,
      "thumbnails": {
        "success": true,
        "pages": [
          {
            "page": 1,
            "page_id": "page-2-uuid",
            "thumbnail_url": "https://storage.orshot.com/cloud/w-50/renders/thumbnails/d4e5f6.png",
            "error": null
          }
        ]
      }
    }
  ]
}
```

```json
{
  "success": true,
  "created": 3,
  "failed": 2,
  "templates": [
    {
      "id": 12345,
      "name": "Valid Template 1",
      "canvas_width": 1080,
      "canvas_height": 1080
    },
    {
      "id": 12346,
      "name": "Valid Template 2",
      "canvas_width": 1200,
      "canvas_height": 628
    },
    {
      "id": 12347,
      "name": "Valid Template 3",
      "canvas_width": 800,
      "canvas_height": 600
    }
  ],
  "errors": [
    {
      "index": 3,
      "name": "Invalid Template",
      "errors": ["'canvas_width' must be between 1 and 8192"]
    },
    {
      "index": 4,
      "name": "Another Invalid",
      "errors": ["'name' is required and must be a string"]
    }
  ]
}
```

--------------------------------

### Manage Studio Templates

Source: https://orshot.com/docs/integrations/orshot-cli

Commands to list available studio templates and generate images using specific metadata.

```bash
# List studio templates
orshot templates studio

# Generate from studio template
orshot generate studio def456 -m name="John Doe" -m title="CEO"
```

--------------------------------

### JSON Payload Example

Source: https://orshot.com/docs/integrations/webhooks

Example JSON structure for sending field values to the Orshot webhook.

```json
{
  "name": "John Doe",
  "title": "Software Engineer",
  "avatar": "https://example.com/photo.jpg"
}
```

--------------------------------

### Install Orshot n8n Node

Source: https://orshot.com/docs/integrations/n8n

Use npm to install the Orshot node package into your n8n instance.

```bash
npm install n8n-nodes-orshot
```

--------------------------------

### Generate PDF

Source: https://orshot.com/docs/pdf-generation

This example demonstrates how to make a POST request to the /v1/studio/render endpoint to generate a PDF. It includes setting the response format to 'pdf' and providing template details and modifications.

```APIDOC
## POST /v1/studio/render

### Description
Generates a PDF from a Studio template.

### Method
POST

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

### Parameters
#### Request Body
- **templateId** (string) - Required - Your Studio template ID
- **modifications** (object) - Optional - Content overrides
- **response** (object) - Required - Response format and type settings
  - **format** (string) - Required - Set to "pdf"
  - **type** (string) - Optional - "url" or "binary"
  - **scale** (number) - Optional - Scale factor for output size
  - **fileName** (string) - Optional - Custom filename (without extension)
- **pdfOptions** (object) - Optional - PDF-specific settings
  - **margin** (string) - Optional - Margin around the PDF content (CSS value), defaults to "0px"
  - **dpi** (number) - Optional - Resolution, defaults to 72
  - **colorMode** (string) - Optional - Color mode: "rgb" or "cmyk", defaults to "rgb"
  - **rangeFrom** (number) - Optional - Start page for multi-page templates
  - **rangeTo** (number) - Optional - End page for multi-page templates

### Request Example
```json
{
  "templateId": "<YOUR_TEMPLATE_ID>",
  "modifications": {
    "recipient_name": "Jane Smith",
    "certificate_title": "Course Completion Certificate",
    "date": "March 25, 2026"
  },
  "response": {
    "format": "pdf",
    "type": "url"
  }
}
```

### Response
#### Success Response (200)
- **data** (object)
  - **content** (string) - URL or binary data of the generated PDF
  - **renders** (number) - Number of renders performed
  - **mimeType** (string) - MIME type of the content (e.g., "application/pdf")

#### Response Example
```json
{
  "data": {
    "content": "https://storage.orshot.com/cloud/renders/pdfs/invoice-001.pdf",
    "renders": 1,
    "mimeType": "application/pdf"
  }
}
```
```

--------------------------------

### Discover Templates

Source: https://orshot.com/docs/integrations/orshot-cli

List available library or studio templates.

```bash
# List library templates
orshot templates library

# List studio templates
orshot templates studio
```

--------------------------------

### Access CLI Help

Source: https://orshot.com/docs/integrations/orshot-cli

Commands to retrieve usage documentation for the CLI and its subcommands.

```bash
orshot --help
orshot generate --help
orshot templates --help
```

--------------------------------

### Install Orshot Vue SDK

Source: https://orshot.com/docs/orshot-embed/vue-sdk

Install the Orshot Embed Vue SDK using your preferred package manager.

```bash
npm install @orshot/embed-vue
# or
pnpm add @orshot/embed-vue
# or
yarn add @orshot/embed-vue
```

--------------------------------

### API Response Examples

Source: https://orshot.com/docs/integrations/dropbox

Examples of API responses covering successful uploads, multi-page handling, and error states.

```json
{
  "data": {
    "content": "https://store.orshot.com/cloud/w-50/renders/images/abc123.png",
    "type": "url",
    "format": "png",
    "responseTime": "1.2s"
  },
  "connections": [
    {
      "type": "storage",
      "provider": "dropbox",
      "path": "/Marketing/Campaign-2024/abc123.png",
      "status": "success"
    }
  ]
}
```

```json
{
  "data": [
    {
      "page": 1,
      "pageId": "a1b2c3d4-5e6f-7890-abcd-ef1234567890",
      "content": "https://storage.orshot.com/cloud/w-50/renders/images/abc123.png"
    },
    {
      "page": 2,
      "pageId": "b2c3d4e5-6f78-9012-bcde-f23456789012",
      "content": "https://storage.orshot.com/cloud/w-50/renders/images/def456.png"
    }
  ],
  "format": "png",
  "type": "url",
  "responseTime": 3166.01,
  "totalPages": 2,
  "renderedPages": 2,
  "connections": [
    {
      "type": "storage",
      "provider": "dropbox",
      "path": [
        { "page": 1, "path": "/Renders/template_page_1.png" },
        { "page": 2, "path": "/Renders/template_page_2.png" }
      ],
      "status": "success"
    }
  ]
}
```

```json
{
  "data": {
    "content": "https://store.orshot.com/cloud/w-50/renders/images/abc123.png",
    "type": "url",
    "format": "png",
    "responseTime": "1.2s"
  },
  "warnings": [
    {
      "title": "Failed to upload to dropbox: Token expired",
      "details": ""
    }
  ],
  "connections": [
    {
      "type": "storage",
      "provider": "dropbox",
      "path": null,
      "status": "error",
      "error": "Token expired"
    }
  ]
}
```

```json
{
  "data": {
    "content": "https://store.orshot.com/cloud/w-50/renders/images/abc123.png",
    "type": "url",
    "format": "png"
  },
  "warnings": [
    {
      "title": "Dropbox connection not found for this workspace",
      "details": ""
    }
  ]
}
```

--------------------------------

### Configure Video Options

Source: https://orshot.com/docs/video-generation/video-options

A comprehensive example of the videoOptions object, covering frame rate, quality, trimming, subtitle styling, and page transitions.

```json
{
  "videoOptions": {
    "fps": 30,
    "quality": 80,
    "trimStart": 0,
    "trimEnd": 20,
    "duration": 8,
    "muted": true,

    "subtitleSource": "https://example.com/subtitles.srt",
    "subtitleFontSize": "30px",
    "subtitleFontWeight": "700",
    "subtitleColor": "#ffffff",
    "subtitleBackground": "rgba(0,0,0,0.5)",
    "subtitleFontFamily": "Inter, sans-serif",
    "subtitlePosition": "bottom",
    "subtitleOffset": "50px",
    "subtitlePaddingX": "16px",
    "subtitlePaddingY": "8px",
    "subtitleBorderRadius": "6px",

    "combinePages": true,
    "pageTransition": "fade",
    "pageTransitionDuration": 0.5
  }
}
```

--------------------------------

### Install Orshot Embed React SDK

Source: https://orshot.com/docs/orshot-embed/react-sdk

Install the Orshot Embed React SDK using npm, pnpm, or yarn.

```bash
npm install @orshot/embed-react
# or
pnpm add @orshot/embed-react
# or
yarn add @orshot/embed-react
```

--------------------------------

### Install Skill for Specific Agents

Source: https://orshot.com/docs/integrations/agent-skill

Target specific AI coding agents during the installation process using the -a flag.

```bash
npx skills add orshot-hq/orshot-agent-skills -a cursor
npx skills add orshot-hq/orshot-agent-skills -a claude-code
npx skills add orshot-hq/orshot-agent-skills -a github-copilot
npx skills add orshot-hq/orshot-agent-skills -a windsurf
```

--------------------------------

### Example of Inline Parameter Usage

Source: https://orshot.com/docs/orshot-studio/inline-parameters

Demonstrates how to use placeholders in text and provide values via the API for rendering dynamic content.

```text
Hello {{name}}, welcome to {{city}}!
```

```json
{
  "modifications": {
    "greeting:name": "Sarah",
    "greeting:city": "New York"
  }
}
```

--------------------------------

### Update Agent Skills

Source: https://orshot.com/docs/integrations/agent-skill

Updates the installed skills to the latest version.

```bash
npx skills update
```

--------------------------------

### Generate Video from Studio Template

Source: https://orshot.com/docs/sdks/python

Render a video with custom trim and loop settings.

```python
response = os.render_from_studio_template({
  'template_id': 1234,
  'modifications': {
    'videoElement': 'https://example.com/custom-video.mp4',
    'videoElement.trimStart': 0,
    'videoElement.trimEnd': 10,
  },
  'response': { 'type': 'url', 'format': 'mp4' },
  'video_options': {
    'trim_start': 0,
    'trim_end': 20,
    'muted': False,
    'loop': True,
  },
})
```

--------------------------------

### Domain Restrictions Configuration

Source: https://orshot.com/docs/orshot-embed/integration

Example of defining allowed domains for the embed.

```javascript
// Add your domains in embed settings
const allowedDomains = [
  "https://yourapp.com",
  "https://staging.yourapp.com",
  "http://localhost:3000", // for development
];
```

--------------------------------

### Update Text Content

Source: https://orshot.com/docs/api-reference/enterprise-update-modifications

Example of updating text elements by their parameterId.

```json
{
  "page": 1,
  "modifications": {
    "headline": "Summer Sale 2026!",
    "subtitle": "Up to 50% off all items",
    "cta_text": "Shop Now"
  }
}
```

--------------------------------

### Initialize Orshot Client

Source: https://orshot.com/docs/sdks/python

Import the library and initialize the client with your API key.

```python
import orshot

os = orshot.Orshot('<ORSHOT_API_KEY>')
```

--------------------------------

### Generate Video from Studio Template

Source: https://orshot.com/docs/sdks/php

Render a video with custom trim, loop, and audio settings.

```php
$response = $client->renderFromStudioTemplate([
  'templateId' => 1234,
  'modifications' => [
    'videoElement' => 'https://example.com/custom-video.mp4',
    'videoElement.trimStart' => 0,
    'videoElement.trimEnd' => 10,
  ],
  'response' => [ 'type' => 'url', 'format' => 'mp4' ],
  'videoOptions' => [
    'trimStart' => 0,
    'trimEnd' => 20,
    'muted' => false,
    'loop' => true,
    'fps' => 30,
    'audioSource' => 'https://example.com/audio.mp3',
  ],
]);
```

--------------------------------

### Get Current User

Source: https://orshot.com/docs/developers/examples

Fetches the details of the currently authenticated user.

```APIDOC
## Get Current User

### Description
Fetches the details of the currently authenticated user.

### Method
GET

### Endpoint
https://api.orshot.com/v1/me

### Request Example
```javascript
const response = await fetch("https://api.orshot.com/v1/me", {
  headers: {
    Authorization: `Bearer ${accessToken}`,
  },
});

const user = await response.json();
// { id: "user_...", name: "John Doe", email: "john@example.com", ... }
```

### Response
#### Success Response (200)
- **id** (string) - The unique identifier for the user.
- **name** (string) - The name of the user.
- **email** (string) - The email address of the user.

#### Response Example
```json
{
  "id": "user_...",
  "name": "John Doe",
  "email": "john@example.com"
}
```
```

--------------------------------

### GET /v1/studio/templates/:templateId

Source: https://orshot.com/docs/api-reference/studio-template-get

Retrieve a specific studio template by its ID.

```APIDOC
## GET /v1/studio/templates/:templateId

### Description
Retrieve a specific studio template by its ID, including all available modifications and template metadata.

### Method
GET

### Endpoint
https://api.orshot.com/v1/studio/templates/:templateId

### Parameters
#### Path Parameters
- **templateId** (Integer) - Required - The unique ID of the template to fetch

### Request Example
```js
await fetch("https://api.orshot.com/v1/studio/templates/123", {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer <ORSHOT_API_KEY>",
  },
});
```

### Response
#### Success Response (200)
- **id** (Integer) - Unique identifier for the template
- **created_at** (String) - Timestamp when the template was created
- **workspace_id** (String) - ID of the workspace the template belongs to
- **user_id** (String) - ID of the user who created the template
- **canvas_width** (Number) - Width of the template canvas in pixels
- **canvas_height** (Number) - Height of the template canvas in pixels
- **updated_at** (String) - Timestamp when the template was last updated
- **name** (String) - Name of the template
- **description** (String) - Description of the template
- **tags** (Array) - Array of tag strings assigned to the template
- **thumbnail_url** (String) - URL to the template's thumbnail image
- **embed_user_id** (String) - Internal ID of the embed user
- **modifications** (Array) - Array of available modifications for parameters
- **modifications_json** (Object) - Key-value map of parameter IDs to default values
- **pages_data** (Array) - Array of pages

#### Response Example
{
  "id": 123,
  "created_at": "2025-09-10T15:30:45.123Z",
  "workspace_id": "workspace-uuid-456",
  "user_id": "user-uuid-789",
  "canvas_width": 1200,
  "canvas_height": 630,
  "updated_at": "2025-10-15T10:20:30.456Z",
  "name": "Social Media Post",
  "description": "Template for social media posts",
  "tags": ["social", "marketing"],
  "thumbnail_url": "https://storage.orshot.com/thumbnails/template-123.png",
  "embed_user_id": null,
  "modifications": [],
  "modifications_json": {},
  "pages_data": []
}
```

--------------------------------

### Create Template Requests

Source: https://orshot.com/docs/api-reference/enterprise-template-create

Examples for creating templates, either as a blank canvas or with a pre-defined page structure.

```js
// Create a blank template with specified dimensions
await fetch("https://api.orshot.com/v1/studio/templates/create", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer <ORSHOT_API_KEY>",
  },
  body: JSON.stringify({
    name: "Product Banner",
    description: "E-commerce product showcase banner",
    canvas_width: 1200,
    canvas_height: 628,
    embed_user_id: "your-external-user-id" // Optional
  }),
});
```

```js
// Create a template with pre-built page structure
await fetch("https://api.orshot.com/v1/studio/templates/create", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer <ORSHOT_API_KEY>",
  },
  body: JSON.stringify({
    name: "Social Media Post",
    description: "Instagram post template",
    canvas_width: 1080,
    canvas_height: 1080,
    pages_data: [
      {
        id: "page-1-uuid",
        name: "Page 1",
        canvas: {
          width: 1080,
          height: 1080,
          backgroundColor: "#ffffff"
        },
        elements: [
          {
            id: "headline-element",
            type: "text",
            x: 100,
            y: 200,
            width: 880,
            height: 100,
            content: "Your Headline Here",
            parameterId: "headline",
            parameterizable: true
          },
          {
            id: "image-element",
            type: "image",
            x: 100,
            y: 350,
            width: 880,
            height: 500,
            src: "https://example.com/placeholder.png",
            parameterId: "product_image",
            parameterizable: true
          }
        ],
        modifications: []
      }
    ]
  }),
});
```

--------------------------------

### Interactive Mode

Source: https://orshot.com/docs/integrations/orshot-cli

Use interactive mode to guide through template modifications.

```bash
orshot generate library website-screenshot --interactive
```

--------------------------------

### Render response structure

Source: https://orshot.com/docs/sdks/ruby

Example of the JSON response returned by the render_from_template method.

```json
{
  "data": {
    "content": "https://storage.orshot.com/.../image.png",
    "format": "png",
    "type": "url",
    "responseTime": 3550.43
  }
}
```

--------------------------------

### Create Template Folder Request

Source: https://orshot.com/docs/api-reference/template-folders-post

Example request using the fetch API to create a new folder.

```javascript
await fetch("https://api.orshot.com/v1/studio/folders", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer <ORSHOT_API_KEY>",
  },
  body: JSON.stringify({
    name: "Social Posts",
  }),
});
```

--------------------------------

### Webhook Event Payloads

Source: https://orshot.com/docs/orshot-embed/webhooks

Example JSON payloads for template lifecycle events.

```json
{
  "event_type": "template.create",
  "template": {
    "id": "abc123",
    "name": "My New Design",
    "workspace_id": "workspace_789",
    "user_id": "user_456",
    "canvas_data": {...},
    "canvas_width": 1080,
    "canvas_height": 1080,
    "current_version": "1.0",
    "thumbnail_url": "https://...",
    "description": "Template description",
    "pages_data": [
      {
        "id": "page_1",
        "name": "Page 1",
        "thumbnail_url": "https://...",
        "canvas_data": {...}
      }
    ],
    "created_at": "2024-01-15T10:30:00Z",
    "updated_at": "2024-01-15T10:30:00Z"
  },
  "workspace_id": "workspace_789",
  "user_id": "user_456",
  "timestamp": "2024-01-15T10:30:00Z"
}
```

```json
{
  "event_type": "template.update",
  "template": {
    "id": "abc123",
    "name": "My Updated Design",
    "workspace_id": "workspace_789",
    "user_id": "user_456",
    "canvas_data": {...},
    "canvas_width": 1080,
    "canvas_height": 1350,
    "current_version": "1.1",
    "thumbnail_url": "https://...",
    "description": "Updated template description",
    "pages_data": [
      {
        "id": "page_1",
        "name": "Page 1",
        "thumbnail_url": "https://...",
        "canvas_data": {...}
      },
      {
        "id": "page_2",
        "name": "Page 2",
        "thumbnail_url": "https://...",
        "canvas_data": {...}
      }
    ],
    "created_at": "2024-01-15T10:30:00Z",
    "updated_at": "2024-01-15T11:45:00Z"
  },
  "workspace_id": "workspace_789",
  "user_id": "user_456",
  "timestamp": "2024-01-15T11:45:00Z"
}
```

```json
{
  "event_type": "template.delete",
  "template": {
    "id": "abc123",
    "name": "My Template",
    "workspace_id": "789"
  },
  "workspace_id": "789",
  "user_id": "user_456",
  "timestamp": "2024-01-15T12:00:00Z"
}
```

--------------------------------

### Generate Video from Studio Template

Source: https://orshot.com/docs/sdks/node

Render a video with custom trim and audio settings.

```js
const response = await orshot.renderFromStudioTemplate({
  templateId: 1234,
  modifications: {
    videoElement: "https://example.com/custom-video.mp4",
    "videoElement.trimStart": 0,
    "videoElement.trimEnd": 10,
  },
  response: { type: "url", format: "mp4" },
  videoOptions: {
    trimStart: 0,
    trimEnd: 20,
    muted: false,
    loop: true,
    fps: 30,
    audioSource: "https://example.com/audio.mp3",
  },
});
```

--------------------------------

### Output Formats

Source: https://orshot.com/docs/integrations/orshot-cli

Generate media in different formats or retrieve a download URL.

```bash
# Generate PNG (default)
orshot generate library website-screenshot -m websiteUrl="https://example.com" -o website.png

# Generate JPG
orshot generate library website-screenshot -m websiteUrl="https://example.com" -f jpg -o website.jpg

# Generate PDF
orshot generate library website-screenshot -m websiteUrl="https://example.com" -f pdf -o website.pdf

# Get download URL instead of file
orshot generate library website-screenshot -m websiteUrl="https://example.com" -t url
```

--------------------------------

### Generate Video from Studio Template

Source: https://orshot.com/docs/sdks/ruby

Render a video with custom trim settings and playback options.

```ruby
response = client.render_from_studio_template({
  'template_id' => 1234,
  'modifications' => {
    'videoElement' => 'https://example.com/custom-video.mp4',
    'videoElement.trimStart' => 0,
    'videoElement.trimEnd' => 10,
  },
  'response' => { 'type' => 'url', 'format' => 'mp4' },
  'video_options' => {
    'trim_start' => 0,
    'trim_end' => 20,
    'muted' => false,
    'loop' => true,
  },
})
```

--------------------------------

### Get Template Modifications

Source: https://orshot.com/docs/developers/examples

Retrieves a list of available modifications for a specific template.

```APIDOC
## Get Template Modifications

### Description
Retrieves a list of available modifications for a specific template.

### Method
GET

### Endpoint
https://api.orshot.com/v1/studio/templates/{templateId}/modifications

### Path Parameters
- **templateId** (string) - Required. The ID of the template.

### Headers
- **Authorization** (string) - Bearer token for authentication.
- **x-workspace-id** (string) - Optional. The ID of the workspace to target.

### Request Example
```javascript
const response = await fetch(
  "https://api.orshot.com/v1/studio/templates/123/modifications",
  {
    headers: {
      Authorization: `Bearer ${accessToken}`,
      "x-workspace-id": "50", // Optional: target specific workspace
    },
  },
);

const modifications = await response.json();
// [{ name: "title", type: "text" }, { name: "avatar", type: "image" }, ...]
```

### Response
#### Success Response (200)
- **name** (string) - The name of the modification.
- **type** (string) - The type of modification (e.g., "text", "image").

#### Response Example
```json
[
  {
    "name": "title",
    "type": "text"
  },
  {
    "name": "avatar",
    "type": "image"
  }
]
```
```