When you've completed the wizard, Visual Studio creates a solution that contains two projects. The Home.html file opens in Visual Studio. Visual Studio creates a solution and its two projects appear in Solution Explorer. Choose Word Web Add-in, then select Next. In Visual Studio, choose Create a new project. 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. Visual Studio 2019 or later with the Office/SharePoint development workload installed. In Word, open a new document, choose the Home tab, and then choose the Show Taskpane button in the ribbon to open the add-in task pane.Īt the bottom of the task pane, choose the Run link to add the text "Hello World" to the document in blue font.Ĭongratulations, you've successfully created a Word task pane add-in! Next, learn more about the capabilities of a Word add-in and build a more complex add-in by following along with the Word add-in tutorial. If your add-in doesn't sideload in the document, manually sideload it by following the instructions in Sideload Office Add-ins in Office on the web manually. npm run start:web -document !jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp.When you run this command, the local web server starts. To test your add-in in Word on a browser, run the following command in the root directory of your project. This starts the local web server (if it's not already running) and opens Word with your add-in loaded. To test your add-in in Word, run the following command in the root directory of your project. If you're testing your add-in on Mac, run the following command before proceeding. cd "My Office Add-in"Ĭomplete the following steps to start the local web server and sideload your add-in. Navigate to the root folder of the project.
#OFFICE ADD IN TUTORIAL CODE#
src/taskpane/taskpane.js file contains the Office JavaScript API code that facilitates interaction between the task pane and the Office client application. src/taskpane/taskpane.css file contains the CSS that's applied to content in the task pane.
src/taskpane/taskpane.html file contains the HTML markup for the task pane. To learn more about the manifest.xml file, see Office Add-ins XML manifest. manifest.xml file in the root directory of the project defines the settings and capabilities of the add-in. When you're ready to try out your add-in, proceed to the next section. If you'd like to explore the components of your add-in project, open the project in your code editor and review the files listed below.
#OFFICE ADD IN TUTORIAL GENERATOR#
The add-in project that you've created with the Yeoman generator contains sample code for a basic task pane add-in. The step-by-step instructions within this article provide all of the guidance you'll need to complete this tutorial. You can ignore the next steps guidance that the Yeoman generator provides after the add-in project's been created.