How to create Office add-ins step by step

If you've ever wondered how Office add -ins (or plugins, extensions—whatever you prefer to call them) are created, you've come to the right place. Add-ins are small web applications that integrate with Word , Excel, Outlook, PowerPoint, OneNote, Project, and other apps to extend what Office can already do, from automating tedious tasks to connecting with external cloud services.

Before you start coding like there's no tomorrow, it's important to understand that an Office add-in isn't just a standalone script : it lives within the Office Add-ins platform, is described by a manifest, and runs as a web application that communicates with Office using the JavaScript API. From here, we'll calmly break down everything you need to know: tools for creating projects, internal structure, API models, how to test and debug, how to publish them, and even how permissions and access are managed from within the applications themselves.

What exactly is an Office add-in?

An Office add-in is essentially a web application that integrates with Microsoft 365 applications (Word, Excel, Outlook, PowerPoint, OneNote, Project, etc.) and extends their interface and capabilities. You can think of it as an extra piece that "attaches" to the ribbon, the context menu, or a sidebar to provide new features.

The beauty of it is that the plugin runs using standard web technologies (HTML, CSS, JavaScript or TypeScript, and even frameworks like React) and communicates with the document or email message using the Office JavaScript API. This allows it to read and modify content, display its own custom interface, and communicate with external services, REST APIs, your company's internal systems, and more.

The two key components of an Office add-in

Every Office add-in always consists of two distinct parts , which must be kept in mind from the outset:

• The Complement Manifesto, which defines the configuration, behavior, and how it integrates into the Office interface.
• The web application, which is the actual code (HTML, CSS, JavaScript/TypeScript) that renders the task pane interface, dialog boxes, or content plugins and contains the business logic.

The manifest acts as the "identity card" and instruction manual for the add-in, while the web application is the "engine" that does the real work and communicates with the document or email using the Office JavaScript API.

What defines the manifesto of a complement

The manifest of an Office add-in, which is usually stored as manifest.xml or manifest.json in the project root, contains all the information that Office needs to know what your add-in does, where it is hosted, and how it should be displayed to the user.

The manifesto specifies, among others, the following key elements , which should be closely monitored:

• Plugin metadata: identifier (ID), version, user-display name, description, default locale, etc.
• Compatible Office applicationsFor example, whether the add-in can be used in Word, Excel, Outlook, PowerPoint, Project, or OneNote.
• Required Permission: what level of access you need to the document, Outlook mailbox, or other resources.
• Integration with the Office interface: custom tabs, buttons on the ribbon, commands added to the context menu, and other UI elements.
• Icons and images: paths to the icons that will be displayed in the ribbon, menus and other parts of the interface, respecting the plugin's branding.
• Plugin dimensionsFor example, the size of a content add-in or the preferred height of an Outlook add-in.
• Activation rules in Outlook: conditions that determine when the plugin is displayed in an email or quote (based on sender, subject, content, etc.).
• Keyboard shortcutsCustom shortcuts available in Excel and Word.

All of this makes the manifest critical for both development and deployment . When you deploy the plugin, what is actually distributed is the manifest file, which points to the URL where the web application is hosted.

The plugin's web application

The second major piece of the puzzle is the web application, which is what the user sees and interacts with. This application is usually composed of HTML pages, CSS stylesheets, and JavaScript or TypeScript scripts , and can be built with or without frameworks (React is one of the most common, but not the only one).

From these pages, the add-in uses the Office JavaScript API to read and modify the content of the document where it runs: Excel ranges, Word paragraphs, Outlook messages, PowerPoint slides, tables, charts, and much more. Furthermore, being a web app, it can:

• Connect to external web services to obtain or send data.
• Manage user authentication with OAuth, Azure AD, or other providers.
• Consume internal REST APIs of your organization.
• Implement all the necessary business logic, from advanced calculations to complex automations.

Tools for creating Office add-ins

The Office add-in platform offers several ways to create development-ready projects , tailored to different user profiles and work preferences. The main options are: the Yeoman generator, Visual Studio, the Add-in Development Kit for Visual Studio Code, and the Microsoft 365 Agents Toolkit.

