PptxGenJS Examples/Demo Page

Introduction
HTML to PPTX
Charts
Images & Media
Shapes & Text
Tables
Templates

Library Information

Simple Presentation

Code Sandbox

Editable Code

Use the area below to easily try out various library features.

HTML to PowerPoint

Reproduces an HTML table into 1 or more slides (auto-paging) using the syntax pptx.addSlidesForTable('tableId');
View the HTML to PowerPoint documentation for full details and examples

Usage Notes & Tips

Demo: Options

Table Setup

Table Rows

Cell Padding

Paging Options

Repeat Table Head on each Slide

Yes

addHeaderToEach

Starting top location (y) after first slide

Enable?

newPageStartY

Master Slide

Select a Master Slide

Row	Last Name	First Name	Description

Demo: Table Styles

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

CSS via `<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

Demo: Rowspans/Colspans

First Name	Last Name	Colspan TH
Jill	Smith	12	34
Eve	Pilgrim	56	67
Scott	Jackson	89	99

Last Name	First Name	Count
Smith	Liz	50
Eve	94
Scott	101

Name	Count
Smith	Liz	50
Eve	Williams	94

Demo: Auto-Paging

Example: Paging needed due to cell with large amount of text

Executive Status
99

Chart Demos

View the chart documentation for full details and examples

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, units, formats

3D Bar Chart

Slide 6 - 3D Bar, Cone, Cylinder, 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 - Opacity and other options

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-Type Chart

Slide 17 - Various Mixed-Chart Types

Chart Options

Slide 18 - Shadows and Transparent Color

Image Demos

View the image documentation for full details and examples

Image Types and Sources

Slide 1

- Type: Animated GIF (use Slide Show)

- Type: GIF

- Type: JPG

- Type: PNG

- Type: SVG

Image URLs

Slide 2

- Using GitHub CDN

- Using Wikimedia URL

- Using URL variables, etc

Sizing and Rounding

Slide 3

- Image Rounding

- Sizing: Contain

- Sizing: Cover

- Sizing: Crop

Media Demos

View the media documentation for full details and examples

Video

Slide 1

- Various formats (most OS's wont have every format codec - YMMV)

- YouTube (only supported in PowerPoint Online / PowerPoint desktop v16+)

Include YouTube video?

NOTE: opening a presentation with a YouTube video will show a content warning in desktop PowerPoint v15 or earlier

Audio

Slide 2

- Misc Audio formats (mp3, wav)

Shape Demos

View the shape documentation for full details and examples

Core Shape Types

Slide 1

- Shapes: Rectangle, Line, Oval, Triangle

- Shapes: Flipped, With and Without Text

- Shape Borders

- Lines: With and Without Arrowheads

Core Shape Types with Text

Slide 2

- Shapes: Rectangle, Line, Oval, Triangle

- Shapes: Flipped, With and Without Text

- Shape Borders

- Lines: With and Without Arrowheads

Text Demos

View the text documentation for full details and examples

Text Types

Slide 1

- Word-Level Formatting

- Multi-Line Text

- Hyperlinks, Text Shadow, Text Outline

Text Bullets

Slide 2

- Regular

- Custom Shapes

Text Alignment

Slide 3

- Text alignment

- x/y percent values

Text Schemes

Slide 4

- Scheme Colors

Table Demos

View the table documentation for full details and examples

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

Table Auto-Paging

Slide 7+

- 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

Slide Masters / Templates / Layouts

View the masters documentation for full details and examples

Misc 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

PptxGenJS Demos

JavaScript PowerPoint Generation Library

Library Information

Simple Presentation

Code Sandbox

HTML to PowerPoint

Usage Notes & Tips

Demo: Options

Table Setup

Paging Options

Master Slide

Demo: Table Styles

Plain/Unstyled Table

CSS via <style>

Demo: Rowspans/Colspans

Colspan

Rowspan

Rowspan and Colspan

Demo: Auto-Paging

Example: Paging needed due to cell with large amount of text

Chart Demos

Bar Chart

3D Bar Chart

Tornado Chart

Line Chart

Area Chart

Pie Chart

X Y (Scatter) Chart

Bubble Chart

Radar Chart

Multi-Type Chart

Chart Options

Image Demos

Image Types and Sources

Image URLs

Sizing and Rounding

Media Demos

Video

Audio

Shape Demos

Core Shape Types

Core Shape Types with Text

Text Demos

Text Types

Text Bullets

Text Alignment

Text Schemes

Table Demos

Table Layout/Format

Cell Formatting

Table Auto-Paging

Slide Masters / Templates / Layouts

Misc Master Slides

Creating Slide Masters is easy!

CSS via `<style>`