outlook-quickstart-yo.md

title	description	ms.date	ms.service	ms.localizationpriority	ms.custom
Build your first Outlook add-in	Learn how to build a simple Outlook task pane add-in by using the Office JS API.	02/18/2025	outlook	high	required-for-compliance

Build your first Outlook add-in

In this article, you'll walk through the process of building an Outlook task pane add-in using Yo Office that displays at least one property of a selected message.

Prerequisites

[!INCLUDE Yeoman generator prerequisites]

• Outlook on the web, new Outlook on Windows, Outlook 2016 or later on Windows (connected to a Microsoft 365 account), or Outlook on Mac.

Create the add-in project

1. [!includeYeoman generator create project guidance]

   • Choose a project type - Office Add-in Task Pane project
   • Choose a script type - JavaScript
   • What do you want to name your add-in? - My Office Add-in
   • Which Office client application would you like to support? - Outlook
   • Which manifest would you like to use? - Choose either Unified manifest for Microsoft 365 or Add-in only manifest

   [!INCLUDE Unified manifest value proposition and feedback request]

   Depending on your choice of manifest, the prompts and answers should look like one of the following:

   

   

   After you complete the wizard, the generator will create the project and install supporting Node components.

2. Navigate to the root folder of the web application project.

   cd "My Office Add-in"
   

Explore the project

The Yeoman generator creates a project in a folder with the project name that you chose. The project contains sample code for a very basic task pane add-in. The following are the most important files.

• The ./manifest.json or ./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.
• The ./src/taskpane/taskpane.js file contains the Office JavaScript API code that facilitates interaction between the task pane and Outlook.

Try it out

[!INCLUDE alert use https]

1. Run the following command in the root directory of your project. When you run this command, the local web server starts and your add-in is sideloaded.

   npm start
   

   [!INCLUDE outlook-manual-sideloading]

2. In Outlook, view a message in the Reading Pane, or open the message in its own window.

3. Select the Show Taskpane button to open the add-in task pane. The location of the add-in button varies depending on the Outlook client you're using.

   • Outlook on the web and new Outlook on Windows: From the action bar of the message, select Apps. Then, select My Office Add-in > Show Taskpane.
   • Classic Outlook on Windows: Select the Home tab (or the Message tab if you opened the message in a new window). Then, select Show Taskpane from the ribbon.
   • Outlook on Mac: Select My Office Add-in from the ribbon, then select Show Taskpane. You may need to select the ellipsis button (...) from the ribbon to view your add-ins.

   The following screenshots show how the add-in appears in classic Outlook on Windows.

   

4. When prompted with the WebView Stop On Load dialog box, select OK.

   [!INCLUDE Cancelling the WebView Stop On Load dialog box]

5. Scroll to the bottom of the task pane and choose the Run link to write the message subject to the task pane.

   

   

6. [!includeInstructions to stop web server and uninstall dev add-in]

Next steps

Congratulations, you've successfully created your first Outlook task pane add-in! Next, explore more capabilities of an Outlook add-in by following along with the Outlook add-in tutorial. In the tutorial, you'll build a more complex add-in that incorporates a task pane, which you've learned about in the quick start. Additionally, you'll create a button that invokes a UI-less function.

[!includeThe common troubleshooting section for all Yo Office quick starts]

• If you receive the error "We can't open this add-in from localhost" in the task pane, follow the steps outlined in the troubleshooting article.

Code samples

• Outlook "Hello world" add-in: Learn how to build a simple Office Add-in with only a manifest, HTML web page, and a logo.

See also

• Office Add-ins with the add-in only manifest
• Using Visual Studio Code to publish