Create plugins with the Yeoman generator

Yeoman's Office add-in generator lets you create ready-to-use Node.js projects and manage them with Visual Studio Code or another editor. It's a very convenient option if you're comfortable working in a pure JavaScript environment with command-line tools.

With this generator you can create plugins for:

• Excel
• OneNote
• Outlook
• Power point
• Project
• Word
• Custom Excel functions

When you run the wizard, you can choose whether you want a project based on HTML, CSS, and JavaScript or TypeScript "as is," or a project with React , also in JavaScript or TypeScript. The generator takes care of setting up the entire structure, Node dependencies, and initial configuration.

Prerequisites for using Yeoman

To work with the Yeoman generator for Office, you need to have some basic components installed , which are common in the JavaScript ecosystem:

• Node.js LTS versionIt is downloaded from the official Node.js website and installed according to your operating system.
• Yeoman and the Office Add-In Generatorwhich are installed globally with the command:
  npm install -g yo generator-office
• An active Microsoft 365 subscription with Office, so you can test add-ins both on desktop and in Office on the web.

Create a project with Yeoman

Once you have everything installed, creating the project is quite straightforward. From the command line, in the directory where you want to work, run:

yo office

The wizard will ask a series of questions to fine-tune the project . For example, for a first task pane add-in for Word, you might answer something similar to this:

• Choose a project type: Office Add-in Task Pane project
• Choose a type of script: JavaScript
• How would you like to name the add-on? My Office Add-in
• Which Office client application would you like to support? Word

When you finish the wizard, Yeoman will generate all the project files and install the necessary Node modules, so you'll have a fully functional basic plugin.

Project structure generated with Yeoman

The project created with Yeoman for a task board usually includes a structure very similar to this, in which each part fulfills a specific role:

• ./manifest.xml or ./manifest.json: the manifest that defines the configuration, permissions, integration with the interface and URL of the web application.
• ./src/taskpane/taskpane.html: the HTML template of the task panel that the user will see.
• ./src/taskpane/taskpane.css: the style sheets that shape and design the panel.
• ./src/taskpane/taskpane.js: the JavaScript code that implements the logic and calls to the Office API.

Try a plugin created with Yeoman

To test the add-in, simply enter the project folder and run a few commands that start the local web server and load the add-in into Office.

1. Go to the project's root folder:
   cd "My Office Add-in"
