PowerPoint Export: Layout Property Reference

This document describes the supported layout properties when exporting visualizations to PowerPoint (.pptx). Use this reference to understand what elements and styling options will render correctly in exported presentations.

Overview
Grid System
Supported Element Types
Common Properties
Text Elements
Data Tables
Charts
Images
Containers
Color Support
Border Support
Limitations
Complete Example

Overview

The PPT export feature converts layout JSON into PowerPoint slides. Layouts use a grid-based positioning system where elements are placed using row/column coordinates and sized using grid units.

Key Characteristics:

Slide dimensions: 13.33 inches × 7.5 inches (16:9 aspect ratio)
Grid-based positioning system
Supports text, tables, charts, images, and container elements
Unsupported elements fall back to screenshot capture

Grid System

Layouts use a conceptual grid of 90 rows × 160 columns by default.

Grid Configuration

{
  "type": "GridPanel",
  "rows": 90,
  "columns": 160,
  "rowHeight": "1.11%",
  "columnWidth": "0.625%",
  "children": [...]
}

Property	Default	Description
`rowHeight`	`"1.11%"`	Height of each row as percentage of slide height
`columnWidth`	`"0.625%"`	Width of each column as percentage of slide width

Position Calculation

Elements are positioned using grid coordinates that convert to inches:

left = (column - 1) × columnWidth% × 13.33 inches
top = (row - 1) × rowHeight% × 7.5 inches
width = widthUnits × columnWidth% × 13.33 inches
height = heightUnits × rowHeight% × 7.5 inches

Supported Element Types

Type	Description	Native PPT Rendering
`Paragraph`	Basic text content	Yes
`Header`	Text headers	Yes
`Markdown`	Markdown-formatted text	Yes
`DataTable`	Data tables with styling	Yes
`HighchartsChart`	Chart visualizations	Yes
`Image`	External images via URL	Yes
`CardContainer`	Container with background/border	Yes
`FlexContainer`	Flexible layout container	Yes
`Document`	Complex documents	Screenshot fallback

Common Properties

All visual elements support these positioning and visibility properties:

{
  "type": "Paragraph",
  "row": 10,
  "column": 5,
  "width": 50,
  "height": 10,
  "hidden": false,
  "name": "element-identifier",
  "style": { ... },
  "extraStyles": "key1:value1;key2:value2"
}

Property	Type	Required	Description
`type`	string	Yes	Element type (see supported types)
`row`	number	Yes	Grid row position (1-based)
`column`	number	Yes	Grid column position (1-based)
`width`	number	Yes	Width in grid units
`height`	number	Yes	Height in grid units
`hidden`	boolean	No	If `true`, element is not rendered
`name`	string	No	Element identifier (used for screenshot fallback)
`style`	object	No	CSS-like styling properties
`extraStyles`	string	No	Additional styles as semicolon-separated pairs

Text Elements

Paragraph

Basic text content with optional styling.

{
  "type": "Paragraph",
  "row": 5,
  "column": 10,
  "width": 60,
  "height": 8,
  "text": "This is paragraph text.",
  "style": {
    "color": "#333333",
    "font-size": "14px",
    "font-family": "Calibri",
    "textAlign": "left"
  }
}

Header

Text headers, typically with larger/bolder styling.

{
  "type": "Header",
  "row": 2,
  "column": 10,
  "width": 80,
  "height": 6,
  "text": "Section Title",
  "style": {
    "font-size": "24px",
    "font-weight": "bold",
    "color": "#1a1a1a"
  }
}

Markdown

Supports common Markdown syntax converted to formatted text.

{
  "type": "Markdown",
  "row": 10,
  "column": 5,
  "width": 70,
  "height": 20,
  "text": "## Summary\n\nThis report shows **important metrics**:\n\n* Revenue increased 15%\n* Costs decreased 8%\n* Profit margin improved"
}

Supported Markdown Syntax:

Syntax	Description
`# Heading`	H1 heading
`## Heading`	H2 heading
`### Heading`	H3 heading
`bold`	Bold text
`__bold__`	Bold text (alternate)
`italic`	Italic text
`_italic_`	Italic text (alternate)
`[text](url)`	Hyperlinks
`* item`	Bullet list item
`- item`	Bullet list item
`+ item`	Bullet list item
Double newline	Paragraph break

Text Styling Properties

These properties are supported in the style object for text elements:

