PptxGenJS
!
PptxGenJS Sample Slides
!
jsdelivr downloads
!
NPM Downloads
!
GitHub Repo stars
!
GitHub License
!
TypeScript defs
π Features
PptxGenJS lets you generate professional PowerPoint presentations in JavaScript - directly from Node, React, Vite, Electron, or even the browser.
The library outputs standards-compliant Open Office XML (OOXML) files compatible with:
- β
Microsoft PowerPoint
- β
Apple Keynote
- β
LibreOffice Impress
- β
Google Slides (via import)
Design custom slides, charts, images, tables, and templates programmatically - no PowerPoint install or license required.
$3
- Supports every major modern browser - desktop and mobile
- Seamlessly integrates with
Node.js,
React,
Angular,
Vite, and
Electron
- Compatible with
PowerPoint,
Keynote,
LibreOffice, and other OOXML apps
$3
- Create all major slide objects:
text, tables, shapes, images, charts, and more
- Add professional
animations to any object - entrance, emphasis, exit, and path animations
- Define custom
Slide Masters for consistent academic or corporate branding
- Supports
SVGs,
animated GIFs,
YouTube embeds,
RTL text, and
Asian fonts
$3
- Ridiculously easy to use - create a presentation in 4 lines of code
- Full
TypeScript definitions for autocomplete and inline documentation
- Includes
75+ demo slides covering every feature and usage pattern
$3
- Instantly download
.pptx files from the browser with proper MIME handling
- Export as
base64,
Blob,
Buffer, or
Node stream
- Supports compression and advanced output options for production use
$3
- Convert any HTML
to one or more slides with a single line of code β Explore the HTML-to-PPTX feature
π Live Demos
Try PptxGenJS right in your browser - no setup required.
- Basic Slide Demo - Build a basic presentation in seconds
- Full Feature Showcase - Explore every available feature
> Perfect for testing compatibility or learning by example - all demos run 100% in the browser.
π¦ Installation
Choose your preferred method to install PptxGenJS:
$3
``bash
npm install pptxgenjs
`
`bash
yarn add pptxgenjs
`
$3
Use the bundled or minified version via jsDelivr:
`html
`
> Includes the sole dependency (JSZip) in one file.
π Advanced: Separate Files, Direct Download
Download from GitHub: Latest Release
`html
`
π Universal Compatibility
PptxGenJS works seamlessly in modern web and Node environments, thanks to dual ESM and CJS builds and zero runtime dependencies. Whether you're building a CLI tool, an Electron app, or a web-based presentation builder, the library adapts automatically to your stack.
$3
- Node.js β generate presentations in backend scripts, APIs, or CLI tools
- React / Angular / Vite / Webpack β just import and go, no config required
- Electron β build native apps with full filesystem access and PowerPoint output
- Browser (Vanilla JS) β embed in web apps with direct download support
- Serverless / Edge Functions β use in AWS Lambda, Vercel, Cloudflare Workers, etc.
> _Vite, Webpack, and modern bundlers automatically select the right build via the exports field in package.json._
$3
- CommonJS: dist/pptxgen.cjs.js
- ES Module: dist/pptxgen.es.js
π Documentation
$3
PptxGenJS PowerPoint presentations are created via JavaScript by following 4 basic steps:
#### Angular/React, ES6, TypeScript
`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
`javascript
// 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!
β¨ Add Professional Animations
Bring your presentations to life with entrance, emphasis, exit, and path animations - just like PowerPoint's built-in effects.
$3
`javascript
let pptx = new PptxGenJS();
let slide = pptx.addSlide();
// Add text with a simple fade-in animation
slide.addText("Hello World!", {
x: 1,
y: 1,
fontSize: 36,
animation: "fadein"
});
// Add a shape with a fly-in animation from the left
slide.addShape(pptx.shapes.RECTANGLE, {
x: 2,
y: 3,
w: 3,
h: 2,
fill: { color: "4472C4" },
animation: {
type: "flyin",
direction: "left",
duration: 1000
}
});
pptx.writeFile();
`
$3
`javascript
// Image with custom animation timing
slide.addImage({
path: "logo.png",
x: 1,
y: 1,
w: 2,
h: 2,
animation: {
type: "zoom",
direction: "slideCenter",
duration: 1500,
delay: 500,
trigger: "afterPrevious"
}
});
// Table with emphasis animation
slide.addTable(tableData, {
x: 1,
y: 3,
w: 8,
animation: {
type: "pulse",
duration: 800
}
});
`
$3
Entrance Animations:
- appear, fadein, flyin, floatin, split, wipe, shape, wheel, randombars, zoom, growandturn, swivel, bounce
Emphasis Animations:
- pulse, colorpulse, teeter, spin, growshrink, desaturate, darken, lighten, transparency, objectcolor, complementarycolor, linecolor, fillcolor
Exit Animations:
- disappear, fadeout, flyout, floatout, splitexit, wipeexit, shapeexit, wheelexit, randombarsexit, shrinkandturn, zoomexit, swivelexit, bounceexit
Path Animations:
- pathdown, patharcdown, pathturnright, pathcircle, pathzigzag
$3
Many animations support additional options:
`javascript
// Direction options (for fly, float, split, wipe, zoom)
animation: { type: "flyin", direction: "top" | "bottom" | "left" | "right" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" }
// Shape options (for shape animations)
animation: { type: "shape", shape: "circle" | "box" | "diamond" | "plus", direction: "in" | "out" }
// Wheel spokes (for wheel animations)
animation: { type: "wheel", spokes: 1 | 2 | 3 | 4 | 8 }
// Spin options
animation: { type: "spin", direction: "clockwise" | "counterClockwise", amount: "quarterSpin" | "halfSpin" | "fullSpin" | "twoSpins" }
// Color options (for color animations)
animation: { type: "colorpulse", color: "FFFF00" }
// Transparency levels
animation: { type: "transparency", level: 25 | 50 | 75 | 100 }
`
$3
Control when animations play:
`javascript
animation: {
type: "fadein",
duration: 1000, // Animation duration in milliseconds
delay: 500, // Delay before animation starts
trigger: "onClick" // "onClick" | "withPrevious" | "afterPrevious"
}
`
View Full Animation DEMO
π₯ HTML-to-PowerPoint Magic
Convert any HTML into fully formatted PowerPoint slides - automatically and effortlessly.
`javascript
let pptx = new pptxgen();
pptx.tableToSlides("tableElementId");
pptx.writeFile({ fileName: "html2pptx-demo.pptx" });
`
Perfect for transforming:
- Dynamic dashboards and data reports
- Exportable grids in web apps
- Tabular content from CMS or BI tools
View Full Docs & Live Demo
π Full Documentation
Complete API reference, tutorials, and integration guides are available on the official docs site: https://gitbrent.github.io/PptxGenJS
π οΈ 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 browser, 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`.
- Ask your AI pair programmer! All major LLMs have ingested the pptxgenjs library and have the ability to answer functionality questions and provide code.
π Contributors
Thank you to everyone for the 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-pptx
PowerPoint shape definitions and some XML code via Officegen Project
π Support the Open Source Community
If you find this library useful, consider contributing to open-source projects, or sharing your knowledge on the open social web. Together, we can build free tools and resources that empower everyone.
@gitbrent@fosstodon.org
π License
Copyright © 2015-present Brent Ely
MIT