Render Template API

Last modified: May 16, 2025

This endpoint allows you to render images based on templates from your library by providing dynamic data to replace template elements. The API supports both traditional nested JSON format and a new flattened dot notation format for easier integration.

POST Endpoint

https://api.bulkdesign.app/render/template

Authentication

Authentication is required using Bearer token with your API key:

Authorization: Bearer <YOUR_API_KEY>

Sample Request

curl --request POST \
     --url https://api.bulkdesign.app/render/template \
     --header 'Authorization: Bearer <YOUR_API_KEY>' \
     --header 'Content-Type: application/json' \
     --data '{
            "templateId": "template-123456",
            "format": "jpg",
            "jsonData": {
              "headline.content": "Welcome to BulkDesign!",
              "headline.fontSize": 24,
              "profile-image.src": "https://example.com/profile.jpg"
            },
            "quality": 90
        }'

Alternative Sample Request (Nested Format)

curl --request POST \
     --url https://api.bulkdesign.app/render/template \
     --header 'Authorization: Bearer <YOUR_API_KEY>' \
     --header 'Content-Type: application/json' \
     --data '{
            "templateId": "template-123456",
            "format": "jpg",
            "jsonData": {
              "headline": {
                "content": "Welcome to BulkDesign!",
                "fontSize": 24
              },
              "profile-image": {
                "src": "https://example.com/profile.jpg"
              }
            },
            "quality": 90
        }'

Sample Request with Table Data

curl --request POST \
     --url https://api.bulkdesign.app/render/template \
     --header 'Authorization: Bearer <YOUR_API_KEY>' \
     --header 'Content-Type: application/json' \
     --data '{
            "templateId": "template-123456",
            "format": "jpg",
            "jsonData": {
              "sales-table.data": [
                ["Product", "Sales", "Growth"],
                ["Product A", "$50,000", "+12%"],
                ["Product B", "$75,000", "+8%"],
                ["Product C", "$60,000", "+15%"]
              ],
              "sales-table.headerBackgroundColor": "#2563eb",
              "sales-table.headerTextColor": "#ffffff",
              "sales-table.striped": true,
              "sales-table.fitToContainer": true
            },
            "quality": 90
        }'

Sample Request with Chart Data (Single-Series)

curl --request POST \
     --url https://api.bulkdesign.app/render/template \
     --header 'Authorization: Bearer <YOUR_API_KEY>' \
     --header 'Content-Type: application/json' \
     --data '{
            "templateId": "template-123456",
            "format": "jpg",
            "jsonData": {
              "sales-chart.data": [
                { "label": "Q1", "value": 125000, "color": "#3b82f6" },
                { "label": "Q2", "value": 150000, "color": "#ef4444" },
                { "label": "Q3", "value": 175000, "color": "#10b981" },
                { "label": "Q4", "value": 200000, "color": "#f59e0b" }
              ],
              "sales-chart.orientation": "vertical",
              "sales-chart.showValues": true,
              "sales-chart.backgroundColor": "#f8fafc"
            },
            "quality": 90
        }'

Sample Request with Multi-Series Chart Data

curl --request POST \
     --url https://api.bulkdesign.app/render/template \
     --header 'Authorization: Bearer <YOUR_API_KEY>' \
     --header 'Content-Type: application/json' \
     --data '{
            "templateId": "template-123456",
            "format": "jpg",
            "jsonData": {
              "performance-chart.categories": ["Sales", "Marketing", "Support", "Development"],
              "performance-chart.series": [
                {
                  "name": "2023",
                  "data": [85, 78, 92, 88],
                  "color": "#6b7280"
                },
                {
                  "name": "2024",
                  "data": [92, 85, 95, 94],
                  "color": "#3b82f6"
                }
              ],
              "performance-chart.orientation": "vertical",
              "performance-chart.showLegend": true,
              "performance-chart.legendPosition": "top",
              "performance-chart.showValues": true,
              "performance-chart.autoScale": true,
              "performance-chart.backgroundColor": "#f8fafc"
            },
            "quality": 90
        }'

