powerpoint-content-hello-world

page_type	sample
urlFragment	powerpoint-content-add-in-hello-world
products	office-powerpoint office m365
languages	javascript
extensions	contentType technologies createdDate samples Add-ins 02/03/2026 10:00:00 AM
description	Create a PowerPoint content add-in that displays slide details.

Create a PowerPoint content add-in that displays slide details

Summary

Learn how to build an Office content add-in that displays details about the current slide in a PowerPoint presentation.

Applies to

• PowerPoint on Windows and in a browser.

Version history

Version	Date	Comments
1.0	02-03-2026	Initial release
1.1	06-19-2026	Updated to use PowerPoint JavaScript API

Prerequisites

• Microsoft 365 - You can get a free developer sandbox by joining the Microsoft 365 Developer Program.

Display slide details

When the user chooses the Get slide details button, the getDataFromSelection() function is called. This function uses Presentation.getSelectedSlides() to get the selected slides and load their details. "Hello, world!" and those slide details are then displayed in the content add-in.

For more information, see Content add-ins.

// Gets and displays some details about the current slide.
async function getDataFromSelection() {
    try {
        await PowerPoint.run(async (context) => {
            const slides = context.presentation.getSelectedSlides();
            slides.load("items/id,items/index");
            await context.sync();

            const details = slides.items.map((slide) => ({
                id: slide.id,
                index: slide.index
            }));
            document.getElementById("selected-data").textContent =
                'Hello, world! Some slide details are: ' + JSON.stringify(details);
        });
    } catch (error) {
        document.getElementById("selected-data").textContent = 'Error getting slide details.';
        console.error('Error:', error.message);
    }
}

Run the sample

Run the sample with GitHub as the host

An Office Add-in requires you to configure a web server to provide all the resources, such as HTML, image, and JavaScript files. The Hello World sample is configured so that the files are hosted directly from this GitHub repo, so all you need to do is build the manifest and package, and then sideload the package.

1. Clone or download this sample to a folder on your computer. Then in a command prompt, bash shell, or TERMINAL in Visual Studio Code, navigate to the root of the sample folder.

2. Run the command npm install.

3. Run the command npm run build.

4. Run the command npm run start:prod.

   After a few seconds, desktop PowerPoint opens, and after a few seconds more, the content add-in appears over the current slide with a Get slide details button.

   • If the content add-in doesn't appear, use the Add-ins button in the Home tab of the ribbon, then select the name of the content add-in, "PowerPoint Content Add-in".

5. Choose the Get slide details button to display "Hello, world!" and slide details.

6. To try this out in PowerPoint on the web:

   1. Open a presentation.
   2. Use the Add-ins button in the Home tab of the ribbon, then select the name of the content add-in, "PowerPoint Content Add-in". If the add-in is absent, select the Manage link then open the add-in from there.

When you're finished working with the add-in, close PowerPoint, and then in the window where you ran the three npm commands, run npm run stop:prod.

Configure a localhost web server and run the sample from localhost

If you prefer to configure a web server and host the add-in's web files from your computer, use the following steps.

1. Clone or download this sample to a folder on your computer. Then in a command prompt, bash shell, or TERMINAL in Visual Studio Code, navigate to the root of the sample folder.

2. Run the command npm install.

3. Run the command npm start.

   • If you've never developed an Office Add-in on this computer before or it has been more than 30 days since you last did, you'll be prompted to delete an old security cert and/or install a new one. Agree to both prompts.
   • After a few seconds, a webpack dev-server window will open and your files will be hosted there on localhost:3000.
   • When the server is successfully running, desktop PowerPoint opens, and after a few seconds more, the content add-in appears over the current slide with a Get slide details button.
     • If the content add-in doesn't appear, use the Add-ins button in the Home tab of the ribbon, then select the name of the content add-in, "PowerPoint Content Add-in".

4. Choose the Get slide details button to display "Hello, world!" and slide details.

5. To try this out in PowerPoint on the web:

   1. Open a presentation.
   2. Use the Add-ins button in the Home tab of the ribbon, then select the name of the content add-in, "PowerPoint Content Add-in". If the add-in is absent, select the Manage link then open the add-in from there.
      • Note: Depending on your machine's network or security settings, the add-in's web content might not be accessible.

When you're finished working with the add-in, close PowerPoint, and then in the window where you ran the two npm commands, run npm stop.

Questions and feedback

• Did you experience any problems with the sample? Create an issue and we'll help you out.
• We'd love to get your feedback about this sample. Go to our Office samples survey to give feedback and suggest improvements.
• For general questions about developing Office Add-ins, go to Microsoft Q&A using the office-js-dev tag.

Copyright

Copyright (c) Microsoft Corporation. All rights reserved.

This project has adopted the Microsoft Open Source Code of Conduct. For more information, see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Note: The content.html file contains an image URL that tracks diagnostic data for this sample add-in. Please remove the image tag if you reuse this sample in your own code project.