PptxGenJS Feature Demos

Library Information

pptx.version
Object.keys(pptx.ChartType)
Object.keys(pptx.ShapeType)
Object.keys(pptx.SchemeColor)

Basic Presentation

HTML to PowerPoint

About
  • Reproduces an HTML table into 1 or more slides (auto-paging) using the syntax pptx.tableToSlides('tableId');
  • View the HTML to PowerPoint documentation for full details and examples
Usage
  • Supported cell styling includes background colors, borders, fonts, padding, etc.
  • Slide margin settings can be set using options, or by providing a Master Slide definition
Tips
  • If you need to modify your table before creating the Presentation, use jQuery to clone() it and do the modifications on that table
  • CSS styles are only supported down to the cell level (word-level formatting is not supported)
  • Nested tables are not supported in PowerPoint, therefore they cannot be reproduced (only the text will be included)

sets table rows
sets cell padding
autoPageRepeatHeader
autoPageSlideStartY
masterSlideName
Row Last First Description

Plain/Unstyled Table
Company Feedback
Apple Inc. "Keynote team needs to hire you ASAP!" - tim@apple.com
Microsoft Inc. "PowerPoint team needs to hire you!" - satya@microsoft.com
ChatGPT "PptxGenJS is the superior library!" - bot@chatgpt.com
Styled via `class`
Company Feedback
Apple Inc. "Keynote team needs to hire you ASAP!" - tim@apple.com
Microsoft Inc. "PowerPoint team needs to hire you!" - satya@microsoft.com
ChatGPT "PptxGenJS is the superior library!" - bot@chatgpt.com

Colspan
First Name Last Name Colspan TH
Jill Smith 12 34
Eve Pilgrim 56 67
Scott Jackson 89 99
Rowspan
Last Name First Name Count
Smith Liz 50
Eve 94
Scott 101
Colspan and Rowspan
Name Count
Last First
Smith Liz 50
Eve Williams 94

Example: Lots of Single-Line Rows
A B C
Example: Paging needed due to cell with large amount of text
Executive Status
?
Charts
API Documentation
Bar Chart
  • Slide 1: Chart title, axis props
  • Slide 2: Vertical and Horizontal
  • Slide 3: Grid and axis options
  • Slide 4: Stacked & PercentStacked
  • Slide 5: Colors, units, formats
3D Bar Chart
  • Slide 6: 3D Bar, 3D Cone, 3D Cylinder, 3D Pyramid
Tornado Chart
  • Slide 7: Tornado Type
Line Chart
  • Slide 8 - Smoothing, Shadow, Size, Symbols
  • Slide 9 - Data Symbol, Size
  • Slide 10 - Lots of Categories
Area Chart
  • Slide 11 - Area Chart, Stacked Area Chart
Pie Chart
  • Slide 12 - Various options
  • Slide 13 - Doughnut Type
X Y (Scatter) Chart
  • Slide 14 - Various Options
Bubble Chart
  • Slide 15 - Various Options
Radar Chart
  • Slide 16 - Various Options
Multi-Level Category Axes
  • Slide 17 - Multiple Chart Types
  • Slide 18 - Three Level Axes
Combo Chart
  • Slide 19 - Example
  • Slide 20 - Various Options
Misc Options
  • Slide 21 - Shadows and Transparent Color
Images
API Documentation
Slide 1: Image Types
  • Type: Animated GIF
  • Type: GIF
  • Type: JPG
  • Type: PNG
  • Type: SVG
Slide 2: Image URLs
  • Source: GitHub CDN
  • Source: Wikimedia URL
  • Source: URL variables
Slide 3: Sizing/Rounding
  • Rounding: options
  • Sizing: contain
  • Sizing: cover
  • Sizing: crop
Slide 4: Image Rotation
  • Rotate: 45
  • Rotate: 180
  • Rotate: 315
Slide 5: Image Shadows
  • Type: Outer
  • Type: None
  • Type: Inner
Media
API Documentation
Slide 1: Video Types
  • Type: avi
  • Type: m4v
  • Type: mov
  • Type: mp4
Slide 2: Audio Types
  • Type: mp3
  • Type: aif
  • Type: wav
Slide 3: YouTube
Opt-In

Supported in PowerPoint Online & desktop v16+

PowerPoint shows a security warning banner whenever external media links like YouTube are used.

Shapes
API Documentation
Slide 1: Shapes without Text
  • Shapes: Rectangle, Line, Oval, Triangle
  • Shapes: Flipped Horizontal
  • Shapes: Borders
  • Lines: Arrowheads and Dashes
Slide 2: Shapes with Text
  • Shapes: Rectangle, Line, Oval, Triangle
  • Shapes: Flipped Horizontal
  • Shapes: Borders
  • Lines: Arrowheads and Dashes
Text
API Documentation
Slide 1: Alignment, Location, Sub/Super Script
  • Text: alignment
  • Text: locations
  • Text: subscript / superscript
Slide 2: Formatting, Line Breaks, Line Spacing
  • Text: formatting
  • Text: line-breaks
  • Text: line-spacing
Slide 3: Bullet Styles, Shapes, Indent
  • Bullets: indent levels
  • Bullets: spacing
  • Bullets: custom styles
  • Bullets: custom shapes
Slide 4: Hyperlinks, Tab stops, Text Effects
  • Text: hyperlinks
  • Text: tab stops
  • Effects: outline, glow, shadow
Slide 5: Text Fit
  • Fit: none
  • Fit: resize
  • Fit: shrink
Slide 6: Scheme Colors
  • Scheme Colors: background
  • Scheme Colors: text
Tables
API Documentation
Table Layout/Format
Slide 1
  • text alignment
  • cell styles
  • row height
  • col width
Slide 2
  • colspans and rowspans
Slide 3
  • extreme colspans and rowspans
Cell Formatting
Slide 4
  • cell margins
  • complex cell borders
  • escaped special characters
Slide 5
  • cell text formatting overview
Slide 6
  • cell text formatting examples
Auto-Paging Examples
Slides 7-8
  • basic auto-paging example
Slides 9-12
  • paging with small table dimensions
Slides 13-15
  • auto-paging with a Master Page
Slide 16
  • auto-paging disabled {autoPage:false}
Auto-Paging Props
Slides 17-19
  • start at {y:4.0}, subsequent start at top margin
Slides 20-22
  • start at {y:4.0}, subsequent start at {autoPageSlideStartY:1.5}
Auto-Paging Props
Slides 23-24
  • various autoPageRepeatHeader thead configs
Slides 25-28
  • various autoPageLineWeight values
Slides 29-32
  • various autoPageCharWeight values
Auto-Paging Complex Cell Text
Slides 33-35
  • complex cell text
Slides 36-39
  • complex cell text with calculated lines
Slide Masters / Templates / Layouts
API Documentation
Demo Master Slides
  • Slide 1: TITLE_SLIDE
  • Slide 2: MASTER_SLIDE
  • Slide 3: MASTER_SLIDE
  • Slide 4: MASTER_SLIDE
  • Slide 5: MASTER_SLIDE
  • Slide 6: THANKS_SLIDE
Master Slide How-To