{"id":1636412,"date":"2022-07-05T06:00:56","date_gmt":"2022-07-05T13:00:56","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1636412"},"modified":"2024-04-12T03:38:48","modified_gmt":"2024-04-12T10:38:48","slug":"using-svelte-with-the-arcgis-api-for-javascript","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript","title":{"rendered":"Using Svelte with the ArcGIS API for JavaScript"},"author":311402,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[738191],"tags":[96582,24921,27491,765972],"industry":[],"product":[761642,36831],"class_list":["post-1636412","blog","type-blog","status-publish","format-standard","hentry","category-developers","tag-arcgis-api-for-javascript","tag-javascript","tag-jsapi4","tag-svelte","product-platform","product-js-api-arcgis"],"acf":{"authors":[{"ID":311402,"user_firstname":"Gavin","user_lastname":"Rehkemper","nickname":"Gavin Rehkemper","user_nicename":"grehkemper","display_name":"Gavin Rehkemper","user_email":"GRehkemper@esri.com","user_url":"https:\/\/gavinr.com","user_registered":"2022-05-26 19:13:42","user_description":"Gavin is a developer team lead at Esri Professional Services.","user_avatar":"<img alt='' src='https:\/\/secure.gravatar.com\/avatar\/357f69363f781955ae002c3b7f263528c658878575a730cf7344f51e30640f42?s=96&#038;d=blank&#038;r=g' srcset='https:\/\/secure.gravatar.com\/avatar\/357f69363f781955ae002c3b7f263528c658878575a730cf7344f51e30640f42?s=192&#038;d=blank&#038;r=g 2x' class='avatar avatar-96 photo' height='96' width='96' loading='lazy' decoding='async'\/>"}],"short_description":"Learn about the Svelte JavaScript framework and how to integrate it into the ArcGIS API for JavaScript","flexible_content":[{"acf_fc_layout":"content","content":"<p>The ArcGIS API for JavaScript is a powerful library that you can use to build applications that leverage the power of the ArcGIS Platform. While you can use the ArcGIS API for JavaScript on its own to build compelling web mapping applications, some developers choose to integrate it with other JavaScript libraries and frameworks.<\/p>\n<p><a href=\"https:\/\/svelte.dev\/\">Svelte<\/a> is a popular open source JavaScript library that is used to build user interfaces. Svelte makes it easy to reactively bind (connect) variables and properties between your JavaScript code and the UI. Behind the scenes, Svelte uses a compile step to convert the Svelte JavaScript code into highly optimized vanilla JavaScript code for your application, which yields great UI performance.<\/p>\n<p>As a developer, Svelte is enjoyable to use. The reactivity, stores, and other features of Svelte allow you to quickly and elegantly build simple or advanced web apps. In the past few years Svelte has been ranked very highly for developer satisfaction in the <a href=\"https:\/\/survey.stackoverflow.co\/2022\/#section-most-loved-dreaded-and-wanted-web-frameworks-and-technologies\">Stack Overflow<\/a> and <a href=\"https:\/\/2021.stateofjs.com\/en-US\/libraries\/front-end-frameworks\/#front_end_frameworks_experience_ranking\">State of JS<\/a> surveys.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1651102,"id":1651102,"title":"loved-vs-dreaded","filename":"loved-vs-dreaded.png","filesize":15102,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/loved-vs-dreaded.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript\/loved-vs-dreaded","alt":"","author":"311402","description":"","caption":"","name":"loved-vs-dreaded","status":"inherit","uploaded_to":1636412,"date":"2022-07-01 18:47:56","modified":"2022-07-01 18:47:56","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1238,"height":441,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/loved-vs-dreaded-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/loved-vs-dreaded.png","medium-width":464,"medium-height":165,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/loved-vs-dreaded.png","medium_large-width":768,"medium_large-height":274,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/loved-vs-dreaded.png","large-width":1238,"large-height":441,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/loved-vs-dreaded.png","1536x1536-width":1238,"1536x1536-height":441,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/loved-vs-dreaded.png","2048x2048-width":1238,"2048x2048-height":441,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/loved-vs-dreaded-826x294.png","card_image-width":826,"card_image-height":294,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/loved-vs-dreaded.png","wide_image-width":1238,"wide_image-height":441}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/survey.stackoverflow.co\/2022\/#section-most-loved-dreaded-and-wanted-web-frameworks-and-technologies"},{"acf_fc_layout":"content","content":"<p>This blog post is a brief overview on how you can get started using Svelte with the ArcGIS API for JavaScript.<\/p>\n<h2>Getting Started<\/h2>\n<p>You can view the source code for the application we&#8217;re building <a href=\"https:\/\/github.com\/gavinr\/esri-svelte-example\">on GitHub<\/a>.<\/p>\n<p>First, we&#8217;ll set up a Svelte application. We&#8217;ll use <a href=\"https:\/\/vitejs.dev\/\">Vite<\/a>, a popular JavaScript bundler, to get going quickly. Ensure you&#8217;ve installed the latest LTS version of <a href=\"https:\/\/nodejs.org\/en\/download\/\">Node.js<\/a>, then use NPM (which comes with Node.js) to create a project. In the terminal (command line), browse to an empty folder and run:<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\">npm init vite@latest<\/code><\/pre>\n<p>This process will ask you a few questions:<\/p>\n<ul>\n<li><strong>Do you want to install the vite package?<\/strong> Yes.<\/li>\n<li><strong>Project name<\/strong>: use any name you&#8217;d like<\/li>\n<li><strong>Select a framework<\/strong>: choose \u201csvelte\u201d<\/li>\n<li><strong>Select a variant<\/strong>: choose \u201csvelte\u201d<\/li>\n<\/ul>\n<p>Then, in your terminal, browse to the new folder (named after the project name you choose). Then run:<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\">npm install\r\nnpm run dev<\/code><\/pre>\n<p>This will run a local web server. You can navigate your browser to the URL provided in your terminal (probably http:\/\/localhost:3000). Open the folder in your code editor of choice. You can view the code that was generated by the template. Open the <code>src\/App.svelte<\/code> file and make a change to some of the text. The browser automatically refreshes, and you can see the change reflected on the page.<\/p>\n<h2>Adding a map<\/h2>\n<p>Now that the Svelte app is running, we&#8217;ll add a map to the web application. In the terminal, stop the development web server temporarily (Ctrl+c). Then install the <a href=\"https:\/\/www.npmjs.com\/package\/@arcgis\/core\">ArcGIS API for JavaScript<\/a>:<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\">npm install @arcgis\/core --save-dev<\/code><\/pre>\n<p>Then start the web server again (<code>npm run dev<\/code>).<\/p>\n<p>In <code>App.svelte<\/code>, remove all the JavaScript code, HTML markup, and style rules.<br \/>\nThen in the <code>&lt;script&gt;<\/code> tag section, import the MapView module from the ArcGIS API for JavaScript and import the necessary CSS.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #000080; font-weight: normal;\">&lt;<span style=\"color: #000080; font-weight: normal;\">script<\/span>&gt;<\/span>\r\n  <span style=\"color: #998; font-style: italic;\">\/\/ ADD these 2 lines:<\/span>\r\n  <span style=\"color: #333; font-weight: bold;\">import<\/span> MapView <span style=\"color: #333; font-weight: bold;\">from<\/span> <span style=\"color: #d14;\">\"@arcgis\/core\/views\/MapView\"<\/span>;\r\n  <span style=\"color: #333; font-weight: bold;\">import<\/span> <span style=\"color: #d14;\">\"@arcgis\/core\/assets\/esri\/themes\/light\/main.css\"<\/span>;\r\n<span style=\"color: #000080; font-weight: normal;\">&lt;\/<span style=\"color: #000080; font-weight: normal;\">script<\/span>&gt;<\/span>\r\n\r\n<span style=\"color: #000080; font-weight: normal;\">&lt;<span style=\"color: #000080; font-weight: normal;\">main<\/span>&gt;<\/span><span style=\"color: #000080; font-weight: normal;\">&lt;\/<span style=\"color: #000080; font-weight: normal;\">main<\/span>&gt;<\/span>\r\n\r\n<span style=\"color: #000080; font-weight: normal;\">&lt;<span style=\"color: #000080; font-weight: normal;\">style<\/span>&gt;<\/span><span style=\"color: #000080; font-weight: normal;\">&lt;\/<span style=\"color: #000080; font-weight: normal;\">style<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<p>Then add a single <code>&lt;div&gt;<\/code>, into which the map will be placed. Within that <code>&lt;div&gt;<\/code> tag, add a <a href=\"https:\/\/svelte.dev\/tutorial\/actions\">Svelte use directive<\/a> that will call a function when the DOM node is ready:<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #000080; font-weight: normal;\">&lt;<span style=\"color: #000080; font-weight: normal;\">main<\/span>&gt;<\/span>\r\n  <span style=\"color: #998; font-style: italic;\">&lt;!-- ADD this line: --&gt;<\/span>\r\n  <span style=\"color: #000080; font-weight: normal;\">&lt;<span style=\"color: #000080; font-weight: normal;\">div<\/span> <span style=\"color: #008080;\">class<\/span>=<span style=\"color: #d14;\">\"view\"<\/span> <span style=\"color: #008080;\">use:createMap<\/span>&gt;<\/span><span style=\"color: #000080; font-weight: normal;\">&lt;\/<span style=\"color: #000080; font-weight: normal;\">div<\/span>&gt;<\/span>\r\n<span style=\"color: #000080; font-weight: normal;\">&lt;\/<span style=\"color: #000080; font-weight: normal;\">main<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<p>Then create a function with that name (<code>createMap<\/code> in this case) in the JavaScript section of the code that will create the map with the DOM Node that Svelte provides:<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #000080; font-weight: normal;\">&lt;<span style=\"color: #000080; font-weight: normal;\">script<\/span>&gt;<\/span>\r\n  <span style=\"color: #333; font-weight: bold;\">import<\/span> MapView <span style=\"color: #333; font-weight: bold;\">from<\/span> <span style=\"color: #d14;\">\"@arcgis\/core\/views\/MapView\"<\/span>;\r\n  <span style=\"color: #333; font-weight: bold;\">import<\/span> <span style=\"color: #d14;\">\"@arcgis\/core\/assets\/esri\/themes\/light\/main.css\"<\/span>;\r\n\r\n  <span style=\"color: #998; font-style: italic;\">\/\/ ADD this function:<\/span>\r\n  <span style=\"color: #333; font-weight: bold;\">const<\/span> createMap = (domNode) =&gt; {\r\n    <span style=\"color: #333; font-weight: bold;\">const<\/span> view = <span style=\"color: #333; font-weight: bold;\">new<\/span> MapView({\r\n      container: domNode,\r\n      map: {\r\n        basemap: <span style=\"color: #d14;\">\"streets-vector\"<\/span>,\r\n      },\r\n      zoom: <span style=\"color: #008080;\">15<\/span>,\r\n      center: [-<span style=\"color: #008080;\">90.1928<\/span>, <span style=\"color: #008080;\">38.6226<\/span>], <span style=\"color: #998; font-style: italic;\">\/\/ longitude, latitude<\/span>\r\n    });\r\n  };\r\n<span style=\"color: #000080; font-weight: normal;\">&lt;\/<span style=\"color: #000080; font-weight: normal;\">script<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<p>Finally, add some styles to define the size of the map:<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #000080; font-weight: normal;\">&lt;<span style=\"color: #000080; font-weight: normal;\">style<\/span>&gt;<\/span>\r\n  <span style=\"color: #998; font-style: italic;\">\/* ADD this section: *\/<\/span>\r\n  .view {\r\n    <span style=\"color: #008080;\">height<\/span>: <span style=\"color: #008080;\">400px<\/span>;\r\n    <span style=\"color: #008080;\">width<\/span>: <span style=\"color: #008080;\">800px<\/span>;\r\n  }\r\n<span style=\"color: #000080; font-weight: normal;\">&lt;\/<span style=\"color: #000080; font-weight: normal;\">style<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<p>We now have an interactive map using the ArcGIS API for JavaScript!<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1636492,"id":1636492,"title":"map-browser-1","filename":"map-browser-1.png","filesize":111212,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/map-browser-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript\/map-browser-1","alt":"","author":"311402","description":"","caption":"","name":"map-browser-1","status":"inherit","uploaded_to":1636412,"date":"2022-06-24 20:44:37","modified":"2022-06-24 20:44:37","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":814,"height":447,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/map-browser-1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/map-browser-1.png","medium-width":464,"medium-height":255,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/map-browser-1.png","medium_large-width":768,"medium_large-height":422,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/map-browser-1.png","large-width":814,"large-height":447,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/map-browser-1.png","1536x1536-width":814,"1536x1536-height":447,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/map-browser-1.png","2048x2048-width":814,"2048x2048-height":447,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/map-browser-1.png","card_image-width":814,"card_image-height":447,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/map-browser-1.png","wide_image-width":814,"wide_image-height":447}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>Using Svelte reactivity<\/h2>\n<p>Outside of the map, our application will contain some text in the page that shows the current latitude and longitude for the center of the map. The text should update as the map changes. To keep that text updated, we will use Svelte binding.<\/p>\n<p>First, create a local JavaScript variable to hold the text we want to display:<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #000080; font-weight: normal;\">&lt;<span style=\"color: #000080; font-weight: normal;\">script<\/span>&gt;<\/span>\r\n  <span style=\"color: #333; font-weight: bold;\">import<\/span> MapView <span style=\"color: #333; font-weight: bold;\">from<\/span> <span style=\"color: #d14;\">\"@arcgis\/core\/views\/MapView\"<\/span>;\r\n  <span style=\"color: #333; font-weight: bold;\">import<\/span> <span style=\"color: #d14;\">\"@arcgis\/core\/assets\/esri\/themes\/light\/main.css\"<\/span>;\r\n  \r\n  <span style=\"color: #998; font-style: italic;\">\/\/ ADD this line:<\/span>\r\n  <span style=\"color: #333; font-weight: bold;\">let<\/span> centerText;\r\n<\/code><\/pre>\n<p>Then in the <code>createMap<\/code> function, add some code to watch the <code>center<\/code> property of the map and update that variable when it changes:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1636582,"id":1636582,"title":"text","filename":"text.png","filesize":6460,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/text.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript\/text-3","alt":"","author":"311402","description":"","caption":"","name":"text-3","status":"inherit","uploaded_to":1636412,"date":"2022-06-24 20:57:34","modified":"2022-06-24 20:57:34","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":721,"height":98,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/text-213x98.png","thumbnail-width":213,"thumbnail-height":98,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/text.png","medium-width":464,"medium-height":63,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/text.png","medium_large-width":721,"medium_large-height":98,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/text.png","large-width":721,"large-height":98,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/text.png","1536x1536-width":721,"1536x1536-height":98,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/text.png","2048x2048-width":721,"2048x2048-height":98,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/text.png","card_image-width":721,"card_image-height":98,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/text.png","wide_image-width":721,"wide_image-height":98}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/gist.githubusercontent.com\/gavinr\/c934c9c66f584ee4dd1e312645201857\/raw\/8b95fc9a39adfcff97768d28dd95387bea5c0b2f\/example.js"},{"acf_fc_layout":"content","content":"<p>Finally, use a <a href=\"https:\/\/svelte.dev\/tutorial\/if-blocks\">Svelte if block<\/a> and the <a href=\"https:\/\/svelte.dev\/tutorial\/adding-data\">basic Svelte display markup<\/a> (variable within curly brackets) to display that variable:<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #000080; font-weight: normal;\">&lt;<span style=\"color: #000080; font-weight: normal;\">main<\/span>&gt;<\/span>\r\n  <span style=\"color: #000080; font-weight: normal;\">&lt;<span style=\"color: #000080; font-weight: normal;\">div<\/span> <span style=\"color: #008080;\">class<\/span>=<span style=\"color: #d14;\">\"view\"<\/span> <span style=\"color: #008080;\">use:createMap<\/span>&gt;<\/span><span style=\"color: #000080; font-weight: normal;\">&lt;\/<span style=\"color: #000080; font-weight: normal;\">div<\/span>&gt;<\/span>\r\n\r\n  <span style=\"color: #998; font-style: italic;\">&lt;!-- ADD these 3 lines: --&gt;<\/span>\r\n  {#if centerText}\r\n    <span style=\"color: #000080; font-weight: normal;\">&lt;<span style=\"color: #000080; font-weight: normal;\">p<\/span>&gt;<\/span>{centerText}<span style=\"color: #000080; font-weight: normal;\">&lt;\/<span style=\"color: #000080; font-weight: normal;\">p<\/span>&gt;<\/span>\r\n  {\/if}\r\n<span style=\"color: #000080; font-weight: normal;\">&lt;\/<span style=\"color: #000080; font-weight: normal;\">main<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<h2>Summary<\/h2>\n<p>In this post, we&#8217;ve built a basic interactive map that uses Svelte reactivity to dynamically display the center latitude\/longitude of the map. That reactivity is one of the core features of Svelte. Svelte includes even more functionality, like Stores, component events, motion helpers, and transition helpers. You can learn more about these features in the <a href=\"https:\/\/svelte.dev\/tutorial\/\">Svelte tutorial<\/a>. Using these powerful features in Svelte makes web app development even more fun and efficient. Try Svelte out today!<\/p>\n"}],"related_articles":"","card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/07\/card-826.jpg","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/07\/full-1920.jpg"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Using Svelte with the ArcGIS API for JavaScript<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Svelte with the ArcGIS API for JavaScript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T10:38:48+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript\"},\"author\":{\"name\":\"Gavin Rehkemper\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/7b431d93f60b0eb9377981b0a83759e7\"},\"headline\":\"Using Svelte with the ArcGIS API for JavaScript\",\"datePublished\":\"2022-07-05T13:00:56+00:00\",\"dateModified\":\"2024-04-12T10:38:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript\"},\"wordCount\":8,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"ArcGIS API for JavaScript\",\"JavaScript\",\"jsapi4\",\"Svelte\"],\"articleSection\":[\"Developers\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript\",\"name\":\"Using Svelte with the ArcGIS API for JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2022-07-05T13:00:56+00:00\",\"dateModified\":\"2024-04-12T10:38:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Svelte with the ArcGIS API for JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/7b431d93f60b0eb9377981b0a83759e7\",\"name\":\"Gavin Rehkemper\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/357f69363f781955ae002c3b7f263528c658878575a730cf7344f51e30640f42?s=96&d=blank&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/357f69363f781955ae002c3b7f263528c658878575a730cf7344f51e30640f42?s=96&d=blank&r=g\",\"caption\":\"Gavin Rehkemper\"},\"description\":\"Gavin is a developer team lead at Esri Professional Services.\",\"sameAs\":[\"https:\/\/gavinr.com\",\"https:\/\/x.com\/gavinrehkemper\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/grehkemper\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Using Svelte with the ArcGIS API for JavaScript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript","og_locale":"en_US","og_type":"article","og_title":"Using Svelte with the ArcGIS API for JavaScript","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2024-04-12T10:38:48+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript"},"author":{"name":"Gavin Rehkemper","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/7b431d93f60b0eb9377981b0a83759e7"},"headline":"Using Svelte with the ArcGIS API for JavaScript","datePublished":"2022-07-05T13:00:56+00:00","dateModified":"2024-04-12T10:38:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript"},"wordCount":8,"commentCount":1,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["ArcGIS API for JavaScript","JavaScript","jsapi4","Svelte"],"articleSection":["Developers"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript","name":"Using Svelte with the ArcGIS API for JavaScript","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2022-07-05T13:00:56+00:00","dateModified":"2024-04-12T10:38:48+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/using-svelte-with-the-arcgis-api-for-javascript#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Using Svelte with the ArcGIS API for JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/7b431d93f60b0eb9377981b0a83759e7","name":"Gavin Rehkemper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/357f69363f781955ae002c3b7f263528c658878575a730cf7344f51e30640f42?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/357f69363f781955ae002c3b7f263528c658878575a730cf7344f51e30640f42?s=96&d=blank&r=g","caption":"Gavin Rehkemper"},"description":"Gavin is a developer team lead at Esri Professional Services.","sameAs":["https:\/\/gavinr.com","https:\/\/x.com\/gavinrehkemper"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/grehkemper"}]}},"text_date":"July 5, 2022","author_name":"Gavin Rehkemper","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/grehkemper","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/07\/full-1920.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":96582,"name":"ArcGIS API for JavaScript","slug":"arcgis-api-for-javascript","term_group":0,"term_taxonomy_id":96582,"taxonomy":"post_tag","description":"","parent":0,"count":58,"filter":"raw"},{"term_id":24921,"name":"JavaScript","slug":"javascript","term_group":0,"term_taxonomy_id":24921,"taxonomy":"post_tag","description":"","parent":0,"count":151,"filter":"raw"},{"term_id":27491,"name":"jsapi4","slug":"jsapi4","term_group":0,"term_taxonomy_id":27491,"taxonomy":"post_tag","description":"","parent":0,"count":111,"filter":"raw"},{"term_id":765972,"name":"Svelte","slug":"svelte","term_group":0,"term_taxonomy_id":765972,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"}],"category_data":[{"term_id":738191,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":738191,"taxonomy":"category","description":"","parent":0,"count":422,"filter":"raw"}],"product_data":[{"term_id":761642,"name":"ArcGIS Location Platform","slug":"platform","term_group":0,"term_taxonomy_id":761642,"taxonomy":"product","description":"","parent":36601,"count":213,"filter":"raw"},{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":362,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1636412","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/311402"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=1636412"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1636412\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=1636412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=1636412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=1636412"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=1636412"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=1636412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}