Creating add-ins gets easier — announcing updates to Yo Office

Office Add-ins team

Over the past few months, we’ve done some research and talked to you about your experiences building add-ins. In response to your feedback, we are rolling out changes  to the Yeoman Office Add-in generator. These changes will help you get started with add-ins faster and more easily.

Use Fabric templates

To help ensure that your add-in is successful, our design team revamped the templates in the generator to use Office UI Fabric. Fabric is the Office design language and includes styles, icons, and components that you can use to build your UI. We’ve also enhanced the generated manifests to implement add-in commands. These templates are now available by default and include the designs that show the highest add-in retention and conform to our design best practices.

Stay up-to-date on the newest technologies

Since we launched Yo Office, the top requests we’ve seen are for Browsersync and Typescript support. Today, we’re happy to announce that we’ve added support for both.

Types enhance the quality of your code and make it easier to understand. Typescript provides an optional type system for JavaScript and works well with OfficeJS. To use TypeScript, select it as an option when creating your add-in. Visit their site for more information.  

Browsersync is a test assistant that helps you tweak and test your code faster by synchronizing file changes across browsers in real time and across multiple devices.  Once you edit the file, save, and Browsersync will do the rest! To find out more, visit their site.

Browesersync""

Save time – skip the prompts and use arguments

We kept a few of the options from the old generator, but updated Yo Office to set most of the values through command-line arguments. You can use arguments to create your add-in and skip most of the prompt questions, as shown in the following example.

arguments""

Install Yo Office

Yeoman is built on Node.js. If you don’t have Node.js installed on your Mac, we recommend using Node Version Manager to install it. If you are on Windows, go to nodejs.org and download the distribution for your system.

Next, open a terminal, and install the Yeoman generator and its dependencies globally by using the following command:

npm install -g yo generator-office

If you already have Yo Office installed, use the following command to update your version:

npm update -g generator-office

Now you should be ready to run the generator!

generator""

Contribute to Yo Office

The feedback we received over the past few months has helped us define the changes we’ve made to the generator. If you have more feedback to share, please log an issue on our GitHub repository. We would also like to thank the following GitHub community contributors for helping us make Yo Office what it is today!

@JoshuaKGoldberg  @richarddavenport @alexkieling
@Ibrahim-Islam @pcostesi @LanceEa
@nigel-dewar @rolandoldengarm  @CodeMoggy
@bpkennedy @gavinbarron @stefanreimers
@jasonjoh @TristanD-MSFT @ashuetawah
@vboctor @Mimetis @andrewconnell
@justsayno @waldekmastykarz @Ricalo
@YannickGagnon @jthake @MrPiao
@brucemcpherson @martellaj @mauricionr
@ministainer @StfBauer

We value your feedback and hope you continue to contribute to our generator. To make this easier, we have restructured the generator-office project files on GitHub. For example, when you include a framework folder under either js or ts, the generator will update itself to include the framework as an option for that question. To see all these changes, check out our repository. And if you haven’t already contributed to Yo Office, see our contributor’s guidelines.

See also

Yo Office repository

Sideloading your add-in

JavaScript API for Office reference

Best practices for developing Office Add-ins

Debugging your add-in

Feedback usabilla icon