# PptxGenJS Demos

##### JavaScript PowerPoint Generation Library

- 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

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 Presenation, 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)

#####
Demo: Options

###### Table Setup

Table Rows
Cell Padding
``

###### Paging Options

Repeat Table Head on each Slide
Yes
No
`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

###### 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

###### Rowspan and Colspan

Name | Count
--- | ---
Last | First
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

###### Creating Slide Masters is easy!