{"id":1548,"date":"2018-05-07T00:51:50","date_gmt":"2018-05-07T07:51:50","guid":{"rendered":"https:\/\/developer.microsoft.com\/en-us\/office\/blogs\/?p=1548"},"modified":"2021-10-18T11:30:32","modified_gmt":"2021-10-18T18:30:32","slug":"npm-package-for-visio-javascript-apis","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/npm-package-for-visio-javascript-apis\/","title":{"rendered":"NPM package for Visio JavaScript APIs"},"content":{"rendered":"<p>Visio JavaScript APIs extend the capabilities of Visio Online by enabling developers to build rich mashup solutions to meet their organization\u2019s specific needs. The solution needs to reference the Visio JavaScript library from the CDN location at,\u00a0<a href=\"https:\/\/appsforoffice.microsoft.com\/embedded\/1.0\/visio-web-embedded.js\">https:\/\/appsforoffice.microsoft.com\/embedded\/1.0\/visio-web-embedded.js<\/a>.<\/p>\n<p>NPM is a JavaScript package manager and the visio-web-embedded.js is published as part of the\u00a0<a href=\"https:\/\/www.npmjs.com\/package\/@microsoft\/office-js\">Office NPM package<\/a>, as a copy of what gets published to the official CDN above.<\/p>\n<h2>Installing<\/h2>\n<p>1. Get\u00a0<a href=\"https:\/\/www.npmjs.com\/get-npm\">NPM<\/a>.\n2. Create a new folder on your machine for your package and navigate to that folder using command line interface.\n3. Run the following commands for installing the Office NPM package containing the Visio JS.<\/p>\n<pre><code>npm init\nnpm install @microsoft\/office-js<\/code><\/pre>\n<p>Once installed, the script reference can be used as\n&lt;script src=&#8221;node_modules\\@microsoft\\office-js\\embedded\\visio-web-embedded.js&#8221;&gt;&lt;\/script&gt;<\/p>\n<h2>IntelliSense<\/h2>\n<p>IntelliSense definitions can be acquired either by\n\u2022 Running\u00a0npm install @types\/office-js\u00a0using command line interface or\n\u2022 Referring the index file as\u00a0\/\/\/&lt;reference path=&#8221;node_modules\\@microsoft\\office-js\\dist\\office.d.ts&#8221; \/&gt;\n<a href=\"https:\/\/msdnshared.blob.core.windows.net\/media\/2018\/05\/intellisense.png\"><img decoding=\"async\" class=\"alignleft wp-image-3195\" src=\"https:\/\/msdnshared.blob.core.windows.net\/media\/2018\/05\/intellisense-1024x531.png\" alt=\"\" width=\"503\" height=\"261\" \/><\/a><\/p>\n<h2><\/h2>\n<h2><\/h2>\n<h2><\/h2>\n<h2><\/h2>\n<h2><\/h2>\n<h2>More Info<\/h2>\n<p>For more information on Visio JavaScript APIs and mashup solutions, see:\n\u2022\u00a0<a href=\"https:\/\/dev.office.com\/reference\/add-ins\/visio\/visio-javascript-reference-overview\">Visio JavaScript APIs Overview<\/a>\n\u2022\u00a0<a href=\"https:\/\/blogs.msdn.microsoft.com\/visio\/2017\/09\/25\/migrate-from-visio-web-access-to-visio-online\/\">Migration from Visio Web Access to Visio Online<\/a><\/p>\n<p>We\u2019re constantly looking for ways to improve Visio Online APIs and invite you to send us your ideas through our\u00a0<a href=\"https:\/\/visio.uservoice.com\/\">UserVoice\u00a0<\/a>site. For questions about Visio Online APIs and other features, please email us at\u00a0<a href=\"mailto:tellvisio@microsoft.com\">tellvisio@microsoft.com<\/a>. You can also follow on\u00a0<a href=\"https:\/\/twitter.com\/msvisio\">Twitter<\/a>,\u00a0<a href=\"https:\/\/www.linkedin.com\/groups\/63136\">LinkedIn<\/a>,\u00a0<a href=\"https:\/\/www.facebook.com\/MicrosoftVisio\">Facebook\u00a0<\/a>and\u00a0<a href=\"https:\/\/www.youtube.com\/user\/msftvisio\">YouTube\u00a0<\/a>for the latest around Visio.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Visio JavaScript APIs extend the capabilities of Visio Online by enabling developers to build rich mashup solutions to meet their organization\u2019s specific needs. The solution needs to reference the Visio JavaScript library from the CDN location. This blog discusses how to install NPM and acquire IntelliSense definitions.<\/p>\n","protected":false},"author":69200,"featured_media":25159,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[77],"class_list":["post-1548","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-365-developer","tag-visio"],"acf":[],"blog_post_summary":"<p>Visio JavaScript APIs extend the capabilities of Visio Online by enabling developers to build rich mashup solutions to meet their organization\u2019s specific needs. The solution needs to reference the Visio JavaScript library from the CDN location. This blog discusses how to install NPM and acquire IntelliSense definitions.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/1548","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\/69200"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=1548"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/1548\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/25159"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=1548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=1548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=1548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}