PptxGenJS

Create JavaScript PowerPoint Presentations

Table of Contents

• Table of Contents
• Introduction
• Features
• Live Demos
• Installation
  • CDN
  • Download
  • Npm
  • Yarn
  • Additional Builds
• Documentation
  • Quick Start Guide
    • Angular/React, ES6, TypeScript
    • Script/Web Browser
  • Library API
  • HTML-to-PowerPoint Feature
• Library Ports
• Issues / Suggestions
• Need Help?
• Contributors
• Sponsor Us
• License

Introduction

This library creates Open Office XML (OOXML) Presentations which are compatible with Microsoft PowerPoint, Apple Keynote, and other applications.

Features

Works Everywhere

• Every modern desktop and mobile browser is supported
• Integrates with Node, Angular, React, and Electron
• Compatible with PowerPoint, Keynote, and more

Full Featured

• All major object types are available (charts, shapes, tables, etc.)
• Master Slides for academic/corporate branding
• SVG images, animated gifs, YouTube videos, RTL text, and Asian fonts

Simple And Powerful

• The absolute easiest PowerPoint library to use
• Learn as you code will full typescript definitions included
• Tons of demo code comes included (over 75 slides of features)

Export Your Way

• Exports files direct to client browsers with proper MIME-type
• Other export formats available: base64, blob, stream, etc.
• Presentation compression options and more

HTML to PowerPoint

• Includes powerful HTML-to-PowerPoint feature to transform HTML tables into presentations with a single line of code

Live Demos

Visit the demos page to create a simple presentation to see how easy it is to use pptxgenjs, or check out the complete demo which showcases every available feature.

• PptxGenJS Demos

Installation

CDN

jsDelivr Home

Bundle: Modern Browsers and IE11

<script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@3.10.0/dist/pptxgen.bundle.js"></script>

Min files: Modern Browsers

<script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@3.10.0/libs/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@3.10.0/dist/pptxgen.min.js"></script>

Download

GitHub Latest Release

Bundle: Modern Browsers

• Use the bundle for IE11 support

<script src="PptxGenJS/dist/pptxgen.bundle.js"></script>

Min files: Modern Browsers

<script src="PptxGenJS/libs/jszip.min.js"></script>
<script src="PptxGenJS/dist/pptxgen.min.js"></script>

Npm

PptxGenJS NPM Home

npm install pptxgenjs --save

Yarn

yarn add pptxgenjs

Additional Builds

• CommonJS: dist/pptxgen.cjs.js
• ES Module: dist/pptxgen.es.js

---

Documentation

Quick Start Guide

PptxGenJS PowerPoint presentations are created via JavaScript by following 4 basic steps:

Angular/React, ES6, TypeScript

import pptxgen from "pptxgenjs";

// 1. Create a new Presentation
let pres = new pptxgen();

// 2. Add a Slide
let slide = pres.addSlide();

// 3. Add one or more objects (Tables, Shapes, Images, Text and Media) to the Slide
let textboxText = "Hello World from PptxGenJS!";
let textboxOpts = { x: 1, y: 1, color: "363636" };
slide.addText(textboxText, textboxOpts);

// 4. Save the Presentation
pres.writeFile();

Script/Web Browser

// 1. Create a new Presentation
let pres = new PptxGenJS();

// 2. Add a Slide
let slide = pres.addSlide();

// 3. Add one or more objects (Tables, Shapes, Images, Text and Media) to the Slide
let textboxText = "Hello World from PptxGenJS!";
let textboxOpts = { x: 1, y: 1, color: "363636" };
slide.addText(textboxText, textboxOpts);

// 4. Save the Presentation
pres.writeFile();

That's really all there is to it!

---

Library API

Full documentation and code examples are available

• Creating a Presentation
• Presentation Options
• Adding a Slide
• Slide Options
• Saving a Presentation
• Master Slides
• Adding Charts
• Adding Images
• Adding Media
• Adding Shapes
• Adding Tables
• Adding Text
• Speaker Notes
• Using Scheme Colors
• Integration with Other Libraries

---

HTML-to-PowerPoint Feature

Easily convert HTML tables to PowerPoint presentations in a single call.

let pptx = new PptxGenJS();
pptx.tableToSlides("tableElementId");
pptx.writeFile({ fileName: "html2pptx-demo.pptx" });

Learn more:

• HTML-to-PowerPoint Docs/Demo

---

Library Ports

React: react-pptx - thanks to Joonas!

---

Issues / Suggestions

Please file issues or suggestions on the issues page on github, or even better, submit a pull request. Feedback is always welcome!

When reporting issues, please include a code snippet or a link demonstrating the problem. Here is a small jsFiddle that is already configured and uses the latest PptxGenJS code.

---

Need Help?

Sometimes implementing a new library can be a difficult task and the slightest mistake will keep something from working. We've all been there!

If you are having issues getting a presentation to generate, check out the code in the demos directory. There are demos for both client browsers, node and react that contain working examples of every available library feature.

• Use a pre-configured jsFiddle to test with: PptxGenJS Fiddle
• View questions tagged PptxGenJS on StackOverflow. If you can't find your question, ask it yourself - be sure to tag it PptxGenJS.

---

Contributors

Thank you to everyone for the issues, contributions and suggestions! ❤️

Special Thanks:

• Dzmitry Dulko - Getting the project published on NPM
• Michal Kacerovský - New Master Slide Layouts and Chart expertise
• Connor Bowman - Adding Placeholders
• Reima Frgos - Multiple chart and general functionality patches
• Matt King - Chart expertise
• Mike Wilcox - Chart expertise
• Joonas - React port

PowerPoint shape definitions and some XML code via Officegen Project

---

Sponsor Us

If you find this library useful, please consider sponsoring us through a donation

---

License

Copyright © 2015-present Brent Ely

MIT

---

How to run your branch locally

• Make sure you are using the correct node version (Check .nvmrc file)
• Run the command npm run ship to bundle your changes
• On your terminal, cd into demos folder then run node browser_server.mjs
• Open http://localhost:8000/browser/index.html on your browser and test your changes in the sandbox