Getting Started with JavaScript PowerPoint Library in React app

22 Oct 20263 minutes to read

The JavaScript PowerPoint Library facilitates the creation of a simple PowerPoint presentation with basic elements from scratch.

This guide explains how to integrate the JavaScript PowerPoint Library into a React application. The sample saves the generated PowerPoint presentation with save('Output.pptx').

Prerequisites

Before you begin, make sure you have the following installed:

• Node.js 18 or later.
• npm 9 or later, or Yarn 1.22 or later.
• React 18 or later.
• Visual Studio Code, Code Studio, or another code editor.
• A supported browser such as the latest versions of Microsoft Edge, Google Chrome, or Mozilla Firefox.

To verify your Node.js and npm versions, run:

node --version
npm --version

Create a React Project

This guide uses Vite to scaffold the React project. Run the following command in a terminal:

npm create vite@latest my-pptx-app -- --template react
cd my-pptx-app

After the project is created, install its dependencies:

npm install

Install the JavaScript PowerPoint Library

All Syncfusion^® JS 2 packages are published in the npmjs.com registry. The npm install command below resolves @syncfusion/ej2-pptx to the latest stable version compatible with React 18 or later.

• To install the JavaScript PowerPoint Library, use the following command.

npm install @syncfusion/ej2-pptx --save

Create a PowerPoint Presentation Document

Replace the contents of App.jsx with the following code. The file imports the Presentation classes as named exports from @syncfusion/ej2-pptx and creates a PowerPoint presentation.

app.jsx

import React from 'react';
import { Presentation, HorizontalAlignmentType } from '@syncfusion/ej2-pptx';

export default function App() {
	const createPPTX = async () => {
		// Creates a Presentation instance.
		const pptxDoc = Presentation.create();
		// Adds a slide to the PowerPoint presentation.
		const slide = pptxDoc.slides.add();
		// Adds a textbox for the title.
		const titleShape = slide.shapes.addTextBox({
			bounds: {
				x: 55,
          		y: 25,
          		width: 850,
          		height: 72
				}
			});
		const paragraph = titleShape.textBody.addParagraph();
		paragraph.horizontalAlignment = HorizontalAlignmentType.Center; 
		const textPart1 = paragraph.addTextPart('Hello World!!!');
		textPart1.font.fontName = 'Calibri';
		textPart1.font.bold = true;
		textPart1.font.fontSize = 36;
        // Saves the Presentation to the file system.
        await pptxDoc.save('Output.pptx');
    };
    return (
        <div style={{ padding: '1.5rem' }}>
            <button onClick={createPPTX}>Create PowerPoint document</button>
        </div>
    );
}​‌

This sample uses named imports from the npm package (import { Presentation, ... } from '@syncfusion/ej2-pptx'). The npm package does not expose a global ej namespace; using ej.pptx.Presentation without an import will throw ReferenceError: ej is not defined in a Vite or Create-React-App build. If you prefer the UMD-style global, load ej2.min.js from the Syncfusion CDN in index.html instead of importing the npm package.

Run the Application

Open a terminal in the project root and start the Vite development server:

npm run dev

Vite serves the application at http://localhost:5173. Open this URL in a browser and click Create PowerPoint document. The sample saves the presentation as Output.pptx.

The generated PowerPoint presentation contains a single slide with the text “Hello World!!!”.

If you used Create-React-App instead of Vite, the run command is npm start and the default URL is http://localhost:3000.