Widely available Suitable for production when it improves semantics, input, or browser integration.

Import maps

The importmap value of the type attribute of the <script> element indicates that the body of the element contains an import map.

An import map is a JSON object that allows developers to control how the browser resolves module specifiers when importing JavaScript modules. It provides a mapping between the text used as the module specifier in an import statement or import() operator, and the corresponding value that will replace the text when resolving the specifier. The JSON object must conform to the Import map JSON representation format.

An import map is used to resolve module specifiers in static and dynamic imports, and therefore must be declared and processed before any <script> elements that import modules using specifiers declared in the map. Note that the import map applies only to module specifiers in the import statement or import() operator for modules loaded into documents; it does not apply to the path specified in the src attribute of a <script> element or to modules loaded into workers or worklets.

For more information, see the Importing modules using import maps section in the JavaScript modules guide.

Metadata and scripts

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
html.elements.script.type.importmap
89
89
108
16.4
89
16.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

HTML 
<script type="importmap">
{
  "imports": {
    "react": "https://esm.sh/react@18",
    "react-dom": "https://esm.sh/react-dom@18"
  }
}
</script>
<script type="module">
import React from 'react';
</script>

Live demo

Specifier mapping idea

Show how import maps replace bare specifiers with concrete module URLs.

PreviewFullscreen

Import map anatomy

Break an import map into specifiers, URLs, and scope overrides.

PreviewFullscreen

Authoring checklist

Use one map early in the document and keep the mapping explicit.

PreviewFullscreen

Use cases

  • Control document behavior

    Use Import maps to influence loading, metadata, or script behavior at the document level.

  • Tune performance strategy

    Apply Import maps when earlier resource hints or document settings improve startup or runtime behavior.

Cautions

  • Test Import maps in your target browsers and input environments before depending on it as a primary behavior.

Accessibility

  • Make sure Import maps supports the intended task without making the page harder to perceive, understand, or operate.

Related links