The Office Add-in Dev Kit helps developers set up the environment, create and build Office JS add-ins with a steamlined developer experience.
Open Office Add-in Dev Kit to create a new app and start coding!
In the Office Add-in Dev Kit for Visual Studio Code, you can easily discover all applicable commands in the sidebar and Command Palette with the keyword "Office". It also supports Command Line Interface (CLI) to increase efficiency.
Verify you have the right prerequisites for building Office add-ins and install some recommended development tools. Read more details.
- Node.js 16, 18, or 20 (18 is preferred) and npm. To verify if you've already installed these tools, run the commands
node -vandnpm -vin your terminal. - Office connected to a Microsoft 365 subscription. You might qualify for a Microsoft 365 E5 developer subscription through the Microsoft 365 Developer Program, see FAQ for details. Alternatively, you can sign up for a 1-month free trial or purchase a Microsoft 365 plan.
Use the Office Add-in Dev Kit for Visual Studio Code to set up your first add-in project. Create your Office add-in project using the following steps:
- Ensure you've installed the
Microsoft Office Add-in Dev Kit for Visual Studio Code. - Select the
Office Add-in Dev Kiticon in the Visual Studio Code sidebar. - Select
Create a New Add-inbutton from the sidebar. - Select an Office app that you want to build the add-in for.
- Select an add-in template from the list of available templates.
- Select JavaScript/TypeScript as the programming language.
- Choose a location where your new add-in will be created in a new folder.
- Type a name for your project and hit Enter.
An Office add-in includes two basic components: an XML manifest file, and your own web application.
- The manifest defines various settings, including how your add-in integrates with Office clients.
- Your web application needs to be hosted on a web server, or web hosting service, such as Microsoft Azure.
When a add-in project is created, you can explore and customize the components by reviewing the key files listed below.
- The
./manifest.xmlfile in the root directory of the project defines the settings and capabilities of the add-in.
You can check whether your manifest file is valid by selectingValidate Manifest Filein theOffice Add-in Dev Kitextension tree view. - The
./src/taskpane/taskpane.htmlfile contains the HTML markup for the task pane. - The
./src/taskpane/taskpane.cssfile contains the CSS that's applied to content in the task pane. - The
./src/taskpane/taskpane.jsfile contains the Office JavaScript API code that facilitates interaction between the task pane and the Word application.
To understand how the add-in will work in Office apps, you can use the Office Add-in Dev Kit to easily run and debug your Office add-in in your local dev environment.
Select Check and Install Dependencies to check your environment and install necessary dependencies in order to run and debug the add-in code.
Select Preview Your Office Add-in(F5) on the side panel to start running and debugging the add-in code. A Word/Excel/PowerPoint app will launch with the add-in sample side-loaded.
- You can also start debugging by hitting the
F5key or runningnpm run startcommand in the terminal. - To debug on Office on the web, go to Sideload Office Add-ins to Office on the web
- To debug in Desktop (Edge Legacy), go to Debug Edge Legacy Webview
Select Stop Previewing Your Office Add-in to stop debugging.
Explore our samples to help you quickly get started with the basic Teams app concepts and code structures.
Give security researchers information on how to privately report security vulnerabilities found in your open-source project. See more details Reporting security issues.
The software may collect information about you and your use of the software and send it to Microsoft. Microsoft may use this information to provide services and improve our products and services. You may turn off the telemetry as described in the repository. There are also some features in the software that may enable you and Microsoft to collect data from users of your applications. If you use these features, you must comply with applicable law, including providing appropriate notices to users of your applications together with a copy of Microsoft's privacy statement. Our privacy statement is located at Microsoft Privacy Statement. You can learn more about data collection and use in the help documentation and our privacy statement. Your use of the software operates as your consent to these practices.
Telemetry collection is on by default. To opt out, please set the telemetry.enableTelemetry setting to false. Learn more in our FAQ.
This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.
Copyright (c) Microsoft Corporation. All rights reserved.