PptxGenJS Documentation

For direct use in a web browser without a build step, include the bundled version via jsDelivr. This bundle includes the required JSZip dependency in a single file.

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

To use PptxGenJS in a Node.js, React, Angular, or Vite project, install it using your preferred package manager.

npm install pptxgenjs
# or
yarn add pptxgenjs

To validate integration in modern front-end SPA toolchains (Vite, TypeScript, React):

1. Prepare Files: Ensure dist/pptxgen.es.js and types/index.d.ts are copied to your local node_modules.
2. Configure Demo: Update package.json in demos/vite-demo/.
3. Verify Types: Open src/tstest/Test.tsx and use IntelliSense to verify autocompletion (e.g., pptxgen.ChartType.).
4. Run App:

   cd demos/vite-demo
   npm install
   npm run dev

5. Cross-Device Validation: Access the demo from your network (MacBook, iPhone, or Android) to ensure MIME types are valid and files render correctly in PowerPoint or previewers.

To add React-specific linting, install eslint-plugin-react-x and eslint-plugin-react-dom, then add them to your eslint.config.js plugins and rules sections.

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})

Creating a presentation involves four steps: initializing the presentation object, adding a slide, adding objects (like text, shapes, or images) to that slide, and saving the file.

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();

To validate browser compatibility using the standalone bundle as a script:

1. Start the local test server:

   cd demos
   node browser_server.mjs

2. Open the Demo Page at http://localhost:8000/browser/index.html.
3. Verify in DevTools (Sources tab) that pptxgen.bundle.js is the latest version.
4. Run UI-driven demos and verify rendering.
5. Mobile Testing: Access the page via your local IP (e.g., http://192.168.254.x:8000/browser/index.html) on an iPhone to test mobile compatibility.

Web Worker API Testing:

• Open http://localhost:8000/browser/worker_test.html.
• Note: Use Chrome only; Safari is not supported for this test.

Microsoft 365 Validation:

• Upload the generated PPTX files to OneDrive/Office/M365 and use the web viewer to ensure file integrity.

When preparing a release for gh-pages, do not use the Vite deploy script. Instead, follow these manual steps to ensure full control over the content:

1. Run the build command:

   npm run build

2. Manually copy the entire `dist` folder from `demos/vite-demo/` to a safe location.
3. Use this copied folder when updating the `gh-pages` branch.

To validate the CommonJS module functionality in pure Node.js environments, use the following commands within the demos/node directory:

CLI Tests: Run these to confirm console output and exported PPTX files:

cd demos/node
npm run demo
npm run demo-all

Stream Tests: Run this to confirm the stream download functionality:

npm run demo-stream

Then, verify the resulting file by accessing the stream URL on a mobile device.

To perform a full manual test suite across all supported platforms (Browser, Node.js, Web Worker, and Vite/TypeScript), follow these steps:

1. Run npm run ship to prepare the environment.
2. Execute the specific test suites for your target environment (Browser, Node, or Vite) as detailed in the platform-specific sections.