ES Module Patterns - Interactive Lab | IconVault
Dynamic import() and top-level await executed for real, plus a circular dependency simulator showing real ESM evaluation order and TDZ errors.
ES Module Patterns
Dynamic import, top-level await and circular deps
Static import is hoisted and unconditional. import() is a real function call that returns a promise for the module namespace, so you can load code only when the user needs it. This demo builds a module from a Blob URL and imports it for real.
The imported module namespace appears here…
// Static imports must be at the top and always load.
// Dynamic import() loads a module on demand, conditionally, lazily.
const url = URL.createObjectURL(
new Blob([`export const answer = 42;`], { type: "text/javascript" })
);
const mod = await import(url); // real module namespace object
mod.answer; // 42When to reach for import()
Route-level code splitting, heavy libraries behind a user gesture (charts, editors, PDF renderers), and feature-flagged modules. Bundlers turn each import() into a separate chunk automatically.
5 of 5 free runs left. Runs fully in your browser.
About this tool
IconVault's ES Module Patterns lab teaches the three module patterns every JavaScript developer trips over. Dynamic import() builds a real module from a Blob URL and imports it live so you can inspect the module namespace. Top-level await runs a real module that pauses its own evaluation for 1.2 seconds while a progress bar shows the importer waiting. It is free and runs fully in your browser, with copyable code throughout.
The circular dependencies tab is the centerpiece: draw an import graph between three editable modules, pick an entry point, and evaluate. A faithful simulator runs the real ESM linking and evaluation phases, depth-first post-order traversal, hoisted function declarations, live bindings, and genuine temporal dead zone errors when a module reads an imported const too early. Edit the bodies to fix the cycle and watch the trace go green.
Frequently asked questions
Popular searches
More tools
Algorithm Visualizer
Watch sorting and searching animate step by step
Alt Text Helper
Write better image alt text with live feedback
ARIA Reference
Searchable ARIA roles and attributes guide
Array Visualizer
Step through map, filter, reduce like a debugger
Coming soon
CLI
Coming soon
Figma plugin
Coming soon
VS Code extension
Coming soon
Chrome extension
Coming soon
AI icon generator
Coming soon
Team workspaces
Coming soon