Import Maps — a JSON config inside HTML that maps bare import specifiers ("react", "lodash") to real URLs. Enables using ES modules in the browser WITHOUT a bundler. All modern browsers support (Chrome 89+, Firefox 108+, Safari 16.4+). Use cases: no-build frontend, HTMX apps, WordPress, dev-only imports.
Below: details, example, related terms, FAQ.
Free online tool — HTTP header checker: instant results, no signup.
<!-- HTML -->
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@18",
"react-dom": "https://esm.sh/react-dom@18",
"lodash/": "https://esm.sh/lodash/"
}
}
</script>
<script type="module">
import React from 'react'; // resolves to esm.sh
import debounce from 'lodash/debounce';
</script>Setting up Import Maps in your project is straightforward. Here’s a step-by-step guide to get you started:
Create an HTML file. This will serve as the entry point for your application.
Within the <head> section of your HTML file, include a <script type="importmap"> tag. This is where you will define your import mappings.
Define your import map using JSON format. Here's an example:
{ "imports": { "react": "https://unpkg.com/react@17/umd/react.production.min.js", "lodash": "https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js" }}Load your JavaScript modules using the specified import mappings. For instance:
import React from 'react';Finally, ensure your script tags that rely on the imports come after the import map:
<script type="module" src="your-module.js"></script>With these steps, you can start using ES modules directly in the browser without needing a bundler.
While Import Maps provide a powerful way to manage dependencies in modern web applications, developers may encounter several common issues:
importmap type.By being aware of these issues, you can troubleshoot and resolve common problems associated with Import Maps effectively.
Import Maps can be utilized in various advanced scenarios to streamline development and enhance performance. Here are some advanced use cases:
lodash from version 4.17.21 to 4.17.22, simply change the URL:{ "imports": { "lodash": "https://cdn.jsdelivr.net/npm/lodash@4.17.22/lodash.min.js" }}if (isDev) { /* modify import map for development */ }import MyComponent from 'my-component';import 'https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js';By leveraging these advanced techniques, developers can maximize the benefits of Import Maps, leading to cleaner code and improved application performance.
For simple projects — yes. For complex apps (tree-shaking, minification, TypeScript) — still needed. Dev-only without a bundler — workable tradeoff.
esm.sh: active, fast, aggressive caching. skypack.dev: deprecated (2024). Use esm.sh or unpkg.com for 2026.
Modules need CORS headers. esm.sh, unpkg, jsdelivr — all OK. Self-hosted ES modules on CDN need proper headers.
Free plan — 10 monitors, checks every 5 min, no card required. Upgrade for 1-minute interval and multi-region monitoring.