excel-content-hello-world

page_type	sample
urlFragment	excel-content-add-in-hello-world
products	office-excel office m365
languages	javascript
extensions	contentType technologies createdDate samples Add-ins 02/04/2026 10:00:00 AM
description	Create a Excel content add-in that gets the selected text then displays it.

Create a Excel content add-in that gets and displays selected text

Summary

Learn how to build an Office content add-in that gets and displays the text selected from a Excel worksheet.

Applies to

• Excel on Windows and in a browser.

Version history

Version	Date	Comments
1.0	02-04-2026	Initial release
1.1	06-19-2026	Updated to use Excel JavaScript API

Prerequisites

• Microsoft 365 - You can get a free developer sandbox by joining the Microsoft 365 Developer Program.

Get and display selected text

When the user chooses the Get data from selection button, the getDataFromSelection() function is called. This function uses Workbook.getSelectedRange() to get the selected range and load its text. "Hello, world!" and the selected text are then displayed in the content add-in.

For more information, see Content add-ins.

// Reads data from current document selection and displays it.
async function getDataFromSelection() {
    try {
        await Excel.run(async (context) => {
            const range = context.workbook.getSelectedRange();
            range.load("text");
            await context.sync();

            // Join multi-cell selections into a single string.
            const text = range.text.map((row) => row.join(", ")).join("; ");
            document.getElementById("selected-data").textContent = 'Hello, world! The selected text is: ' + text;
        });
    } catch (error) {
        document.getElementById("selected-data").textContent = 'Error getting selected text.';
        console.error('Error:', error.message);
    }
}

Run the sample

Run the sample with GitHub as the host

An Office Add-in requires you to configure a web server to provide all the resources, such as HTML, image, and JavaScript files. The Hello World sample is configured so that the files are hosted directly from this GitHub repo, so all you need to do is build the manifest and package, and then sideload the package.

1. Clone or download this sample to a folder on your computer. Then in a command prompt, bash shell, or TERMINAL in Visual Studio Code, navigate to the root of the sample folder.

2. Run the command npm install.

3. Run the command npm run build.

4. Run the command npm run start:prod.

   After a few seconds, desktop Excel opens, and after a few seconds more, the content add-in appears over the current worksheet with a Get data from selection button.

   • If the content add-in doesn't appear, use the Add-ins button in the Home tab of the ribbon, then select the name of the content add-in, "Excel Content Add-in".

5. Choose the Get data from selection button to display "Hello, world!" and the selected text.

6. To try this out in Excel on the web:

   1. Open a workbook.
   2. Use the Add-ins button in the Home tab of the ribbon, then select the name of the content add-in, "Excel Content Add-in". If the add-in is absent, select the Manage link then open the add-in from there.

When you're finished working with the add-in, close Excel, and then in the window where you ran the three npm commands, run npm run stop:prod.

Configure a localhost web server and run the sample from localhost

If you prefer to configure a web server and host the add-in's web files from your computer, use the following steps.

1. Clone or download this sample to a folder on your computer. Then in a command prompt, bash shell, or TERMINAL in Visual Studio Code, navigate to the root of the sample folder.

2. Run the command npm install.

3. Run the command npm start.

   • If you've never developed an Office Add-in on this computer before or it has been more than 30 days since you last did, you'll be prompted to delete an old security cert or install a new one. Agree to both prompts.
   • After a few seconds, a webpack dev-server window will open and your files will be hosted there on localhost:3000.
   • When the server is successfully running, desktop Excel opens, and after a few seconds more, the content add-in appears over the current worksheet with a Get data from selection button.
     • If the content add-in doesn't appear, use the Add-ins button in the Home tab of the ribbon, then select the name of the content add-in, "Excel Content Add-in".

4. Ensure that there's text in the worksheet, then select any range of cells containing text in the worksheet.

5. Choose the Get data from selection button to display "Hello, world!" and the selected text.

6. To try this out in Excel on the web:

   1. Open a workbook.
   2. Use the Add-ins button in the Home tab of the ribbon, then select the name of the content add-in, "Excel Content Add-in". If the add-in is absent, select the Manage link then open the add-in from there.
      • Note: Depending on your machine's network or security settings, the add-in's web content might not be accessible.

When you're finished working with the add-in, close Excel, and then in the window where you ran the two npm commands, run npm stop.

Questions and feedback

• Did you experience any problems with the sample? Create an issue and we'll help you out.
• We'd love to get your feedback about this sample. Go to our Office samples survey to give feedback and suggest improvements.
• For general questions about developing Office Add-ins, go to Microsoft Q&A using the office-js-dev tag.

Copyright

Copyright (c) Microsoft Corporation. All rights reserved.

This project has adopted the Microsoft Open Source Code of Conduct. For more information, see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Note: The content.html file contains an image URL that tracks diagnostic data for this sample add-in. Please remove the image tag if you reuse this sample in your own code project.