Property	Values	Default	Description
`color`	Hex or named color	`#000000`	Text color
`font-size`	CSS size (e.g., `"16px"`)	`"16px"`	Font size
`font-family`	Font name	`"Calibri"`	Font family
`font-weight`	`"bold"`, `"normal"`	`"normal"`	Font weight
`font-style`	`"italic"`, `"normal"`	`"normal"`	Font style
`text-decoration`	`"underline"`, `"none"`	`"none"`	Text decoration
`textAlign`	`"left"`, `"center"`, `"right"`	`"left"`	Horizontal alignment
`verticalAlign`	`"top"`, `"middle"`, `"bottom"`	`"top"`	Vertical alignment
`backgroundColor`	Hex or named color	None	Background fill color
`background-color`	Hex or named color	None	Background fill (alternate)
`background`	Hex or named color	None	Background fill (alternate)

Note: Both camelCase (backgroundColor) and kebab-case (background-color) property names are supported.

Data Tables

Tables render with headers, data rows, and optional captions/footnotes.

Basic Table

{
  "type": "DataTable",
  "row": 20,
  "column": 10,
  "width": 80,
  "height": 40,
  "columns": [
    { "name": "Product" },
    { "name": "Q1 Sales" },
    { "name": "Q2 Sales" }
  ],
  "data": [
    ["Widget A", "$1,200", "$1,450"],
    ["Widget B", "$890", "$920"],
    ["Widget C", "$2,100", "$2,300"]
  ]
}

Table with Full Styling

{
  "type": "DataTable",
  "row": 20,
  "column": 10,
  "width": 80,
  "height": 40,
  "columns": [
    { "name": "Region", "style": { "textAlign": "left" } },
    { "name": "Revenue", "style": { "textAlign": "right" } },
    { "name": "Growth", "style": { "textAlign": "center" } }
  ],
  "data": [
    ["North", "$2.4M", "+12%"],
    ["South", "$1.8M", "+8%"],
    ["East", "$3.1M", "+15%"],
    ["West", "$2.7M", "+10%"]
  ],
  "caption": "Regional Performance Summary",
  "footnote": "Data as of Q2 2024",
  "styles": {
    "th": {
      "backgroundColor": "#1a365d",
      "color": "#ffffff",
      "textAlign": "center",
      "fontWeight": "bold"
    },
    "td": {
      "backgroundColor": "#ffffff",
      "color": "#333333"
    },
    "caption": {
      "fontWeight": "bold",
      "fontSize": "14px"
    },
    "footnote": {
      "fontSize": "10px",
      "color": "#666666"
    },
    "alternateRowColor": "#f0f4f8"
  }
}

Table Properties

Property	Type	Required	Description
`columns`	array	Yes	Column definitions
`columns[].name`	string	Yes	Column header text
`columns[].style`	object	No	Column-specific styling
`data`	array	Yes	2D array of cell values
`caption`	string	No	Table title (above table)
`footnote`	string	No	Table footer (below table)
`styles`	object	No	Table-wide styling

Table Styling

Style Object	Properties	Description
`styles.th`	`backgroundColor`, `color`, `textAlign`, `verticalAlign`, `fontWeight`, `fontSize`	Header row styles
`styles.td`	Same as `th`	Data cell styles
`styles.caption`	`fontWeight`, `fontSize`, `color`, `backgroundColor`	Caption styles
`styles.footnote`	Same as `caption`	Footnote styles
`styles.alternateRowColor`	Color value	Alternating row background

Default Header Styling:

Background: #E6E6E6
Text color: #000000
Alignment: Center
Vertical alignment: Middle

Charts

Charts are rendered using PowerPoint's native chart engine. The layout accepts Highcharts-compatible configuration.

Supported Chart Types

Layout Type	PowerPoint Type	Notes
`column`	Column Clustered	Default type
`line`	Line
`smooth line`	Line	Rendered as standard line
`area`	Area
`smooth area`	Area	Rendered as standard area
`bar`	Bar Clustered	Horizontal bars
`pie`	Pie
`donut`	Doughnut	Use `innerSize` on pie
`scatter`	XY Scatter

Column/Bar Chart

