Quick Start: Create Word Add-ins with HTML, CSS, and JavaScript

This guide will walk you through the process of creating your first Word add-in using standard web technologies: HTML, CSS, and JavaScript. You'll learn how to set up your development environment, create a basic add-in project, and add simple functionality.

Step 1: Set Up Your Development Environment

Before you begin, ensure you have the necessary tools installed. You'll need Node.js and npm (Node Package Manager).

If you don't have them, download and install them from nodejs.org.

Next, install the Yeoman generator for Office add-ins and the Office add-in project templates:

npm install -g yo generator-office

Step 2: Create Your First Word Add-in Project

Use the Yeoman generator to create a new Office add-in project. Open your terminal or command prompt, navigate to the directory where you want to create your project, and run the following command:

yo office

Follow the prompts:

  • Choose Office Add-in Project.
  • Enter a name for your project (e.g., MyWordAddin).
  • Choose Word as the client application.
  • Choose HTML, CSS, and JavaScript for the project type.
  • Choose Sideload without manifest for development.

After the generator finishes, navigate into your project directory:

cd MyWordAddin

Step 3: Run Your Add-in

To run your add-in, start the local web server provided by the project scaffolding:

npm start

This command will build your add-in and start a local web server. Office will then open with your add-in loaded in a task pane.

Step 4: Explore the Project Files

Open your project in your favorite code editor. Key files include:

  • manifest.xml: Describes your add-in and its capabilities.
  • src/taskpane/taskpane.html: The HTML structure for your task pane.
  • src/taskpane/taskpane.css: Styles for your task pane.
  • src/taskpane/taskpane.js: The JavaScript logic for your task pane.

The taskpane.js file contains the core logic. It includes code to interact with the Office JavaScript API.

Step 5: Add Basic Functionality

Let's add a simple button to insert text into the Word document. Modify your src/taskpane/taskpane.html file to include a button:

<button id="insert-text-button">Insert My Text</button>

Now, in src/taskpane/taskpane.js, add an event listener for this button and use the Office JavaScript API to insert text:

document.getElementById("insert-text-button").onclick = insertText;

async function insertText() {
    await Word.run(async (context) => {
        context.document.body.insertText("Hello from my first Word add-in!", Word.InsertLocation.replace);
        await context.sync();
    });
}

Make sure to replace the existing placeholder code in taskpane.js with this new function and the event listener. After saving your changes, the add-in should automatically refresh in Word, and you'll see your new button.

Tip: The Word.run() method provides a robust way to interact with the Office document, handling context synchronization automatically.

What's Next?