{"id":22637,"date":"2024-09-09T08:00:22","date_gmt":"2024-09-09T15:00:22","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=22637"},"modified":"2024-09-09T00:17:05","modified_gmt":"2024-09-09T07:17:05","slug":"announcing-the-office-add-ins-development-kit-for-visual-studio-code-public-preview","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/announcing-the-office-add-ins-development-kit-for-visual-studio-code-public-preview\/","title":{"rendered":"Announcing the Office Add-ins Development Kit for Visual Studio Code (public preview)"},"content":{"rendered":"<p>We\u2019re excited to announce the Office Add-ins Development Kit for Visual Studio Code is now in public preview.<\/p>\n<p>The Office Add-ins Development Kit is a new development tool to help you set up your environment, create Office Add-ins, and debug the code with a streamlined developer experience in Visual Studio Code when you build <a href=\"https:\/\/learn.microsoft.com\/office\/dev\/add-ins\/develop\/xml-manifest-overview?tabs=tabid-1\">Office Add-ins with the XML-formatted add-in only manifest.<\/a><\/p>\n<p>Try the Office Add-ins Development Kit and <a href=\"https:\/\/forms.office.com\/r\/8SH42ULSDQ\">give us your feedback<\/a>! We look forward to your insights to help us improve the experience as we make the kit generally available.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/08\/office-add-in-dev-scaled.gif\"><img decoding=\"async\" class=\"size-large wp-image-22691 alignnone\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/08\/office-add-in-dev-1024x609.gif\" alt=\"office add in dev kit animated gif\" width=\"640\" height=\"381\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/08\/office-add-in-dev-1024x609.gif 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/08\/office-add-in-dev-300x178.gif 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/08\/office-add-in-dev-768x456.gif 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/08\/office-add-in-dev-1536x913.gif 1536w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/08\/office-add-in-dev-2048x1217.gif 2048w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<h2>What&#8217;s new<\/h2>\n<p><span data-contrast=\"auto\">T<\/span><span data-contrast=\"auto\">he Office Add-ins Development Kit<\/span><span data-contrast=\"auto\"> is designed for a streamlined experience to help you get started to develop your Office Add-ins.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:279}\">\u00a0<\/span><\/p>\n<ul>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"1\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559685&quot;:360,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Symbol&quot;,&quot;469769242&quot;:[8226],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;\uf0b7&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"1\" data-aria-level=\"1\"><b><span data-contrast=\"none\">Quick start:<\/span><\/b><span data-contrast=\"none\"> Initialize <\/span><span data-contrast=\"auto\">Office<\/span><span data-contrast=\"none\"> add-in projects with clicks<\/span><span data-contrast=\"auto\"> on UI<\/span><span data-contrast=\"none\">.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:279}\">\u00a0<\/span><\/li>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"1\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559685&quot;:360,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Symbol&quot;,&quot;469769242&quot;:[8226],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;\uf0b7&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"1\" data-aria-level=\"1\"><b><span data-contrast=\"none\">Auto-install dependencies:<\/span><\/b><span data-contrast=\"none\"> Automatically install necessary <\/span><span data-contrast=\"none\">npm<\/span><span data-contrast=\"none\"> package dependencies.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:279}\">\u00a0<\/span><\/li>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"1\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559685&quot;:360,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Symbol&quot;,&quot;469769242&quot;:[8226],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;\uf0b7&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"1\" data-aria-level=\"1\"><b><span data-contrast=\"none\">Easy preview:<\/span><\/b><span data-contrast=\"none\"> Click to sideload and immediately preview your add-in in Office.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:279}\">\u00a0<\/span><\/li>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"1\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559685&quot;:360,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Symbol&quot;,&quot;469769242&quot;:[8226],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;\uf0b7&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"1\" data-aria-level=\"1\"><b><span data-contrast=\"none\">Real-time update:<\/span><\/b><span data-contrast=\"none\"> Make code changes and see them instantly in your sideloaded add-in.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:279}\">\u00a0<\/span><\/li>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"1\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559685&quot;:360,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Symbol&quot;,&quot;469769242&quot;:[8226],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;\uf0b7&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"1\" data-aria-level=\"1\"><b><span data-contrast=\"auto\">Sample gallery:<\/span><\/b><span data-contrast=\"auto\"> B<\/span><span data-contrast=\"auto\">rowse through a gallery of samples that showcase various features and scenarios of Office Add-ins.<\/span><\/li>\n<\/ul>\n<h2>Get started<\/h2>\n<h3>Prerequisites<\/h3>\n<ul>\n<li>Download and install <a href=\"https:\/\/visualstudio.microsoft.com\/downloads\/\">Visual Studio Code<\/a>.<\/li>\n<li>Visit the <a href=\"https:\/\/nodejs.org\/\">Node.js site<\/a> to download and install the right LTS version for your operating system. To verify if you&#8217;ve already installed these tools, run the commands <strong>node -v<\/strong> and <strong>npm -v<\/strong> in your terminal.<\/li>\n<li>Get Office connected to a Microsoft 365 subscription. You might qualify for a Microsoft 365 E5 developer subscription through the <a href=\"https:\/\/developer.microsoft.com\/microsoft-365\/dev-program\">Microsoft 365 Developer Program<\/a>, see <a href=\"https:\/\/learn.microsoft.com\/office\/developer-program\/microsoft-365-developer-program-faq#who-qualifies-for-a-microsoft-365-e5-developer-subscription-\">FAQ<\/a> for details. Alternatively, <a href=\"https:\/\/www.microsoft.com\/microsoft-365\/try?rtc=1\">sign up for a 1-month free trial<\/a> or <a href=\"https:\/\/www.microsoft.com\/microsoft-365\/buy\/compare-all-microsoft-365-products\">purchase a Microsoft 365 plan<\/a>.<\/li>\n<\/ul>\n<h3>Install the Office Add-ins Development Kit<\/h3>\n<p>You can install the Office Add-ins Development Kit using <strong>Extensions<\/strong> in Visual Studio Code or install it from the <a href=\"https:\/\/marketplace.visualstudio.com\/search?term=Office%20Add-ins&amp;target=VSCode&amp;category=All%20categories&amp;sortBy=Relevance\">Visual Studio Code Marketplace<\/a>.<\/p>\n<ol>\n<li>Launch Visual Studio Code.<\/li>\n<li>Select <strong>View<\/strong> &gt; <strong>Extensions<\/strong> or <strong>Ctrl+Shift+X<\/strong>. You can also open extensions by selecting the <strong>Extensions<\/strong> tab from the Visual Studio Code <a href=\"https:\/\/code.visualstudio.com\/api\/ux-guidelines\/activity-bar\"><strong>Activity Bar<\/strong><\/a>.<span style=\"font-size: 1rem; text-align: var(--bs-body-text-align);\">\n<a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/08\/view-extensions.png\"><img decoding=\"async\" class=\"alignnone wp-image-22645 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/08\/view-extensions-e1725660142809.png\" alt=\"Image view extensions\" width=\"1200\" height=\"882\" \/><\/a><\/span><\/li>\n<li>Enter <strong>Office Add-ins Development Kit<\/strong> in the search box, select it, <span style=\"font-size: 1rem; text-align: var(--bs-body-text-align);\">and then select <\/span><strong style=\"font-size: 1rem; text-align: var(--bs-body-text-align);\">Install<\/strong><span style=\"font-size: 1rem; text-align: var(--bs-body-text-align);\">.\n<a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/08\/office-add-ins-dev-kit-details.png\"><img decoding=\"async\" class=\"alignnone wp-image-22850 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/08\/office-add-ins-dev-kit-details-e1725660169554.png\" alt=\"Image office add ins dev kit details\" width=\"1200\" height=\"738\" \/><\/a>\n<\/span><\/li>\n<li>After successful installation of Office Add-ins Development Kit, the icon appears in the Visual Studio Code <strong>Activity Bar<\/strong>.\n<a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/08\/install-using-extensions-in-visual-studio-code.png\"><img decoding=\"async\" class=\"alignnone wp-image-22640 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/08\/install-using-extensions-in-visual-studio-code-e1725660030904.png\" alt=\"Image install using extensions in visual studio code\" width=\"800\" height=\"851\" \/><\/a><\/li>\n<\/ol>\n<h2>What can I do with the extension?<\/h2>\n<p>The Office Add-ins Development Kit offers two ways to get started with a new project: templates and samples. Templates let you choose the Office application, programming language, and starting feature. Samples are more complete projects that demonstrate a realistic scenario.<\/p>\n<h3>Create an add-in from a template<\/h3>\n<ol start=\"1\">\n<li>Open Visual Studio Code and select the Office Add-ins Development Kit icon in the <strong>Activity Bar<\/strong>.<\/li>\n<li>Select <strong>Create a New Add-in<\/strong>.<\/li>\n<li>In the <a href=\"https:\/\/code.visualstudio.com\/api\/ux-guidelines\/overview#quick-pick\">Quick Pick<\/a>, select the Office app to create your add-in.\n<a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/08\/quick-pick-app.png\"><img decoding=\"async\" class=\"alignnone wp-image-22643 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/08\/quick-pick-app-e1725660066769.png\" alt=\"Image quick pick app\" width=\"900\" height=\"319\" \/><\/a><\/li>\n<li>Select an add-in template from the list of available templates.<\/li>\n<li>Select JavaScript or TypeScript as the programming language.\n<a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/08\/quick-pick-language.png\"><img decoding=\"async\" class=\"alignnone wp-image-22644 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/08\/quick-pick-language-e1725660092143.png\" alt=\"Image quick pick language\" width=\"900\" height=\"188\" \/><\/a><\/li>\n<li>In the <strong>Workspace folder<\/strong> dialog, select the folder where you want to create the project.<\/li>\n<li>Name your project (with no spaces) when prompted. Office Add-ins Development Kit will create the project with basic files and scaffolding. It will then open the project in a second Visual Studio Code window.<\/li>\n<li>Close the original Visual Studio Code window.<\/li>\n<\/ol>\n<h3>Create an add-in from a sample<\/h3>\n<p>Samples show a working add-in that solves an end-to-end scenario. Samples are most useful as learning tools to understand how features of the Office Add-ins framework work together. You can also expand a sample to fit your particular needs.<\/p>\n<ol>\n<li>Open Visual Studio Code and select the Office Add-ins Development Kit icon in the Activity Bar.<\/li>\n<li>Select <strong>View Samples <\/strong>and select the sample you would like to view.<\/li>\n<li>In the Workspace folder dialog that opens, select the folder where you want to create the project.<\/li>\n<li>Office Add-ins Development Kit will create the sample project. It then opens the project in a second Visual Studio Code window. You can freely close the original Visual Studio Code window.<\/li>\n<\/ol>\n<h2>Preview your add-in in Office apps<\/h2>\n<p>To understand how the add-in will work in Office apps, use the Office Add-ins Development Kit to run and debug your Office add-in in your local dev environment.<\/p>\n<h3>Preview Your Office Add-in (F5)<\/h3>\n<p>Select <strong>Preview Your Office Add-in (F5)<\/strong> to launch the add-in and debug the code. In the <a href=\"https:\/\/code.visualstudio.com\/api\/ux-guidelines\/overview#quick-pick\">Quick Pick<\/a>, select the option <strong>Desktop (Edge Chromium)<\/strong>.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/08\/preview-add-in.png\"><img decoding=\"async\" class=\"size-large wp-image-22642 alignnone\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/08\/preview-add-in-1024x816.png\" alt=\"Image preview add in\" width=\"640\" height=\"510\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/08\/preview-add-in-1024x816.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/08\/preview-add-in-300x239.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/08\/preview-add-in-768x612.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/08\/preview-add-in-1536x1224.png 1536w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/08\/preview-add-in.png 1751w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>The extension checks that the prerequisites are met before debugging starts. Check the terminal for detailed information if there are issues with your environment. After this process, the Office desktop application launches and sideloads the add-in.<\/p>\n<p>Once you\u2019re finished testing and debugging the add-in, select <strong>Stop Previewing Your Office Add-in <\/strong>to close the web server and remove the add-in from the registry and cache.<\/p>\n<h3>What&#8217;s next<\/h3>\n<p>Currently, you can create Excel, PowerPoint, and Word add-ins using the Office Add-ins Development Kit. We&#8217;re working hard to enable support for add-ins to other Office applications and platforms.<\/p>\n<ul>\n<li>Try the Office Add-ins Development Kit and <a href=\"https:\/\/forms.office.com\/r\/8SH42ULSDQ\">let us know your feedback<\/a>!<\/li>\n<li>If you have any issues in development, see <a href=\"https:\/\/learn.microsoft.com\/office\/dev\/add-ins\/testing\/troubleshoot-development-errors\">troubleshoot development errors<\/a> or <a href=\"https:\/\/aka.ms\/officedevkitnewissue\">create a GitHub issue<\/a> and we&#8217;ll help you.<\/li>\n<li><span class=\"TrackChangeTextInsertion TrackedChange SCXW55547881 BCX8\"><span class=\"TrackedChange SCXW55547881 BCX8\"><span class=\"TextRun Highlight SCXW55547881 BCX8\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun CommentHighlightRest SCXW55547881 BCX8\">For more information, see <\/span><\/span><\/span><\/span><a class=\"Hyperlink SCXW55547881 BCX8\" href=\"https:\/\/learn.microsoft.com\/office\/dev\/add-ins\/develop\/development-kit-overview?tabs=vscode\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"FieldRange SCXW55547881 BCX8\"><span class=\"TrackChangeTextInsertion TrackedChange SCXW55547881 BCX8\"><span class=\"TextRun Underlined SCXW55547881 BCX8\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun CommentHighlightRest SCXW55547881 BCX8\" data-ccp-charstyle=\"Hyperlink\">Create Office Add-in projects using Office Add-ins Development Kit for Visual Studio Code (preview)<\/span><\/span><\/span><\/span><\/a><span class=\"TrackChangeTextInsertion TrackedChange SCXW55547881 BCX8\"><span class=\"TrackedChange SCXW55547881 BCX8\"><span class=\"TextRun Highlight SCXW55547881 BCX8\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun CommentHighlightRest SCXW55547881 BCX8\">.<\/span><\/span><\/span><\/span><\/li>\n<\/ul>\n<h3>Additional resources<\/h3>\n<ul>\n<li>For more information about Office Add-ins, see our <a href=\"https:\/\/learn.microsoft.com\/office\/dev\/add-ins\/overview\/office-add-ins\">official documentation<\/a>.<\/li>\n<li>If you\u2019re looking to build experiences for Office Add-ins, we strongly recommend <a href=\"https:\/\/learn.microsoft.com\/office\/dev\/add-ins\/overview\/office-add-ins-community-call)\">joining the Microsoft Office Add-ins community call<\/a>.<\/li>\n<li>Learn more about tools available to develop Office Add-ins by visiting the <a style=\"background-color: #f7f7f9; font-size: 1rem; text-align: var(--bs-body-text-align);\" href=\"https:\/\/developer.microsoft.com\/office\">Office Dev Center.<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Office Add-ins Development Kit is a new development tool to help you set up your environment, create Office Add-ins, and debug the code with a streamlined developer experience in Visual Studio Code.<\/p>\n","protected":false},"author":126866,"featured_media":22862,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11],"tags":[28,44],"class_list":["post-22637","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-office-add-ins","tag-office-add-ins","tag-visual-studio-code"],"acf":[],"blog_post_summary":"<p>The Office Add-ins Development Kit is a new development tool to help you set up your environment, create Office Add-ins, and debug the code with a streamlined developer experience in Visual Studio Code.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/22637","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/126866"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=22637"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/22637\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/22862"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=22637"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=22637"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=22637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}