Sample Request with Rating and Barcode

curl --request POST \
     --url https://api.bulkdesign.app/render/template \
     --header 'Authorization: Bearer <YOUR_API_KEY>' \
     --header 'Content-Type: application/json' \
     --data '{
            "templateId": "template-123456",
            "format": "jpg",
            "jsonData": {
              "product-rating.value": 4.5,
              "product-rating.maxRating": 5,
              "product-rating.showValue": true,
              "product-rating.fillColor": "#ffd700",
              "product-barcode.content": "1234567890123",
              "product-barcode.format": "EAN13",
              "product-barcode.displayValue": true
            },
            "quality": 90
        }'

Request Body

• templateId (required) - The unique identifier for your template
• format (optional) - Output format of the image (jpg, png, webp, pdf). Defaults to jpg
• jsonData (required) - Values to replace in the template. Structure should match your template's replaceable elements
• quality (optional) - Image quality (1-100, JPG only)
• webhookUrl (optional) - URL to receive notification when rendering is complete (makes request asynchronous)

Synchronous vs Asynchronous Rendering

The API supports both synchronous and asynchronous rendering modes:

Synchronous Rendering (Default)

When no webhookUrl is provided, the request is processed synchronously. The API will wait for the rendering to complete before sending a response. This is suitable for simple templates with quick rendering times.

Asynchronous Rendering with Webhooks

When a webhookUrl is provided, the request becomes asynchronous:

1. The API immediately returns a 202 Accepted response with a job ID
2. The rendering process continues in the background
3. When complete, the system sends a POST request to your webhookUrl

Example asynchronous request:

curl --request POST \
     --url https://api.bulkdesign.app/render/template \
     --header 'Authorization: Bearer <YOUR_API_KEY>' \
     --header 'Content-Type: application/json' \
     --data '{
            "templateId": "template-123456",
            "format": "jpg",
            "jsonData": {
              "headline.content": "Welcome to BulkDesign!",
              "headline.color": "#FF5733"
            },
            "quality": 90,
            "webhookUrl": "https://your-server.com/webhook"
        }'

Asynchronous Response (202 Accepted)

{
  "status": "pending",
  "renderId": "job-id-123",
  "message": "Rendering started asynchronously. You will be notified via webhook when complete."
}

Webhook Callback

When rendering completes, your webhook endpoint will receive a POST request with the following data:

On Success:

{
  "status": "completed",
  "renderId": "job-id-123",
  "url": "https://api.bulkdesign.app/uploads/remotion/image-hash-123456.jpg"
}

On Failure:

{
  "status": "failed",
  "renderId": "job-id-123",
  "error": "Error message explaining what went wrong"
}

Understanding jsonData Structure

The jsonData object supports two formats for providing dynamic data to replace template elements:

1. Nested Object Format (Original)

The traditional nested format where keys match your template's element IDs, with nested properties matching the element's attributes:

{
  "element-id": {
    "property": "value"
  }
}

For example, to update text content and color:

{
  "headline": {
    "content": "New Headline Text",
    "color": "#FF5733"
  },
  "profile-image": {
    "src": "https://example.com/profile.jpg"
  }
}

2. Flattened Dot Notation Format (New)

For easier integration with platforms where constructing complex JSON is difficult, you can use a flattened format with dot notation:

{
  "element-id.property": "value"
}

The same example above using dot notation:

{
  "headline.content": "New Headline Text",
  "headline.color": "#FF5733",
  "profile-image.src": "https://example.com/profile.jpg"
}

3. Mixed Format

Both formats can be used together in the same request:

{
  "headline.content": "New Headline Text",
  "headline.fontSize": 24,
  "profile-image": {
    "src": "https://example.com/profile.jpg",
    "cornerRadius": 8
  }
}