{
  "type": "HighchartsChart",
  "row": 15,
  "column": 5,
  "width": 75,
  "height": 50,
  "options": {
    "chart": {
      "type": "column"
    },
    "title": {
      "text": "Quarterly Sales"
    },
    "xAxis": {
      "categories": ["Q1", "Q2", "Q3", "Q4"]
    },
    "series": [
      {
        "name": "2023",
        "data": [120, 145, 162, 178]
      },
      {
        "name": "2024",
        "data": [135, 158, 175, 192]
      }
    ],
    "legend": {}
  }
}

Line Chart

{
  "type": "HighchartsChart",
  "row": 15,
  "column": 5,
  "width": 75,
  "height": 50,
  "options": {
    "chart": {
      "type": "line"
    },
    "title": {
      "text": "Monthly Trend"
    },
    "xAxis": {
      "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
    },
    "series": [
      {
        "name": "Revenue",
        "data": [100, 120, 115, 134, 168, 172]
      }
    ]
  }
}

Pie Chart

{
  "type": "HighchartsChart",
  "row": 15,
  "column": 5,
  "width": 50,
  "height": 50,
  "options": {
    "chart": {
      "type": "pie"
    },
    "title": {
      "text": "Market Share"
    },
    "series": [
      {
        "name": "Share",
        "data": [
          { "name": "Product A", "y": 45 },
          { "name": "Product B", "y": 30 },
          { "name": "Product C", "y": 25 }
        ]
      }
    ]
  }
}

Donut Chart

{
  "type": "HighchartsChart",
  "row": 15,
  "column": 5,
  "width": 50,
  "height": 50,
  "options": {
    "chart": {
      "type": "pie"
    },
    "title": {
      "text": "Category Distribution"
    },
    "plotOptions": {
      "pie": {
        "innerSize": "60%"
      }
    },
    "series": [
      {
        "name": "Distribution",
        "data": [
          { "name": "Category A", "y": 40 },
          { "name": "Category B", "y": 35 },
          { "name": "Category C", "y": 25 }
        ]
      }
    ]
  }
}

Scatter Chart

{
  "type": "HighchartsChart",
  "row": 15,
  "column": 5,
  "width": 60,
  "height": 50,
  "options": {
    "chart": {
      "type": "scatter"
    },
    "title": {
      "text": "Price vs. Volume"
    },
    "series": [
      {
        "name": "Products",
        "data": [
          [10, 200],
          [15, 180],
          [20, 220],
          [25, 195],
          [30, 240]
        ]
      }
    ]
  }
}

Point Marker Colors for Scatter Charts

{
  "type": "HighchartsChart",
  "row": 15,
  "column": 5,
  "width": 60,
  "height": 50,
  "options": {
    "chart": { "type": "scatter" },
    "title": { "text": "Product Performance" },
    "xAxis": {
      "title": { "text": "Price ($)" }
    },
    "yAxis": {
      "title": { "text": "Units Sold" }
    },
    "series": [
      {
        "name": "Products",
        "data": [
          { "x": 10, "y": 200, "name": "Budget", "color": "#22c55e" },
          { "x": 25, "y": 150, "name": "Standard", "color": "#3b82f6" },
          { "x": 50, "y": 80, "name": "Premium", "color": "#a855f7" },
          { "x": 75, "y": 45, "name": "Luxury", "color": "#f59e0b" }
        ]
      }
    ]
  }
}

Chart Configuration Properties

Property	Description
`options.chart.type`	Chart type (see supported types)
`options.title.text`	Chart title
`options.xAxis.categories`	Array of X-axis category labels
`options.series`	Array of data series
`options.series[].name`	Series name (appears in legend)
`options.series[].data`	Series data values
`options.series[].color`	Series color (hex or named) - applies to all data points
`options.legend`	Include to show legend (empty object `{}` for defaults)
`options.plotOptions.pie.innerSize`	Inner radius for donut charts (e.g., `"60%"`)

Axis Titles

Property	Description
`options.xAxis.title.text`	X-axis title/label
`options.yAxis.title.text`	Y-axis title/label

Example with axis titles:

{
  "type": "HighchartsChart",
  "options": {
    "chart": { "type": "scatter" },
    "title": { "text": "Price vs Volume" },
    "xAxis": {
      "title": { "text": "Price ($)" },
      "categories": ["Q1", "Q2", "Q3", "Q4"]
    },
    "yAxis": {
      "title": { "text": "Volume (units)" }
    },
    "series": [...]
  }
}

Series Data Formats

Simple values:

"data": [10, 20, 30, 40]

Objects with y-values:

"data": [
  { "y": 10 },
  { "y": 20 },
  { "y": 30 }
]