2. Start the local server and test in desktop Word with:
   npm start

   This command starts the web server (if it wasn't already) and opens Word with the add-in loaded automatically.

3. If you want to try the Word add-in in your browser, you can use a command like:
   npm run start -- web --document {url}

   Where {url} is the address of a Word document stored in OneDrive or a SharePoint library that you have access to. If for some reason the add-in doesn't load correctly in Office on the web, you can manually install and then manually remove the locally loaded manifest.

4. Once the document is uploaded, you can open the task pane from the tab Home by clicking on the button Show task paneBy clicking the link Run In the panel, the typical example inserts a "Hello, world" with its own style into the document.
5. To stop the local server and, if necessary, uninstall the loaded plugin, you can use:
   npm stop

   If you have performed a manual local upload of the add-on, you will need to follow the specific procedure to remove that type of local upload.

Typical problems with Yeoman and npm

During installation or while running the project, it's relatively common to encounter npm warnings and errors . Some common situations include:

• Automatic step failures npm install which the generator itself runs. If later asl start It gives errors; usually, it's enough to go to the project folder and manually run a npm install.
• Warnings about outdated or incompatible dependencies, which usually don't prevent the plugin from running but can be annoying. If you want to clear them, you can use the tool npm-check-updates As follows:
  • Install the tool: npm i -g npm-check-updates
  • Update the versions in package.json: ncu -u
  • Reinstall dependencies: npm install

Creating add-ons with Visual Studio

Visual Studio allows you to create Office add-ins directly from within Visual Studio. In this case, the add-in project is part of a larger solution and is also based on HTML, CSS, and JavaScript.

Visual Studio allows you to create add-ins for:

• Excel
• Outlook
• Power point
• Word

However, it doesn't support creating add-ins for OneNote or Project . For those applications, you'll need to use Yeoman's generator and follow the specific quickstarts.

Develop and customize the plugin in Visual Studio

When you create a plugin project with Visual Studio, the environment generates a basic plugin with limited functionality , intended as a starting point. From there, you customize it:

• El manifest, adjusting metadata, permissions, activation rules and interface elements.
• The files HTML, CSS and JavaScript that shape the task pane or dialog boxes.

To get the most out of it, it's important to understand the general concepts of the add-in platform (development lifecycle, manifest, API models, sets of requirements) and also the specific aspects of each application: Excel, Word, Outlook, etc.

Run, debug, and publish from Visual Studio

During development, Visual Studio runs the plugin against a local web server (localhost) . When you have it ready for production, the typical process is as follows:

1. Publish the web application on a server or hosting service (for example, Microsoft Azure).
2. Update the manifesto so that it points to the final URL where the application is hosted.
3. Choosing an implementation method (internal plugin catalog, AppSource, etc.) and distribute the manifest file to users.

Details on how to debug on different platforms and how to troubleshoot specific problems can be found in the Debugging Office Add-ins in Visual Studio documentation and in the general testing and debugging guides.

Office Add-ins Development Kit for Visual Studio Code

If your natural environment is Visual Studio Code, you can install the Office Add-In Development Kit , an extension that makes it easier to create, run, and debug add-in projects from within the editor itself.

With this extension, you can create new plugin projects from a guided interface and load examples directly into your environment, without having to manually configure everything. The extension is downloaded from the Visual Studio Marketplace and integrates into the VS Code activity bar with its own icon.

Create a project with the Development Kit

Click the project creation button provided by the extension. If you don't have it installed, you will be prompted to install it.

From the extension page, you will be shown the project description and you can select the Create option to start generating the add-on.

Choose the working folder where the project will be created when the folder selection dialog box appears.

The Development Kit will create the file structure and open the project in a second VS Code window . At this point, it's recommended to close the initial window to work only in the new instance.

The resulting project also contains a basic task panel plugin , with sample code ready to run and modify.

Structure and key files in a VS Code project

The structure of these types of projects is very similar to that generated by Yeoman, and you will typically find:

1. A file ./manifest.xml or ./manifest.json at the root, with the configuration and functionalities of the add-on.
2. The file ./src/taskpane/taskpane.html which contains the HTML of the task pane.
3. The stylesheet ./src/taskpane/taskpane.css that controls the visual design.
4. The script ./src/taskpane/taskpane.js with the Office JavaScript API code that connects the task pane to the Office application.

Test and stop a plugin from the Development Kit

To test the plugin from VS Code with the Development Kit, simply follow a few straightforward steps using the extension's own activity bar:

1. Open the extension by clicking on the icon. Office Add-ins Development Kit in the activity bar.
2. Select the option Office Add-In Preview (F5), which prepares the purification environment.
3. Choose the option from the quick selection menu {Office Application} Desktop (Edge Chromium), replacing {Office Application} with the app you want (Word, Excel, etc.). This launches the desktop application, loads the add-in, and attaches the debugger.

During this process, the kit verifies that all prerequisites are met and displays detailed information on the terminal if anything goes wrong. The first boot may take a little while because necessary dependencies and certificates are being installed.

When you've finished testing and debugging, it's very important to stop the add-in properly , as simply closing the Office app doesn't always invalidate the add-in's registration correctly. To do it correctly:

1. Open the extension again from its icon in the activity bar.
2. Click on Stop previewing the Office add-in, which closes the web server and clears the plugin log from the cache.
3. Finally close the Office application window.

If you notice that the add-in isn't starting or is behaving strangely, closing all instances of Office and ensuring you've stopped the previous server using the add-in's own option often helps. The official documentation also includes a specific section on troubleshooting during Office add-in development , and in extreme cases, you can always open an issue on GitHub.

Microsoft 365 Agents Toolkit

Another modern option is to use the Microsoft 365 Agents Toolkit , a set of tools designed to create almost any type of extension for Microsoft 365, including Office add-ins. It's especially useful when you want to integrate more advanced logic or use intelligent agent capabilities within the Microsoft 365 ecosystem.

With this tool, you can configure add-in projects from a broader perspective (not just classic Office, but the entire Microsoft 365 environment), leveraging specific templates and wizards. The official documentation details how to create add-in projects using this toolkit and how to integrate them with other services and workflows.

Access to the Office JavaScript API

In order for your web application to be able to communicate with the Office document or message where it is running, you need to load the Office JavaScript library (office.js) , which is served from Microsoft's official CDN.

The standard library URL is:
https://appsforoffice.microsoft.com/lib/1/hosted/office.js

On any webpage of your plugin that needs to use the API, you must add a script tag inside the head section like this:

<head> ... <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script> </head>

From that point on, you'll have access to the Office namespace and can use both application-specific APIs (Excel, Word, etc.) and common APIs shared by multiple applications. Furthermore, the official documentation explains how to enable features like IntelliSense in the editor for a more comfortable workflow.

Available API models

The Office add-ins platform offers two main JavaScript API models , which complement each other and should be clearly distinguished:

• Application-specific APIs
• Common APIs

Application-specific APIs are designed to interact with native objects of a particular application. For example, with Excel APIs you can work with worksheets, ranges, tables, charts, and other Excel-specific elements, using strongly typed objects.

This API model works with promises and supports a batch operations model , where you can chain multiple operations into a single request to the Office application, which greatly improves performance, especially in Office on the web. This model appeared in Office 2016 and has been expanded with new sets of requirements.

Common APIs , on the other hand, focus on functionalities shared across multiple Office applications , such as dialog boxes, client settings, or certain parts of the user interface. This model is based on callbacks instead of promises and allows only one operation per request. It is backward compatible, having been introduced with Office 2013, and is used, for example, to interact with Outlook, PowerPoint, or Project at a basic level.

API requirement sets

Within the JavaScript API, the different groups of features are organized into what are called requirement sets . Each set groups a set of API members under a name and version, allowing you to know very precisely which capabilities are available in each Office client.

For example, you can find sets like:

• ExcelApi 1.7, which groups specific APIs for Excel available from a certain version.
• DialogApi 1.1, which offers common dialog box functions for several Office applications.

Add-ins can use these API sets to check at runtime whether an application supports the necessary APIs , and thus adapt their behavior or display appropriate messages if something is unavailable. The specific compatibility of each set varies depending on the platform ( Windows , Mac , web, mobile) , the Office version, and the application itself (Word, Excel, etc.).

Explore the APIs with Script Lab

If you want to experiment with APIs without building a whole project, you can use Script Lab , a free add-on available on the Microsoft Marketplace.

Script Lab lets you test code snippets directly within applications like Excel or Word , instantly seeing how they affect the document. It's ideal for learning the API, validating small pieces of logic, or building quick prototypes before integrating them into your actual add-in.

Within Script Lab, you'll find a library of pre-built examples that you can run as is or use as a foundation for your own code. In addition, the official documentation includes short videos demonstrating Script Lab in action, which is very helpful for getting a feel for everything it can do.

Expand the Office user interface

One of the strengths of add-ins is that they are not limited to running code "behind the scenes ," but can be fully integrated into the Office interface, adding tabs, buttons, menus, and panels tailored to your needs.

The most common ways to extend the interface are:

• Plugin commands that are integrated into the ribbon or context menus.
• HTML Containers, such as task panes, content add-ons, and custom dialog boxes.

Add-in commands allow you to add new tabs or button groups to the Office ribbon, or even expand the context menu that appears when you right-click on text or objects in Excel. When a user clicks one of these commands, it can execute JavaScript code, open a specific task pane, or launch a dialog box.

Task panes, content add-ins, and dialog boxes, on the other hand, are HTML containers that display your add-in's interface. The content is provided by web pages that you specify in the manifest, and from these pages you can use the Office API to interact with the document, in addition to everything a typical website does: authentication, calls to external APIs, data visualization, and so on.

The documentation for user interface elements for Office add-ins goes into detail about how to design the user experience , what patterns are recommended, and how to take advantage of each type of container.

Find and use an already installed plugin

From the end user's point of view, once an add-in has been installed or distributed, locating it within Office is very simple , although it has its nuances depending on the application.

1. First of all, you have to Log in to Office with the appropriate Microsoft 365 account. To do this, open any Office application and, in the upper right corner, select the sign-in option and enter your email and password.
2. In Word, Excel, or desktop PowerPoint, you can go to Insert > My Add-ons to see the list of available add-ons for that application.
3. Inside the box Office Add-insYou can search for the add-on by name. If it doesn't appear, check that you're logged in with the correct account and, if necessary, click on Update to refresh the list.
4. When you find the accessory, simply do double click on it so that it starts and displays its interface within the document.

This behavior, based on linking add-ins to the user account , allows add-ins to be consistently available across different devices and applications, as long as you use the same Microsoft 365 account.

Managing add-ons and extensions in other office suites

Although we focus here on the Office add-ins platform, it is helpful to have context by comparing it with other office suites and their extension management , because the general philosophy is similar.

COM add-ins and add-ins in classic Microsoft Office

In desktop versions like Word 2016, in addition to modern web-based add-ins, traditional COM components and add-ins are still available . To manage them, go to File > Options and, in the Add-ins section, review the list grouped by type.

Selecting an item from the list displays its details at the bottom of the window. A typical example is the FoxitReader PDF Creator add-on , which is optionally added when installing Foxit Reader and includes an additional tab or buttons for creating and manipulating PDFs from Word.

At the bottom of this window is an area called Manage , with a drop-down menu and a Go… button that allows you to manage a specific type of extension: activate, deactivate, or remove them. Not all add-ons add visible buttons or tabs; this depends entirely on how the developer designed them.

Extensions in LibreOffice Calc

In LibreOffice, specifically in Calc, you can manage extensions from the Tools > Extension Manager menu . This displays a list of installed extensions, with options to add new ones, update existing ones, or uninstall them.

Some extensions appear with a small yellow padlock , indicating that they are part of the LibreOffice base package and cannot be removed. To install new ones, you usually go to the official LibreOffice extensions and templates page , located at https://extensions.libreoffice.org/ . Although the site is mostly in English, most developers publish their extensions in that language, so it's helpful not to be intimidated by it.

Add-ons in Google Docs documents

Google Docs also offers a system of add-ons integrated into the interface itself . From the Add-ons menu of a document, you can manage the add-ons you already have installed and search for new ones in the Google database.

The system allows you to filter by category, see the number of users who have installed each add-on , check ratings and reviews, and install directly with just a couple of clicks. This integrated store greatly simplifies the process, as there's no need to visit any external developer website to find add-ins.

Permissions and access to device features

Some plugins, especially those based on modern web technologies, may need access to device capabilities such as the camera, geolocation, or microphone. When this happens, the browser or the platform itself displays a dialog box requesting your consent.

You will usually see options such as Allow, Allow once, or Deny :

• If you choose AllowThe add-on will be able to access the requested resources continuously, until you uninstall the add-on or clear the cache of the browser where it is running.
• If you choose Allowing onceAccess will be granted only during the current session, until you close the tab or window where the add-on is running.
• If you choose DenyThe add-on will not have access and, when it needs it again, it will ask for permission again through another dialog box.

If at any point you want to revoke a permission you accepted with "Allow" , you will have to uninstall the add-on or clear your browser cache to force the previous decisions to be forgotten and require a new request.

The Office add-in ecosystem offers a highly flexible framework for extending Word, Excel, Outlook, and other Office applications using standard web technologies, tools like Yeoman, Visual Studio, and the VS Code Development Kit, and a JavaScript API with specific and common models supported by sets of requirements. By understanding the role of the manifest, project structure, debugging options, deployment methods, and the implications of permissions and device access, it's possible to build powerful solutions that seamlessly integrate into the everyday Office experience without disrupting the user's usual workflow.