Deep Nesting Support

The dot notation format also supports deep nesting for complex properties:

{
  "element-id.style.color": "#FF5733",
  "element-id.style.fontSize": 16,
  "element-id.position.x": 100,
  "element-id.position.y": 200
}

Supported Properties

Depending on the element type, different properties can be modified:

• Text elements: content, color, fontSize, fontFamily, etc.
• Image elements: src, alt, cornerRadius, etc.
• Shape elements: fillColor, strokeColor, strokeWidth, etc.
• Table elements: data, headers, borderColor, cellBackgroundColor, fitToContainer, etc.

For a complete list of supported properties for each element type, see the Detailed Property Reference section below.

Successful Response

A successful response returns a 200 status code with the URL to the rendered image:

{
  "url": "https://api.bulkdesign.app/uploads/remotion/image-hash-123456.jpg"
}

Error Response

Unsuccessful responses return appropriate status codes with error details:

{
  "error": "Missing templateId in request body"
}

Common error codes:

• 400 - Bad request (missing parameters or invalid data)
• 401 - Unauthorized (invalid API key)
• 404 - Template not found

Credits Usage

Each successful render consumes one credit from your account. The system automatically tracks render history and credit usage.

Usage Considerations

Choosing Between Synchronous and Asynchronous

• Use synchronous rendering for simple templates and when you need the result immediately
• Use asynchronous rendering for:
  • Complex templates that take longer to render
  • Batch processing multiple renders
  • High-volume operations
  • Preventing timeouts on long-running renders

Webhook Requirements

When using asynchronous rendering:

• Your webhook endpoint must be publicly accessible
• It should respond with a 2xx status code to acknowledge receipt
• It should be able to handle POST requests with JSON payloads
• Consider implementing retry logic for webhook receiving

Image Caching

Rendered images are cached based on the request parameters. Identical requests will return the same image URL without consuming additional credits.

Image Retention

Rendered images are stored for 30 days by default. For longer retention, please contact support.

Rate Limiting

Rendered images are cached based on the request parameters. Identical requests will return the same image URL without consuming additional credits.

Detailed Property Reference

The following properties are supported for each element type in your templates. You can modify these properties through the jsonData parameter.

Common Properties (All Elements)

{
  "element-id": {
    "height": 100,
    "width": 200,
    "left": 10,
    "top": 20,
    "color": "#FF5733",
    "rotate": 45,
    "scaleX": 1.2,
    "scaleY": 0.8,
    "opacity": 0.8,
    "backgroundColor": "#F5F5F5"
  }
}

• height - Element height in pixels
• width - Element width in pixels
• left - Horizontal position from the left edge
• top - Vertical position from the top edge
• color - General color property (used differently based on element type)
• rotate - Rotation angle in degrees
• scaleX - Horizontal scale factor
• scaleY - Vertical scale factor
• opacity - Transparency value between 0 and 1

Text Elements

{
  "text-element-id": {
    "content": "New headline text",
    "fontSize": 24,
    "fontFamily": "Arial, sans-serif",
    "color": "#333333",
    "lineHeight": 1.5,
    "textAlign": "center",
    "fitMode": "fit",
    "bold": true,
    "italic": false,
    "underline": false,
    "textDecoration": "none",
    "letterSpacing": "1px",
    "wordSpacing": "1px",
    "strokeWidth": 1,
    "strokeColor": "#000000",
    "shadowColor": "rgba(0,0,0,0.3)",
    "shadowBlur": 5,
    "shadowOffsetX": 2,
    "shadowOffsetY": 2
  }
}

