How to create Office add-ins step by step

If ever you wondered How to create Office add-ins (or add-ins, plugins, extensions… whatever you prefer to call them), you're in the right place. Add-ons are small web applications that integrate into Word, Excel, Outlook, PowerPoint, OneNote, Project and others apps to expand what Office can already do, from automating heavy tasks to connecting with external cloud services.

Before you start programming like there's no tomorrow, it's important to understand that An Office add-in is not just a simple standalone scriptIt 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 basically 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 side panel to offer new features.

grace 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 well differentiated partswhich must be kept in mind from the very beginning:

• 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 manifesto acts as “identity card” and instruction manual of 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 At the root of the project, it 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 other things, the following: key elementswhich should be kept under close control:

• 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 this makes The manifesto is critical for both development and publication.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 typically composed of HTML pages, CSS stylesheets, and JavaScript or TypeScript scriptsand can be built with or without frameworks (React is one of the most common, but not the only one).

From these pages, the plugin 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-ins platform offers several ways to create projects ready for developmentThese are tailored to different profiles and work preferences. The main options are: the Yeoman generator, Visual Studio, the Visual Studio Code Add-on Development Kit, 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 add-ons to:

• 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 “bareback”or a project with ReactSimilarly, in JavaScript or TypeScript. The generator handles 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 software installed. basic componentswhich 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, the project creation It's quite straightforward. From the command line, in the directory where you want to work, you run:

yo office

The assistant will ask a series of questions to adjust the projectFor example, for a first task pane add-in for Word, you could 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

Once you finish the wizard, Yeoman will generate all the project files and install the necessary Node modules, so that you'll find a fully functional basic accessory.

Project structure generated with Yeoman

The project created with Yeoman for a task board usually includes a very similar structure 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-on, 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} It is the address of a Word document stored in OneDrive or in a library of SharePoint to which you have access. If for some reason the add-in does not load correctly in Office on the web, you can resort to manual installation and manual removal of 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 project execution, it is relatively common to encounter npm warnings and errorsSome common situations are:

• 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 It allows you to create Office add-ins directly from Visual Studio. In this case, the add-in project is part of a solution and is also based on HTML, CSS, and JavaScript.

Visual Studio allows you to create add-ins for:

• Excel
• Outlook
• Power point
• Word

Yes, It does not support the creation of add-ins for OneNote or ProjectFor those applications, you'll need to use the Yeoman 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 add-on with limited functionality, intended as a starting point. From there, you are in charge of customizing:

• 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 know general concepts of the plugin platform (development life cycle, manifest, API models, requirements sets) 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 consists of:

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 solve specific problems can be found in the documentation. Debugging Office Add-ins in Visual Studio 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-ins Development Kit, an extension that makes your life easier when creating, running and debugging plugin projects from within the editor itself.

With this extension you can create new add-on projects From a guided interface, you can load examples directly into your environment without having to manually set up the entire configuration. 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 on 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 option Create to start generating the add-on.

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

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

The resulting project also contains a basic task pane add-on, with sample code ready to run and modify.

Structure and key files in a VS Code project

La structure of this type of project It's very similar to the one generated by Yeoman, and you'll usually 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 using the Development Kit Simply follow a few very 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 checks that all the previous requirements and shows in the terminal Detailed information if something goes wrong. The first Boot It may take a little while because necessary dependencies and certificates are being installed.

When you finish testing and debugging, it is very important stop the plugin properlySimply closing the Office app doesn't always properly invalidate the add-in registration. 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 plugin isn't starting or is behaving strangely, it usually helps. Close all instances of Office and make sure you've stopped the previous server using the extension's own option. You'll also find a specific section on this in the official documentation. troubleshooting during the development of Office add-insAnd in extreme cases, you can always open an issue on GitHub.

Microsoft 365 Agents Toolkit

Another modern option is to use Microsoft 365 Agents ToolkitIt's 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 plugin 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 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 will need to add a script tag within the head thus:

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

From that moment on, you will have the Office namespace available and you will be able to use both the application-specific APIs (Excel, Word, etc.) such as Common APIs which are shared by several applications. Furthermore, the official documentation explains how to enable features such as IntelliSense in the editor to work more comfortably.

Available API models

The Office add-ins platform offers two major API models in JavaScriptwhich complement each other and which should be clearly distinguished:

• Application-specific APIs
• Common APIs

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

This API model works with promises and supports a model of batch operationsThis allows you to 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.

The Common APIsFor their part, they focus on functionalities shared between several Office applications, such as dialog boxes, client settings, or certain parts of the user interface. This model is based on callbacks Instead of promises, it allows only one operation per request. It is backward compatible, as it was 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 functionalities are organized into what are called sets of requirementsEach set groups a set of API members under a name and version, allowing you to know very precisely what 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.

Accessories can use these sets to Check at runtime whether an application supports the necessary APIsand thus adapt its 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 tinker 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 WordSeeing in real time 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 plugin.

Within Script Lab you will find a library of pre-built examples which you can run as is or use as a base for your own code. Furthermore, the official documentation includes short videos showing Script Lab in action, which is very helpful for getting an idea of ​​everything it can do.

Expand the Office user interface

One of the strengths of accessories is that They don't just execute code "behind the scenes"but they can be fully integrated into the Office interface, adding tabs, buttons, menus and panels tailored to your needs.

The most common forms The following are ways to extend the interface:

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

The plugin commands These 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 presses one of these commands, it can execute JavaScript code, open a specific task pane, or launch a dialog box.

Meanwhile, the task panes, content add-ins, and dialog boxes These 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 regular website does: authentication, calls to external APIs, data visualization, etc.

The documentation for user interface elements for Office add-ins goes into detail about how 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 a plugin has been installed or distributed, Locating it within Office is very easy.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 link add-ons to user accountIt 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're focusing on the Office add-ins platform here, it's helpful to have some context by comparing it with other office suites and their extension managementbecause 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, there are still COM components and traditional add-insTo manage them, you can go to File > Options and, in the add-ons section, review the list grouped by type.

When you select an item from the list, the following are displayed: its details at the bottom of the window. A typical example is the add-on. FoxitReader PDF Creator, which is optionally added when installing Foxit Reader and which incorporates an additional tab or buttons to create and manipulate PDFs from Word.

At the bottom of this window there is an area called Managewith a drop-down menu and a button To go… which 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 menu Tools > Extension ManagerThere you will find a list of installed extensions, with options to add new ones, update existing ones, or uninstall them.

Some extensions appear with a small yellow padlockThis indicates that they are part of the base LibreOffice package and cannot be removed. To install new ones, you usually go to the official LibreOffice website. LibreOffice extensions and templates, hosted in 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 afraid of it.

Add-ons in Google Docs documents

Google Docs It also offers a system of integrated plugins within the interface itself. From the menu Accessories From a document, you can manage the ones you already have installed and search for new ones in the database. Google.

The system allows Filter by categories, see the number of users who have installed each add-on.You can 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, geographic location, or microphone. When this happens, the browser or the platform itself displays a dialog box asking for your consent.

You will usually see options like 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 time you want revoke a permission you accepted with “Allow”You will need to uninstall the add-on or clear your browser cache to force the previous decisions to be forgotten and required again.

The Office add-in ecosystem offers a highly flexible framework for extending Word, Excel, Outlook, and more Using standard web technologies, tools like Yeoman, Visual Studio, or the VS Code Development Kit, and a JavaScript API with specific and common models supported by sets of requirements, and with a solid understanding of the manifest's role, 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.