Named data points (pie/donut):

"data": [
  { "name": "Category A", "y": 45 },
  { "name": "Category B", "y": 30 }
]

XY pairs (scatter):

"data": [[10, 100], [20, 150], [30, 120]]

With custom colors:

"data": [
  { "y": 45, "color": "#ff6b6b" },
  { "y": 30, "color": "#4ecdc4" },
  { "y": 25, "color": "#45b7d1" }
]

Images

Images are loaded from URLs and embedded in the presentation.

{
  "type": "Image",
  "row": 5,
  "column": 120,
  "width": 30,
  "height": 20,
  "src": "https://example.com/logo.png"
}

Image Properties

Property	Type	Description
`src`	string	Image URL (preferred)
`url`	string	Image URL (fallback if `src` not present)

Notes:

Authentication headers are automatically included for internal URLs
If the image fails to load, the element falls back to screenshot capture
Supported formats: PNG, JPG, GIF.

Containers

CardContainer

A rectangular container that can hold child elements with background and border styling.

{
  "type": "CardContainer",
  "row": 10,
  "column": 5,
  "width": 70,
  "height": 40,
  "style": {
    "backgroundColor": "#f8f9fa",
    "border": "1px solid #dee2e6"
  },
  "children": [
    {
      "type": "Header",
      "row": 12,
      "column": 7,
      "width": 66,
      "height": 5,
      "text": "Card Title"
    },
    {
      "type": "Paragraph",
      "row": 18,
      "column": 7,
      "width": 66,
      "height": 30,
      "text": "Card content goes here..."
    }
  ]
}

FlexContainer

A container that automatically distributes child elements in a row or column direction.

{
  "type": "FlexContainer",
  "row": 10,
  "column": 5,
  "width": 150,
  "height": 30,
  "direction": "row",
  "children": [
    {
      "type": "Paragraph",
      "text": "Column 1"
    },
    {
      "type": "Paragraph",
      "text": "Column 2"
    },
    {
      "type": "Paragraph",
      "text": "Column 3"
    }
  ]
}

FlexContainer Properties

Property	Values	Default	Description
`direction`	`"row"`, `"column"`	`"column"`	Layout direction
`children`	array	`[]`	Child elements

Layout Behavior:

Row direction: Children are distributed horizontally with equal widths
Column direction: Children are distributed vertically with equal heights
Child positioning (row/column/width/height) is calculated automatically based on the container dimensions

Color Support

Supported Formats

Hexadecimal:

"color": "#ff6b6b"
"backgroundColor": "#1a365d"

Named Colors:

Color Name	Hex Value
`red`	`#ff0000`
`blue`	`#0000ff`
`green`	`#008000`
`black`	`#000000`
`white`	`#ffffff`
`yellow`	`#ffff00`
`gray` / `grey`	`#808080`
`orange`	`#ffa500`
`purple`	`#800080`
`pink`	`#ffc0cb`

Border Support

Border Shorthand

"style": {
  "border": "2px solid #333333"
}

Individual Border Properties

"style": {
  "border-width": "2px",
  "border-style": "solid",
  "border-color": "#333333"
}

Supported Border Styles

Style	Description
`solid`	Solid line
`dashed`	Dashed line
`dotted`	Dotted line
`double`	Double line
`groove`	3D grooved border
`ridge`	3D ridged border
`inset`	3D inset border
`outset`	3D outset border
`none`	No border

Limitations

Unsupported Features

The following features are not supported in PPT export:

Feature	Notes
Smooth line/area charts	Rendered as standard line/area
Table cell merging	Not supported
Conditional formatting (data bars)	Defined but not rendered
Custom fonts beyond system fonts	Falls back to Calibri
Animations	Static export only
Interactive elements	Static export only
Gradient backgrounds	Use solid colors
Shadows/effects	Limited support
Complex CSS (flexbox, grid)	Use FlexContainer for basic layouts

Fallback Behavior

Elements that cannot be rendered natively will fall back to screenshot capture:

The element is rendered in the browser
A screenshot is captured and embedded as an image
This ensures all content appears, but loses editability

Elements that may trigger screenshot fallback:

Document type elements
Elements with unsupported styling
Failed image loads
Complex nested structures

Known Constraints

Font sizes are converted from CSS pixels to PowerPoint points using a scaling factor
Table column widths have a minimum of 1.0 inch
Chart legends use default positioning
Text alignment is limited to left, center, right (no justify)
Vertical alignment is limited to top, middle, bottom