• content - The text content
• fontSize - Font size in pixels
• fontFamily - Font family name(s)
• color - Text color
• lineHeight - Line height multiplier
• textAlign - Text alignment ("left", "center", or "right")
• fitMode - How the text should fit in its container ("fit", "fill", or "none")
• bold - Whether text should be bold (true/false)
• italic - Whether text should be italicized (true/false)
• underline - Whether text should be underlined (true/false)
• textDecoration - Text decoration (e.g., "underline", "line-through")
• letterSpacing - Space between letters
• wordSpacing - Space between words
• strokeWidth - Width of text outline
• strokeColor - Color of text outline
• shadowColor - Color of text shadow
• shadowBlur - Blur amount of text shadow
• shadowOffsetX - Horizontal offset of text shadow
• shadowOffsetY - Vertical offset of text shadow

Image Elements

{
  "image-element-id": {
    "src": "https://example.com/new-image.jpg",
    "alt": "Description of image",
    "flipX": false,
    "flipY": false,
    "cornerRadius": 8,
    "borderWidth": 2,
    "borderColor": "#333333",
    "shadowColor": "rgba(0,0,0,0.3)",
    "shadowOffsetX": 3,
    "shadowOffsetY": 3,
    "shadowBlur": 5,
    "shadowOpacity": 0.5,
    "fitMode": "cover"
  }
}

• src - URL of the image
• alt - Alternative text for the image
• flipX - Whether to flip horizontally (true/false)
• flipY - Whether to flip vertically (true/false)
• cornerRadius - Radius for rounded corners
• borderWidth - Width of image border
• borderColor - Color of image border
• shadowColor - Color of image shadow
• shadowOffsetX - Horizontal offset of image shadow
• shadowOffsetY - Vertical offset of image shadow
• shadowBlur - Blur amount of image shadow
• shadowOpacity - Opacity of image shadow
• fitMode - How the image should fit in its container ("contain", "cover", "fill", or "none")

Shape Elements (Rectangle, Circle, Triangle, Ellipse, Pentagon)

{
  "shape-element-id": {
    "fillColor": "#FF5733",
    "strokeColor": "#333333",
    "strokeWidth": 2,
    "borderRadius": 5
  }
}

• fillColor - Fill color of the shape
• strokeColor - Outline color of the shape
• strokeWidth - Width of the shape outline
• borderRadius - Radius for rounded corners (rectangles only)
• radius - Radius of a circle (circles only)

Table Elements

{
  "table-element-id": {
    "data": [
      ["Name", "Age", "City"],
      ["John Doe", "25", "New York"],
      ["Jane Smith", "30", "Los Angeles"]
    ],
    "headers": ["Name", "Age", "City"],
    "showHeaders": true,
    "borderWidth": 1,
    "borderColor": "#e5e7eb",
    "headerBackgroundColor": "#f3f4f6",
    "headerTextColor": "#374151",
    "cellBackgroundColor": "#ffffff",
    "cellTextColor": "#374151",
    "alternateRowColor": "#f9fafb",
    "fontSize": 14,
    "fontFamily": "Arial, sans-serif",
    "textAlign": "left",
    "cellPadding": 8,
    "rowHeight": 40,
    "striped": true,
    "hoverable": false,
    "cornerRadius": 4,
    "fitToContainer": true,
    "autoRowHeight": true,
    "autoColumnWidth": true,
    "minRowHeight": 30,
    "maxRowHeight": 80,
    "minColumnWidth": 80,
    "maxColumnWidth": 300,
    "tableLayout": "fixed"
  }
}

Data Structure Properties

• data - Two-dimensional array containing table data (required)
• headers - Array of column headers
• showHeaders - Whether to display table headers (true/false)

Styling Properties

• borderWidth - Width of table borders in pixels
• borderColor - Color of table borders
• headerBackgroundColor - Background color of header cells
• headerTextColor - Text color of header cells
• cellBackgroundColor - Background color of data cells
• cellTextColor - Text color of data cells
• alternateRowColor - Background color for alternate rows (when striped is enabled)
• fontSize - Font size for table text in pixels
• fontFamily - Font family for table text
• textAlign - Text alignment in cells ("left", "center", or "right")
• cellPadding - Internal padding of cells in pixels
• rowHeight - Height of table rows in pixels
• cornerRadius - Radius for rounded table corners

