base on Build PowerPoint presentations with JavaScript. Works with Node, React, web browsers, and more. # PptxGenJS       ## 🚀 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. ### Works Everywhere - 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 ### Full-Featured - Create all major slide objects: **text, tables, shapes, images, charts**, and more - Define custom **Slide Masters** for consistent academic or corporate branding - Supports **SVGs**, **animated GIFs**, **YouTube embeds**, **RTL text**, and **Asian fonts** ### Simple & Powerful - 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 ### Export Your Way - 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 ### HTML to PowerPoint Magic - Convert any HTML `<table>` to one or more slides with a single line of code → [Explore the HTML-to-PPTX feature](#html-to-powerpoint-magic) ## 🌐 Live Demos Try PptxGenJS right in your browser - no setup required. - [Basic Slide Demo](https://gitbrent.github.io/PptxGenJS/demos/) - Build a basic presentation in seconds - [Full Feature Showcase](https://gitbrent.github.io/PptxGenJS/demo/browser/index.html) - 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**: ### Quick Install (Node-based) ```bash npm install pptxgenjs ``` ```bash yarn add pptxgenjs ``` ### CDN (Browser Usage) Use the bundled or minified version via [jsDelivr](https://www.jsdelivr.com/package/gh/gitbrent/pptxgenjs): ```html <script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs/dist/pptxgen.bundle.js"></script> ``` > Includes the sole dependency (JSZip) in one file. 📁 Advanced: Separate Files, Direct Download Download from GitHub: [Latest Release](https://github.com/gitbrent/PptxGenJS/releases/latest) ```html <script src="PptxGenJS/libs/jszip.min.js"></script> <script src="PptxGenJS/dist/pptxgen.min.js"></script> ``` ## 🚀 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. ### Supported Platforms - **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`._ ### Builds Provided - **CommonJS**: [`dist/pptxgen.cjs.js`](./dist/pptxgen.cjs.js) - **ES Module**: [`dist/pptxgen.es.js`](./dist/pptxgen.es.js) ## 📖 Documentation ### Quick Start Guide 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! ## 💥 HTML-to-PowerPoint Magic Convert any HTML `<table>` 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](https://gitbrent.github.io/PptxGenJS/html2pptx/) ## 📚 Full Documentation Complete API reference, tutorials, and integration guides are available on the official docs site: [https://gitbrent.github.io/PptxGenJS](https://gitbrent.github.io/PptxGenJS) ## 🛠️ Issues / Suggestions Please file issues or suggestions on the [issues page on github](https://github.com/gitbrent/PptxGenJS/issues/new), or even better, [submit a pull request](https://github.com/gitbrent/PptxGenJS/pulls). Feedback is always welcome! When reporting issues, please include a code snippet or a link demonstrating the problem. Here is a small [jsFiddle](https://jsfiddle.net/gitbrent/L1uctxm0/) 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](https://jsfiddle.net/gitbrent/L1uctxm0/) - [View questions tagged `PptxGenJS` on StackOverflow](https://stackoverflow.com/questions/tagged/pptxgenjs?sort=votes&pageSize=50). If you can't find your question, [ask it yourself](https://stackoverflow.com/questions/ask?tags=PptxGenJS) - 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](https://github.com/DzmitryDulko) - Getting the project published on NPM - [Michal Kacerovský](https://github.com/kajda90) - New Master Slide Layouts and Chart expertise - [Connor Bowman](https://github.com/conbow) - Adding Placeholders - [Reima Frgos](https://github.com/ReimaFrgos) - Multiple chart and general functionality patches - [Matt King](https://github.com/kyrrigle) - Chart expertise - [Mike Wilcox](https://github.com/clubajax) - Chart expertise - [Joonas](https://github.com/wyozi) - [react-pptx](https://github.com/wyozi/react-pptx) PowerPoint shape definitions and some XML code via [Officegen Project](https://github.com/Ziv-Barber/officegen) ## 🌟 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. [@[email protected]](https://fosstodon.org/@gitbrent) ## 📜 License Copyright &copy; 2015-present [Brent Ely](https://github.com/gitbrent/) [MIT](https://github.com/gitbrent/PptxGenJS/blob/master/LICENSE) ", Assign "at most 3 tags" to the expected json: {"id":"10611","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"