Complete Example

{
  "type": "GridPanel",
  "rows": 90,
  "columns": 160,
  "rowHeight": "1.11%",
  "columnWidth": "0.625%",
  "children": [
    {
      "type": "Header",
      "row": 3,
      "column": 5,
      "width": 100,
      "height": 6,
      "text": "Q3 2024 Performance Report",
      "style": {
        "font-size": "28px",
        "font-weight": "bold",
        "color": "#1a365d"
      }
    },
    {
      "type": "Paragraph",
      "row": 10,
      "column": 5,
      "width": 70,
      "height": 5,
      "text": "Executive Summary",
      "style": {
        "font-size": "18px",
        "font-weight": "bold",
        "color": "#2d3748"
      }
    },
    {
      "type": "Markdown",
      "row": 16,
      "column": 5,
      "width": 70,
      "height": 20,
      "text": "Key highlights from this quarter:\n\n* Revenue grew **15%** year-over-year\n* Customer acquisition costs decreased by *8%*\n* Net promoter score improved to 72"
    },
    {
      "type": "HighchartsChart",
      "row": 10,
      "column": 85,
      "width": 70,
      "height": 35,
      "options": {
        "chart": { "type": "column" },
        "title": { "text": "Monthly Revenue" },
        "xAxis": {
          "categories": ["Jul", "Aug", "Sep"]
        },
        "series": [
          {
            "name": "2023",
            "data": [1200000, 1350000, 1420000]
          },
          {
            "name": "2024",
            "data": [1380000, 1520000, 1635000]
          }
        ],
        "legend": {}
      }
    },
    {
      "type": "DataTable",
      "row": 40,
      "column": 5,
      "width": 150,
      "height": 35,
      "caption": "Regional Performance",
      "columns": [
        { "name": "Region", "style": { "textAlign": "left" } },
        { "name": "Revenue", "style": { "textAlign": "right" } },
        { "name": "Growth", "style": { "textAlign": "center" } },
        { "name": "Target", "style": { "textAlign": "right" } },
        { "name": "Status", "style": { "textAlign": "center" } }
      ],
      "data": [
        ["North America", "$4.2M", "+18%", "$4.0M", "Exceeded"],
        ["Europe", "$2.8M", "+12%", "$3.0M", "On Track"],
        ["Asia Pacific", "$1.9M", "+25%", "$1.5M", "Exceeded"],
        ["Latin America", "$0.8M", "+8%", "$1.0M", "Below"]
      ],
      "styles": {
        "th": {
          "backgroundColor": "#1a365d",
          "color": "#ffffff"
        },
        "alternateRowColor": "#f7fafc"
      },
      "footnote": "All figures in USD. Growth compared to Q3 2023."
    },
    {
      "type": "HighchartsChart",
      "row": 78,
      "column": 5,
      "width": 45,
      "height": 30,
      "options": {
        "chart": { "type": "pie" },
        "title": { "text": "Revenue by Product" },
        "plotOptions": {
          "pie": { "innerSize": "50%" }
        },
        "series": [{
          "name": "Revenue",
          "data": [
            { "name": "Enterprise", "y": 55 },
            { "name": "SMB", "y": 30 },
            { "name": "Consumer", "y": 15 }
          ]
        }]
      }
    },
    {
      "type": "CardContainer",
      "row": 78,
      "column": 55,
      "width": 50,
      "height": 30,
      "style": {
        "backgroundColor": "#ebf8ff",
        "border": "1px solid #90cdf4"
      },
      "children": [
        {
          "type": "Header",
          "row": 80,
          "column": 58,
          "width": 44,
          "height": 5,
          "text": "Key Metric",
          "style": {
            "font-size": "14px",
            "color": "#2b6cb0"
          }
        },
        {
          "type": "Paragraph",
          "row": 86,
          "column": 58,
          "width": 44,
          "height": 10,
          "text": "$9.7M",
          "style": {
            "font-size": "36px",
            "font-weight": "bold",
            "color": "#1a365d"
          }
        },
        {
          "type": "Paragraph",
          "row": 98,
          "column": 58,
          "width": 44,
          "height": 5,
          "text": "Total Q3 Revenue",
          "style": {
            "font-size": "12px",
            "color": "#4a5568"
          }
        }
      ]
    }
  ]
}