Display Options

• striped - Whether to show alternating row colors (true/false)
• hoverable - Whether rows should highlight on hover (true/false)

Adaptive Layout Properties

• fitToContainer - Whether table should adapt to container dimensions (true/false)
• autoRowHeight - Whether to automatically adjust row height based on container (true/false)
• autoColumnWidth - Whether to automatically adjust column width based on container (true/false)
• minRowHeight - Minimum row height in pixels (when autoRowHeight is enabled)
• maxRowHeight - Maximum row height in pixels (when autoRowHeight is enabled)
• minColumnWidth - Minimum column width in pixels (when autoColumnWidth is enabled)
• maxColumnWidth - Maximum column width in pixels (when autoColumnWidth is enabled)
• tableLayout - Table layout algorithm ("fixed" or "auto")

Table Data Format Examples

Simple CSV-style data:

{
  "table-element-id": {
    "data": [
      ["Product", "Price", "Stock"],
      ["Laptop", "$999", "15"],
      ["Mouse", "$25", "50"],
      ["Keyboard", "$75", "30"]
    ]
  }
}

Using dot notation for table data:

{
  "table-element-id.data": [
    ["Name", "Email", "Status"],
    ["John Smith", "[email protected]", "Active"],
    ["Jane Doe", "[email protected]", "Pending"]
  ],
  "table-element-id.headerBackgroundColor": "#4f46e5",
  "table-element-id.headerTextColor": "#ffffff",
  "table-element-id.striped": true
}

Adaptive table configuration:

{
  "table-element-id": {
    "fitToContainer": true,
    "autoRowHeight": true,
    "autoColumnWidth": true,
    "minRowHeight": 35,
    "maxRowHeight": 60,
    "minColumnWidth": 100,
    "maxColumnWidth": 250,
    "tableLayout": "fixed"
  }
}

Complete table rendering example:

{
  "sales-table": {
    "data": [
      ["Q1", "$125,000", "15%"],
      ["Q2", "$150,000", "20%"],
      ["Q3", "$175,000", "17%"],
      ["Q4", "$200,000", "14%"]
    ],
    "headers": ["Quarter", "Revenue", "Growth"],
    "showHeaders": true,
    "headerBackgroundColor": "#1f2937",
    "headerTextColor": "#ffffff",
    "cellBackgroundColor": "#ffffff",
    "cellTextColor": "#374151",
    "alternateRowColor": "#f9fafb",
    "striped": true,
    "borderWidth": 1,
    "borderColor": "#d1d5db",
    "fontSize": 14,
    "textAlign": "center",
    "fitToContainer": true,
    "autoRowHeight": true,
    "minRowHeight": 40,
    "maxRowHeight": 60
  }
}

Bar Chart Elements

Bar chart elements support both single-series and multi-series data formats, with extensive customization options for styling and behavior.

Single-Series Format (Legacy Support)

{
  "barchart-element-id": {
    "data": [
      { "label": "Jan", "value": 65, "color": "#3b82f6" },
      { "label": "Feb", "value": 59, "color": "#ef4444" },
      { "label": "Mar", "value": 80, "color": "#10b981" },
      { "label": "Apr", "value": 45, "color": "#f59e0b" }
    ],
    "orientation": "vertical",
    "showLabels": true,
    "showValues": true,
    "showGrid": true,
    "showAxes": true,
    "showLegend": false,
    "barSpacing": 10,
    "barCornerRadius": 2,
    "maxValue": 100,
    "minValue": 0,
    "autoScale": true,
    "defaultBarColor": "#3b82f6",
    "gridColor": "#e5e7eb",
    "axisColor": "#6b7280",
    "labelColor": "#374151",
    "valueColor": "#374151",
    "backgroundColor": "transparent",
    "labelFont": "Arial",
    "labelFontSize": 12,
    "valueFont": "Arial",
    "valueFontSize": 10,
    "chartPadding": 40,
    "animationDuration": 1000,
    "animationDelay": 0
  }
}

