title	description	ms.date	ms.service	ms.localizationpriority
Build your first Excel task pane add-in	Learn how to build a simple Excel task pane add-in by using the Office JS API.	12/11/2023	excel	high

Build an Excel task pane add-in

In this article, you'll walk through the process of building an Excel task pane add-in.

Create the add-in

[!includeChoose your editor]

One-line script

Prerequisites

You must have Office connected to a Microsoft 365 subscription.

Note

If you don't already have Office, you can join the Microsoft 365 developer program to get a free, 90-day renewable Microsoft 365 subscription to use during development.

Create the add-in project

You can run the one-line script on Windows or on macOS. It performs the following to set up the add-in development environment.

On Windows:

Installs Node.js, and Git, if they aren't found on your machine.
Downloads the files of the sample add-in project.
Opens the add-in project in Visual Studio Code, if installed. If Visual Studio Code isn't installed on your machine, the folder that contains the add-in project files opens instead.
Prompts you to run the add-in.

On macOS:

Downloads the files of the sample add-in project.
Opens the folder that contains the add-in project files. Or opens the add-in project in Visual Studio Code if it is installed and configured to support launching from terminal.
Prompts you to run the add-in.

Note

In addition to Windows and macOS, we're working to support the script on other platforms.

If you're using Windows, run the following from a command prompt.

iwr aka.ms/exceladdin/helloworld -outfile excelhelloworld.bat; saps excelhelloworld.bat

If you're using macOS, run the following in a terminal.

bash <(curl -L -s aka.ms/exceladdin/helloworld_mac)

Try it out

Once your add-in project is set up, it automatically opens in Visual Studio Code. If you don't have Visual Studio Code installed on your machine, the folder containing the files of your add-in project opens instead.

If you choose to run the add-in when prompted, an Excel spreadsheet opens, displaying the add-in task pane. Select a range of cells in the spreadsheet, then choose Run from the task pane to set the color of the selected range to yellow.

Next steps

Congratulations, you've successfully created an Excel task pane add-in! Next, learn more about the capabilities of an Excel add-in and build a more complex add-in by following along with the Excel add-in tutorial.

Yeoman generator

Prerequisites

[!includeYeoman generator prerequisites]

Create the add-in project

[!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? Excel

After you complete the wizard, the generator creates the project and installs supporting Node components.

[!includeNode.js version 20 warning]

[!includeYeoman generator next steps]

Explore the project

[!includeYeoman generator add-in project components]

Try it out

Navigate to the root folder of the project.
```
cd "My Office Add-in"
```
[!includeStart server section]
In Excel, choose the Home tab, and then choose the Show Taskpane button on the ribbon to open the add-in task pane.
Select any range of cells in the worksheet.
At the bottom of the task pane, choose the Run link to set the color of the selected range to yellow.

Next steps

Congratulations, you've successfully created an Excel task pane add-in! Next, learn more about the capabilities of an Excel add-in and build a more complex add-in by following along with the Excel add-in tutorial.

Visual Studio

Prerequisites

[!includeQuick Start prerequisites]

Create the add-in project

In Visual Studio, choose Create a new project.
Using the search box, enter add-in. Choose Excel Web Add-in, then select Next.
Name your project ExcelWebAddIn1 and select Create.
In the Create Office Add-in dialog window, choose Add new functionalities to Excel, and then choose Finish to create the project.
Visual Studio creates a solution and its two projects appear in Solution Explorer. The Home.html file opens in Visual Studio.

Explore the Visual Studio solution

[!includeDescription of Visual Studio projects]

Update the code

Home.html specifies the HTML that will be rendered in the add-in's task pane. In Home.html, replace the <body> element with the following markup and save the file.

<body class="ms-font-m ms-welcome">
    <div id="content-header">
        <div class="padding">
            <h1>Welcome</h1>
        </div>
    </div>
    <div id="content-main">
        <div class="padding">
            <p>Choose the button below to set the color of the selected range to green.</p>
            <br />
            <h3>Try it out</h3>
            <button class="ms-Button" id="set-color">Set color</button>
        </div>
    </div>
</body>

Open the file Home.js in the root of the web application project. This file specifies the script for the add-in. Replace the entire contents with the following code and save the file.

'use strict';

(function () {

    Office.onReady(function() {
        // Office is ready
        $(document).ready(function () {
            // The document is ready
            $('#set-color').click(setColor);
        });
    });

    async function setColor() {
        await Excel.run(async (context) => {
            const range = context.workbook.getSelectedRange();
            range.format.fill.color = 'green';

            await context.sync();
        }).catch(function (error) {
            console.log("Error: " + error);
            if (error instanceof OfficeExtension.Error) {
                console.log("Debug info: " + JSON.stringify(error.debugInfo));
            }
        });
    }
})();

Open the file Home.css in the root of the web application project. This file specifies the custom styles for the add-in. Replace the entire contents with the following code and save the file.

#content-header {
    background: #2a8dd4;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    overflow: hidden;
}

#content-main {
    background: #fff;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

.padding {
    padding: 15px;
}

Update the manifest

In Solution Explorer, go to the ExcelWebAddIn1 add-in project and open the ExcelWebAddIn1Manifest directory. This directory contains your manifest file, ExcelWebAddIn1.xml. The XML manifest file defines the add-in's settings and capabilities. See the preceding section Explore the Visual Studio solution for more information about the two projects created by your Visual Studio solution.
The ProviderName element has a placeholder value. Replace it with your name.
The DefaultValue attribute of the DisplayName element has a placeholder. Replace it with My Office Add-in.
The DefaultValue attribute of the Description element has a placeholder. Replace it with A task pane add-in for Excel.

Save the file.

...
<ProviderName>John Doe</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
<DisplayName DefaultValue="My Office Add-in" />
<Description DefaultValue="A task pane add-in for Excel"/>
...

Try it out

Using Visual Studio, test the newly created Excel add-in by pressing F5 or choosing the Start button to launch Excel with the Show Taskpane add-in button displayed on the ribbon. The add-in will be hosted locally on IIS. If you are asked to trust a certificate, do so to allow the add-in to connect to its Office application.
In Excel, choose the Home tab, and then choose the Show Taskpane button on the ribbon to open the add-in task pane.
Select any range of cells in the worksheet.
In the task pane, choose the Set color button to set the color of the selected range to green.

[!includeConsole tool note]

Next steps

Congratulations, you've successfully created an Excel task pane add-in! Next, learn more about developing Office Add-ins with Visual Studio.

[!includeThe common troubleshooting section for all quickstarts]

Code samples

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

excel-quickstart-jquery-experiment.md

excel-quickstart-jquery-experiment.md

Build an Excel task pane add-in

Create the add-in

One-line script

Prerequisites

Create the add-in project

Try it out

Next steps

Yeoman generator

Prerequisites

Create the add-in project

Explore the project

Try it out

Next steps

Visual Studio

Prerequisites

Create the add-in project

Explore the Visual Studio solution

Update the code

Update the manifest

Try it out

Next steps

Code samples

See also

Files

excel-quickstart-jquery-experiment.md

Latest commit

History

excel-quickstart-jquery-experiment.md

File metadata and controls

Build an Excel task pane add-in

Create the add-in

One-line script

Prerequisites

Create the add-in project

Try it out

Next steps

Yeoman generator

Prerequisites

Create the add-in project

Explore the project

Try it out

Next steps

Visual Studio

Prerequisites

Create the add-in project

Explore the Visual Studio solution

Update the code

Update the manifest

Try it out

Next steps

Code samples

See also