Build your first PowerPoint task pane add-in
In this article, you'll walk through the process of building a PowerPoint task pane add-in.
Create the add-in
You can create an Office Add-in by using the Yeoman generator for Office Add-ins or Visual Studio. The Yeoman generator creates a Node.js project that can be managed with Visual Studio Code or any other editor, whereas Visual Studio creates a Visual Studio solution. Select the tab for the one you'd like to use and then follow the instructions to create your add-in and test it locally.
Node.js (version 8.0.0 or later)
npm install -g yo generator-office
Even if you've previously installed the Yeoman generator, we recommend you update your package to the latest version from npm.
Create the add-in project
Use the Yeoman generator to create a PowerPoint add-in project. Run the following command and then answer the prompts as follows:
- Choose a project type:
Office Add-in Task Pane project
- Choose a script type:
- What do you want to name your add-in?
My Office Add-in
- Which Office client application would you like to support?
After you complete the wizard, the generator creates the project and installs supporting Node components.
Explore the project
The add-in project that you've created with the Yeoman generator contains sample code for a very basic task pane add-in. If you'd like to explore the components of your add-in project, open the project in your code editor and review the files listed below. When you're ready to try out your add-in, proceed to the next section.
- The ./manifest.xml file in the root directory of the project defines the settings and capabilities of the add-in.
- The ./src/taskpane/taskpane.html file contains the HTML markup for the task pane.
- The ./src/taskpane/taskpane.css file contains the CSS that's applied to content in the task pane.
Try it out
Navigate to the root folder of the project.
cd "My Office Add-in"
Complete the following steps to start the local web server and sideload your add-in.
Office Add-ins should use HTTPS, not HTTP, even when you are developing. If you are prompted to install a certificate after you run one of the following commands, accept the prompt to install the certificate that the Yeoman generator provides.
If you're testing your add-in on Mac, run the following command before proceeding. When you run this command, the local web server starts.
npm run dev-server
To test your add-in in PowerPoint, run the following command in the root directory of your project. This starts the local web server (if it's not already running) and opens PowerPoint with your add-in loaded.
To test your add-in in PowerPoint on a browser, run the following command in the root directory of your project. When you run this command, the local web server will start (if it's not already running).
npm run start:web
To use your add-in, open a new document in PowerPoint on the web and then sideload your add-in by following the instructions in Sideload Office Add-ins in Office on the web.
In PowerPoint, insert a new blank slide, choose the Home tab, and then choose the Show Taskpane button in the ribbon to open the add-in task pane.
At the bottom of the task pane, choose the Run link to insert the text "Hello World" into the current slide.
Congratulations, you've successfully created a PowerPoint task pane add-in! Next, learn more about the capabilities of a PowerPoint add-in and build a more complex add-in by following along with the PowerPoint add-in tutorial.