Multi-Series Format (Recommended)

{
  "barchart-element-id": {
    "categories": ["Q1", "Q2", "Q3", "Q4"],
    "series": [
      {
        "name": "Revenue",
        "data": [125000, 150000, 175000, 200000],
        "color": "#3b82f6"
      },
      {
        "name": "Profit",
        "data": [25000, 35000, 45000, 55000],
        "color": "#10b981"
      },
      {
        "name": "Expenses",
        "data": [100000, 115000, 130000, 145000],
        "color": "#ef4444"
      }
    ],
    "orientation": "vertical",
    "showLabels": true,
    "showValues": true,
    "showGrid": true,
    "showAxes": true,
    "showLegend": true,
    "legendPosition": "top",
    "barSpacing": 10,
    "barCornerRadius": 2,
    "maxValue": 250000,
    "minValue": 0,
    "autoScale": false,
    "defaultBarColor": "#3b82f6",
    "gridColor": "#e5e7eb",
    "axisColor": "#6b7280",
    "labelColor": "#374151",
    "valueColor": "#374151",
    "backgroundColor": "transparent",
    "legendColor": "#374151",
    "labelFont": "Arial",
    "labelFontSize": 12,
    "valueFont": "Arial",
    "valueFontSize": 10,
    "legendFont": "Arial",
    "legendFontSize": 12,
    "chartPadding": 40,
    "animationDuration": 1000,
    "animationDelay": 0
  }
}

Data Structure Properties

Single-Series Format:

• data - Array of objects with label, value, and optional color properties

Multi-Series Format:

• categories - Array of category labels for the x-axis (or y-axis in horizontal mode)
• series - Array of series objects, each containing:
  • name - Series name (displayed in legend)
  • data - Array of numeric values
  • color - Color for this series (optional, falls back to defaultBarColor)

Chart Orientation and Display

• orientation - Chart orientation ("vertical" or "horizontal")
• showLabels - Whether to display axis labels (true/false)
• showValues - Whether to display values on bars (true/false)
• showGrid - Whether to display grid lines (true/false)
• showAxes - Whether to display chart axes (true/false)
• showLegend - Whether to display legend for multi-series charts (true/false)
• legendPosition - Position of legend ("top", "bottom", "left", "right")

Value Range and Scaling

• maxValue - Maximum value for the chart scale
• minValue - Minimum value for the chart scale
• autoScale - Whether to automatically scale the chart based on data (true/false)

Bar Styling

• barSpacing - Space between bar groups as percentage (default: 10)
• barCornerRadius - Radius for rounded bar corners in pixels
• defaultBarColor - Default color for bars without specific colors

Colors and Visual Styling

• gridColor - Color of grid lines
• axisColor - Color of chart axes
• labelColor - Color of axis labels
• valueColor - Color of value labels on bars
• backgroundColor - Background color of the chart ("transparent" or color value)
• legendColor - Color of legend text

Typography

• labelFont - Font family for axis labels
• labelFontSize - Font size for axis labels in pixels
• valueFont - Font family for value labels
• valueFontSize - Font size for value labels in pixels
• legendFont - Font family for legend text
• legendFontSize - Font size for legend text in pixels

Layout and Animation

• chartPadding - Internal padding of the chart area in pixels
• animationDuration - Duration of chart animations in milliseconds
• animationDelay - Delay before animation starts in milliseconds

Usage Examples

Simple single-series bar chart:

