Coding components

The ArcGIS Maps SDK for JavaScript's Coding components package is intended to encompass a wide range of code editors and utilities. Until other components are introduced to this package, the main offering is the Arcade Editor component.

Get started

You can include this package in your application using either the ArcGIS CDN or by installing from npm. Visit the full Get Started guide for working with the ArcGIS CDN, npm, CSS, frameworks and more.

CDN

Include all the necessary library scripts and CSS link tags in the order shown below to the <head> section of your HTML:

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- Load Calcite components and the JavaScript Maps SDK core API-->
<script
  type="module"
  src="https://js.arcgis.com/calcite-components/3.2.1/calcite.esm.js"></script>

<link rel="stylesheet" href="https://js.arcgis.com/4.33/esri/themes/dark/main.css" />
<script src="https://js.arcgis.com/4.33/"></script>

<!-- Load Coding components -->
<script
  type="module"
  src="https://js.arcgis.com/4.33/coding-components/"
></script>

This only needs to be done once in your application. No specific import is needed to use a component.

npm

Run the following command to install the package:

Use dark colors for code blocksCopy
1
2

    npm install @arcgis/coding-components

Afterwards, you'll need to individually import each component you use.

Use dark colors for code blocksCopy
1
import "@arcgis/coding-components/components/arcgis-arcade-editor";

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.