HomeGuidesSDK ExamplesAnnouncementsCommunity
Guides
Start typing to search…

Coding PowerPoint Exports

Overview

The generate_slide_from_layout_json function creates PowerPoint slides from a structured JSON layout format. This system supports various element types including text, charts, tables, images, and containers, with automatic positioning and styling.

Supported Element Types

1. Text Elements

Paragraph

  • Purpose: Regular text content with full styling support
  • Required Properties: type, column, row, width, height, text
  • Supported Styles:
    • fontSize: Font size ( "14px" and "14pt" and “14rem” are currently all treated the same, the number is being stripped of the unit and treated as pixels)
    • fontFamily: Font family (defaults to "Calibri")
    • color: Text color (hex codes like "#333333" or named colors like "red", "blue")
    • textAlign: Text alignment ("left", "right", "center")
    • fontWeight: Font weight ("bold", "normal")
    • fontStyle: Font style ("italic", "normal")
    • backgroundColor: Background color
    • lineHeight: Line spacing (e.g., "1.5")

Header

  • Purpose: Title and header text with enhanced styling
  • Properties: Same as Paragraph
  • Special Features: Automatically applies bold formatting for header hierarchy

Markdown

  • Purpose: Markdown-formatted text with automatic HTML conversion
  • Supported Markdown Features:
    • Headers: # H1, ## H2, ### H3 (automatically sized: H1=24pt, H2=20pt, H3=18pt, etc.)
    • Bold: **bold text** or __bold text__
    • Italic: *italic text* or _italic text_
    • Bullet Lists: - item or * item (converted to PowerPoint bullets)
    • Links: [text](url) (converted to hyperlinks)
    • Line Breaks: Double newlines or two spaces + newline
  • Limitations:
    • Code blocks are stripped (``` markers removed)
    • No support for tables, images, or complex formatting
    • No nested lists support

2. Chart Elements (HighchartsChart)

Supported Chart Types (Native PowerPoint)

  • Column: "column" → PowerPoint clustered column chart
    • Line: "line" or "smooth line" → PowerPoint line chart
    • Area: "area" or "smooth area" → PowerPoint area chart
    • Bar: "bar" → PowerPoint clustered bar chart
    • Pie: "pie" → PowerPoint pie chart
    • Donut: "donut" or pie with innerSize → PowerPoint doughnut chart
    • Scatter: "scatter" → PowerPoint XY scatter chart

Chart Configuration

  • Data Format: Supports both array format \[1, 2, 3\] and object format \[{y: 1}, {y: 2}\]
  • Series: Multiple series supported with names
  • Categories: X-axis categories via xAxis.categories
  • NaN Handling: Automatically converts NaN values to null
  • Legend: Controlled by legend object in options
  • Title: Set via title.text in options

Unsupported Chart Types (Screenshot Fallback)

  • Waterfall charts: Not supported by PowerPoint, falls back to screenshot
  • Heatmaps: Falls back to screenshot
  • Treemaps: Falls back to screenshot
  • Any custom Highcharts types: Falls back to screenshot

Chart Fallback Mechanism

When native PowerPoint chart creation fails due to unsupported chart types the system will fallback to image capture

3. Data Tables (DataTable)

The tables will automatically size based on content which can lead to overflow of content off of the slide. Choose table sizes that are appropriate for your layout.

  • Header Row: First row automatically formatted as header
  • Column Definitions: Support for custom column names and formatting
  • Conditional Formatting: Data bars supported via conditionalFormat.type: "databar"
  • Minimum Sizing: Ensures minimum 1 inch per column width
  • Row Height: Consistent 0.3 inch row height

Images

Supported Sources

  • External Images: Referenced by URL or file path
  • Screenshot Generation: Automatic screenshot of web elements
  • Element Locator: Uses img\#{element\_id} CSS selector for targeting

Container Elements

CardContainer

  • Purpose: adding rectangular shapes to slide
  • Styling: Background colors, borders, padding supported

FlexContainer

  • Not supported

Layout System

Grid-Based Positioning

  • Coordinate System: Uses column, row, width, height properties
  • Default Grid: 160 columns × 90 rows
  • Column Width: 0.625% of slide width per column
  • Row Height: 1.11% of slide height per row
  • Slide Dimensions: 13.33" × 7.5" (standard PowerPoint)

Styling System

Supported CSS Properties

  • Colors: Hex codes (#ffffff), named colors (red, blue, green, etc.)
  • Fonts: Font family, size, weight, style
  • Borders: Width, style, color (supports CSS shorthand)
  • Background: Background colors
  • Text: Alignment, decoration, line height

Border Support

  • Shorthand: "border": "1px solid #000000"
  • Individual: borderWidth, borderStyle, borderColor
  • Styles: solid, dashed, dotted, double, groove, ridge, inset, outset, none

Best Practices

For Reliable PowerPoint Generation

  1. Use supported chart types for native PowerPoint charts
  2. Include required properties (column, row, width, height) for all visual elements
  3. Test with simple layouts first before adding complexity
  4. Use hex color codes rather than named colors for consistency

Layout Design

  1. Grid Planning: Design layouts on 160×90 grid system
  2. Minimum Sizes: Ensure elements are at least 1×1 grid units
  3. Container Hierarchy: Use containers to group related elements
  4. Text Sizing: Account for PowerPoint's text rendering differences

Updated about 14 hours ago