{
  "monthly-sales.data": [
    { "label": "Jan", "value": 12500, "color": "#3b82f6" },
    { "label": "Feb", "value": 15000, "color": "#10b981" },
    { "label": "Mar", "value": 18000, "color": "#f59e0b" }
  ],
  "monthly-sales.orientation": "vertical",
  "monthly-sales.showValues": true,
  "monthly-sales.backgroundColor": "#f8fafc"
}

Multi-series comparison chart:

{
  "quarterly-comparison.categories": ["Q1 2024", "Q2 2024", "Q3 2024", "Q4 2024"],
  "quarterly-comparison.series": [
    {
      "name": "This Year",
      "data": [125000, 150000, 175000, 200000],
      "color": "#3b82f6"
    },
    {
      "name": "Last Year",
      "data": [100000, 120000, 140000, 160000],
      "color": "#6b7280"
    }
  ],
  "quarterly-comparison.showLegend": true,
  "quarterly-comparison.legendPosition": "top",
  "quarterly-comparison.autoScale": true
}

Horizontal bar chart with custom styling:

{
  "performance-chart.categories": ["Sales", "Marketing", "Support", "Development"],
  "performance-chart.series": [
    {
      "name": "Performance Score",
      "data": [85, 92, 78, 95],
      "color": "#10b981"
    }
  ],
  "performance-chart.orientation": "horizontal",
  "performance-chart.barCornerRadius": 4,
  "performance-chart.barSpacing": 15,
  "performance-chart.maxValue": 100,
  "performance-chart.showGrid": true,
  "performance-chart.gridColor": "#e2e8f0"
}

Pie Chart Elements

{
  "piechart-element-id": {
    "data": [
      { "label": "Category A", "value": 30, "color": "#3b82f6" },
      { "label": "Category B", "value": 25, "color": "#ef4444" },
      { "label": "Category C", "value": 20, "color": "#10b981" }
    ],
    "showLabels": true,
    "showValues": false,
    "showPercentages": true,
    "showLegend": true,
    "legendPosition": "right",
    "innerRadius": 0,
    "outerRadius": 80,
    "startAngle": 0,
    "padAngle": 0,
    "explodeDistance": 0,
    "explodeAll": false,
    "explodeIndices": [],
    "strokeWidth": 2,
    "strokeColor": "#ffffff",
    "defaultSliceColor": "#3b82f6",
    "backgroundColor": "transparent",
    "labelColor": "#374151",
    "valueColor": "#374151",
    "legendColor": "#374151",
    "labelFontSize": 12,
    "valueFontSize": 10,
    "legendFontSize": 12,
    "legendSpacing": 20
  }
}

Data Structure Properties

• data - Array of objects with label, value, and optional color properties

Display Options

• showLabels - Whether to display slice labels (true/false)
• showValues - Whether to display values on slices (true/false)
• showPercentages - Whether to display percentages (true/false)
• showLegend - Whether to display legend (true/false)
• legendPosition - Position of legend ("top", "bottom", "left", "right")

Chart Styling

• innerRadius - Inner radius as percentage of outer radius (0 = pie chart, >0 = donut chart)
• outerRadius - Outer radius as percentage of container size
• startAngle - Starting angle in degrees
• padAngle - Angle between slices in degrees

Explode Effects

• explodeDistance - Distance to separate slices
• explodeAll - Whether to explode all slices (true/false)
• explodeIndices - Array of slice indices to explode

Colors and Typography

• strokeWidth - Width of slice borders
• strokeColor - Color of slice borders
• defaultSliceColor - Default color for slices without specific colors
• backgroundColor - Background color of the chart
• labelColor - Color of slice labels
• valueColor - Color of value labels
• legendColor - Color of legend text
• labelFontSize - Font size for slice labels
• valueFontSize - Font size for value labels
• legendFontSize - Font size for legend text
• legendSpacing - Spacing between legend items

Rating Elements

