Import maps
A <script type="importmap"> HTML element provides an import map as a JSON string. An import map controls how the browser should resolve module specifiers when importing JavaScript modules. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
A <script type="importmap"> HTML element provides an import map as a JSON string. An import map controls how the browser should resolve module specifiers when importing JavaScript modules. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 89 | 89 | 108 | 16.4 | 89 | 16.4 | |
Syntax
<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.
Authoring checklist
Use one map early in the document and keep the mapping explicit.
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
Powered by web-features