PptxGenJS Examples/Demo Page

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

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

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

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

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'} }} ] });