{"id":2679322,"date":"2025-02-26T10:28:21","date_gmt":"2025-02-26T18:28:21","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=2679322"},"modified":"2026-01-14T14:42:25","modified_gmt":"2026-01-14T22:42:25","slug":"javascript-maps-sdk-a-full-transition-to-components","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/javascript-maps-sdk-a-full-transition-to-components","title":{"rendered":"JavaScript Maps SDK: A full transition to components"},"author":4271,"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":[],"industry":[],"product":[36831,36601],"class_list":["post-2679322","blog","type-blog","status-publish","format-standard","hentry","category-developers","product-js-api-arcgis","product-developers"],"acf":{"short_description":"JavaScript Maps SDK now includes web components that enables maximized productivity of front end development. Components will replace widgets.","flexible_content":[{"acf_fc_layout":"content","content":"

Esri is fully committed to building standards-based web components<\/a> that extend the core API of the ArcGIS Maps SDK for JavaScript<\/a> into reusable custom HTML elements, such as <arcgis-map><\/arcgis-map><\/code>. This applies to both internal development of ArcGIS products, as well as the pre-built UI components<\/a> that are offered as part of the JavaScript Maps SDK. In fact, all core widget functionality is already available as components. Today, the recommended approach for building web apps using the SDK is to use components.<\/p>\n

Component benefits<\/strong><\/p>\n

This shift in architecture maximizes productivity of frontend web development. Custom elements provide a familiar (HTML, CSS, JS) programming experience and enable seamless integration with application frameworks. Internally, components are constructed using Calcite Design System’s<\/a> components, so they can be styled using Calcite’s design tokens<\/a> (via CSS). In addition, since we are encapsulating ArcGIS experiences as web components in Esri products, we are able deliver proven workflows as configurable components in the SDK (such as the already released Arcade Editor and Charts components). The SDK\u2019s collection of higher-level components will continue to grow over time.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2679652,"id":2679652,"title":"comp-demo","filename":"comp-demo.gif","filesize":3265697,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/02\/comp-demo.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/javascript-maps-sdk-a-full-transition-to-components\/comp-demo","alt":"","author":"4271","description":"","caption":"The component API reference allows you to play with the configuration of the component and see the corresponding code.","name":"comp-demo","status":"inherit","uploaded_to":2679322,"date":"2025-02-12 01:36:41","modified":"2025-02-12 03:09:16","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1120,"height":794,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/02\/comp-demo-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/02\/comp-demo.gif","medium-width":368,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/02\/comp-demo.gif","medium_large-width":768,"medium_large-height":544,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/02\/comp-demo.gif","large-width":1120,"large-height":794,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/02\/comp-demo.gif","1536x1536-width":1120,"1536x1536-height":794,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/02\/comp-demo.gif","2048x2048-width":1120,"2048x2048-height":794,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/02\/comp-demo-656x465.gif","card_image-width":656,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/02\/comp-demo.gif","wide_image-width":1120,"wide_image-height":794}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

From widgets to map components<\/strong><\/p>\n

When the SDK was first created, web component standards were still maturing, and didn\u2019t have broad browser adoption. At the same time we didn’t commit to a specific JS framework as the JS landscape is a constant moving target. For that reason, we developed the widget architecture and over time created more than 60 widgets for developers to use in their web apps. Now that web component standards are supported across all major browsers, we are able to evolve our technology alongside the browser (like we do for many internals of the SDK).<\/p>\n

Initially, widgets are wrapped as web components, and over time, component internals are being reimplemented with an optimized structure including removal of the legacy widget architecture. To see a list of components that have completed this transition, see the release notes<\/a>. Once we finish reimplementing components, we will add support for slots, which will enable you to integrate custom controls and functionality within the component experience. Check out Calcite Design System if you want to get familiar with how slots will eventually work in the SDK’s components, as most Calcite components contain slots<\/a>.<\/p>\n

SDK website and associated resources in transition<\/strong><\/p>\n

Many resources in the SDK are already component-based. This includes new and updated resources such as the getting started guides, programming patterns\/best practices, tutorials, a collection of samples, integration of the component playground and API reference, and more. However, as the SDK website includes resources that we have been working on for 8 years, a full transition will take multiple releases. While we are in transition, you will see samples and code snippets throughout the website that are not yet reflecting the recommended coding patterns (i.e. aren\u2019t component-based). Every release will bring notable progress.<\/p>\n

Widget & component roadmap<\/strong><\/p>\n

Eventually, all widgets will be deprecated and later removed. Therefore, developers are strongly encouraged to migrate their UI code to use components in place of widgets and MapView\/SceneView. The level of effort required to perform the migration to a component-based UI will greatly vary between applications. In some cases, it will be very quick. In other cases, it can involve a reasonable amount of effort and require planning and prioritization. Many Esri product teams will be undergoing the same migration work. The widget roadmap factors in this required effort, as well as our component development roadmap. We are targeting the following milestones for full transition to components:<\/p>\n