PptxGenJS
JavaScript PowerPoint Generation Library :: Presentation Demos

- Introduction
- Charts
- Images & Media
- Shapes & Text
- Tables
- Table To Slides
- Templates

Library Version:
Basic Presentation: Slide
Code Sandbox
Code below is editable - Test snippets of code from the demos/readme!
Charts
Bar Chart

### Slide 1

Vertical/Horizontal bars

### Slide 2

Grid/Axis options

### Slide 3

Stacked/PercentStacked Bars

### Slide 4

Lots of Bars

### Slide 5

Bar colors, majorUnit, Number Format
Tornado Chart

### Slide 6

Tornado Type
Line Chart

### Slide 7

Line Smoothing, Shadow, Size, Symbol Size

### Slide 8

lineDataSymbol and SymbolSize

### Slide 9

Lots of Categories
Area Chart

### Slide 10

Opacity and other options
Pie Chart

### Slide 11

Various options

### Slide 12

Doughnut Type
X Y (Scatter) Chart

### Slide 13

Various Options
Multi-Type Charts

### Slide 14

Various Mixed Chart Types
Chart Options

### Slide 15

Shadows and Transparent Color
LOCAL FILE ACCESS DETECTED

- Web browsers will not allow local file access, meaning images using `path:` cannot be read when running this locally
- Note that some demo slide images will show the missing image icon
- ProTip: Use the `--allow-file-access-from-files` flag with Chrome, et al. to test with local image files

Images & Media
Image Types

### Slide 1

Animated GIF (campfire icon - click to play)
Four Image types using `path:'someImage'`
Pre-encoded image using `data:[base64]`
Hyperlinked Image
Image Sizing

### Slide 2

Sizing: Contain
Sizing: Cover
Sizing: Crop
Media Objects

### Slide 3

Misc Video formats (avi, mp4, mov, etc.) and YouTube
* YouTube is only supported in PowerPoint Online

### Slide 4

Misc Audio formats
* Only Node.js can read/encode media using `path`
* Alternatively, use `data` with pre-encoded base64
Shapes & Text
Shape Objects

### Slide 1

Shapes: Rectangle, Line, Oval, Triangle
Shapes: Flipped, With and Without Text
Shape Borders
Lines: With and Without Arrowheads

### Slide 2

Same Shapes with Text
Text Objects

### Slide 3

Word-Level Formatting
Multi-Line Text
Hyperlinks: With and Without Tooltip

### Slide 4

Bullets: Regular and Custom

### Slide 5

Text alignment, percent x/y, etc

### Slide 6

Scheme Colors
Tables
Table Layout/Format

### Slide 1

Text Alignment
Cell Styles
Row Height / Col Width

### Slide 2

Colspans/Rowspans

### Slide 3

Extreme Colspans/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 2
Table Auto-Paging

### Slide 7-n

Test basic functionality
Test with small table dimensions
Test with correct starting `{y:4.0}`
Test with `{ newPageStartY:0.5 }`
Test with `{ autoPage:false }`
Three Tables with various `lineWeight`
Basic Functionality and Options
Demo Table
Number of Table Rows:
Cell Padding (points):
Output Options
Show Table Header on Each Slide?
Yes No
Slide Master:

Row | Last Name | First Name | Description
--- | --- | --- | ---

Other Demos
Plain/Unstyled Table

Name | Email | Company | Feedback
--- | --- | --- | ---
Elon Musk | Elon@tesla.com | Tesla Motors & SpaceX | PptxGenJS is almost as good as rockets that can land themselves
Tim Cook | tim@apple.com | Apple Inc. | Jony Ive said the Keynote team needs to hire you
Satya Nadella | ceo@microsoft.com | Microsoft Inc. | The PowerPoint team needs to hire you

Inherited Style

Company | Contact | Feedback
--- | --- | ---
Tesla & SpaceX | Elon@tesla.com | PptxGenJS is almost as good as rockets that can land themselves
Apple Inc. | tim@apple.com | Jony Ive said the Keynote team needs to hire you
Microsoft Inc. | ceo@microsoft.com | The PowerPoint team needs to hire you

Slide Masters / Templates / Layouts
Misc Tests

### Slide 1

TITLE_SLIDE

### Slide 2

MASTER_SLIDE

### Slide 3

MASTER_SLIDE

### Slide 4

THANKS_SLIDE
Example

### Creating Slide Masters is easy!

`pptx.defineSlideMaster({` `title: 'CORP_MASTER',` `bkgd: 'F1F1F1',` `objects: [` `{rect: { x:0, y:0, w:'100%', h:0.5, fill:'0088CC' }},` `{text: { text:'S.T.A.R. Laboratories', options:{x:0.17, y:0.1, color:'FFFFFF'} }}` `]` `});`