{
  "rating-element-id": {
    "value": 4,
    "maxRating": 5,
    "precision": "full",
    "style": "star",
    "size": 24,
    "spacing": 4,
    "fillColor": "#ffd700",
    "emptyColor": "#e0e0e0",
    "strokeColor": "#000000",
    "strokeWidth": 0,
    "showValue": false,
    "showMaxValue": false,
    "valuePosition": "right",
    "valueFontSize": 16,
    "valueColor": "#333333",
    "readonly": true,
    "allowClear": false,
    "direction": "horizontal",
    "animation": false,
    "glowEffect": false,
    "glowColor": "#ffd700"
  }
}

Rating Properties

• value - Current rating value
• maxRating - Maximum rating value
• precision - Rating precision ("full", "half", or "quarter")
• style - Rating style ("star", "heart", "thumb", or "circle")

Visual Properties

• size - Size of rating icons in pixels
• spacing - Space between rating icons
• fillColor - Color of filled/active icons
• emptyColor - Color of empty/inactive icons
• strokeColor - Color of icon borders
• strokeWidth - Width of icon borders

Display Options

• showValue - Whether to display numeric value (true/false)
• showMaxValue - Whether to display maximum value (true/false)
• valuePosition - Position of value text ("left", "right", "top", "bottom")
• valueFontSize - Font size for value text
• valueColor - Color of value text

Behavior Properties

• readonly - Whether rating is read-only (true/false)
• allowClear - Whether rating can be cleared (true/false)
• direction - Layout direction ("horizontal" or "vertical")
• animation - Whether to animate rating changes (true/false)
• glowEffect - Whether to apply glow effect (true/false)
• glowColor - Color of glow effect

Barcode Elements

{
  "barcode-element-id": {
    "content": "123456789012",
    "format": "CODE128",
    "lineWidth": 2,
    "barcodeHeight": 100,
    "displayValue": true,
    "fontSize": 20,
    "textAlign": "center",
    "textPosition": "bottom",
    "textMargin": 2,
    "background": "#ffffff",
    "lineColor": "#000000",
    "margin": 10
  }
}

Barcode Properties

• content - The data to encode in the barcode
• format - Barcode format ("CODE128", "CODE39", "EAN13", "EAN8", "UPC", etc.)
• lineWidth - Width of barcode lines
• barcodeHeight - Height of the barcode in pixels

Text Display

• displayValue - Whether to display the barcode value as text (true/false)
• fontSize - Font size for the displayed text
• textAlign - Text alignment ("left", "center", "right")
• textPosition - Position of text relative to barcode ("top", "bottom")
• textMargin - Margin between barcode and text

Styling Properties

• background - Background color of the barcode
• lineColor - Color of barcode lines
• margin - Margin around the barcode

Table Elements - Special Considerations

Data Format Requirements

When working with table elements, keep these important points in mind:

1. Data Structure: The data property must be a two-dimensional array where each sub-array represents a row
2. Consistent Columns: All rows should have the same number of columns for proper rendering
3. String Values: All cell values should be strings or will be converted to strings during rendering
4. Headers Alignment: If using headers, ensure the number of headers matches the number of columns in your data

Adaptive Layout Best Practices

1. Container Sizing: When using fitToContainer: true, ensure your template container has appropriate dimensions
2. Minimum Constraints: Set reasonable minRowHeight and minColumnWidth values to maintain readability
3. Content Length: Consider text length when setting maximum column widths to avoid excessive truncation
4. Layout Mode: Use "fixed" layout for consistent appearance, "auto" for content-driven sizing

Performance Considerations

1. Large Tables: Tables with many rows or columns may take longer to render
2. Complex Styling: Extensive use of shadows, borders, and alternating colors may impact render time
3. Image Content: If table cells contain image URLs, rendering time will include image loading time

Common Use Cases

• Reports: Financial reports, sales data, performance metrics
• Comparisons: Product comparisons, feature matrices
• Schedules: Event schedules, timetables
• Lists: Contact lists, inventory lists, price lists