UD5 Toolkit
ES Modules in Browser Demo - Online See Import/Export
ES Modules Browser Demo
Write, edit & run ES module code directly in your browser. See import / export in action.
module editor
Console Output
Ready
// Click Run or press Ctrl+Enter to execute ES module code
// Output from console.log / error / warn will appear here
// Edit module code in the editor panels on the left
Frequently Asked Questions
ES Modules (ECMAScript Modules) are the official standard for modular JavaScript. In browsers, you use
type="module" on a <script> tag to enable module mode. Modules can export functions, objects, or values and import them from other modules using static import statements or dynamic import() expressions. Browsers load modules asynchronously and enforce strict mode by default. Each module has its own scope — variables aren't global unless explicitly attached to window.
Named exports allow you to export multiple values from a module. You import them using curly braces:
Default exports export a single "main" value from a module. You import it without curly braces:
import { foo, bar } from './module.js'. You can have as many named exports as you want.Default exports export a single "main" value from a module. You import it without curly braces:
import foo from './module.js'. Each module can have at most one default export. You can also mix both styles in the same module — a default export plus multiple named exports.
import() is a function-like expression that returns a Promise resolving to the module's namespace object. Unlike static import (which must be at the top level), import() can be called anywhere — inside functions, conditionals, or event handlers. This enables lazy loading and code splitting, loading modules only when needed. Example: const module = await import('./heavy-module.js');. It's perfect for optimizing performance by deferring non-critical code.
ES Modules are supported in all modern browsers: Chrome (61+), Firefox (60+), Safari (11+), Edge (16+). Dynamic
import() is supported in Chrome 63+, Firefox 67+, Safari 11.1+, Edge 79+. Import Maps are supported in Chrome 89+, Edge 89+, Firefox 108+, and Safari 16.4+. For older browsers, bundlers like Webpack, Rollup, or esbuild can compile ES modules down to compatible formats.
1. MIME type error: The server must serve
2. Missing
3. CORS issues: Modules are fetched with CORS; cross-origin files need proper CORS headers.
4. Bare import specifiers:
5. File path errors: Import paths must start with
.js files with Content-Type: application/javascript or text/javascript.2. Missing
type="module": Forgetting to add type="module" to the script tag.3. CORS issues: Modules are fetched with CORS; cross-origin files need proper CORS headers.
4. Bare import specifiers:
import 'lodash' doesn't work in browsers without Import Maps — you need full URLs or relative paths.5. File path errors: Import paths must start with
./, ../, or /.
Import Maps allow you to control how bare import specifiers are resolved in the browser. You define a
<script type="importmap"> block with a JSON object mapping import names to URLs. For example: { "imports": { "lodash": "/node_modules/lodash/lodash.js" } }. This lets you write clean import lodash from 'lodash' without bundlers. This demo tool uses Import Maps internally to resolve module filenames to Blob URLs.