SystemJS
A JavaScript module loader that runs modern ES module code in older browsers.
- Stars
- 13.1k
- Forks
- 1.1k
- Licence
- MIT
- Language
- JavaScript
- Last update
- 5 months ago
- Type
- Library
What it is
SystemJS is a JavaScript module loader that lets code written for native ES modules run in browsers that lack support, by using the System.register format. It also works in Node.js for server-side rendering, and supports features like import maps, dynamic import, and top-level await. Developers typically use it when they need to load modules in the browser or on the server without a build step for every module.
- Load System.register modules in a page with a script tag and a systemjs-module attribute
- Load modules at runtime with System.import() based on user actions or routing
- Load global scripts from a CDN such as lodash using the global loading extra
- Load CSS, JSON, or Wasm files as modules using the module types extra
Great for
- Front-end developers loading ES modules in browsers that do not support them natively
- Teams who need import maps, CSP-compatible loading, or support for older browsers back to IE11
- Developers building server-side rendering workflows that load System modules in Node.js
Not ideal for
- Projects targeting only modern browsers, where native ES modules already work (the README says SystemJS does not integrate directly with the native browser loader)
- Users who need to load CommonJS modules in the Node.js loader, which the README says is not currently supported
- Developers wanting a simple bundler, since this is a loader rather than a build tool
How to get it
- 1
Install with a package manager
You'll need: Node.js and npm (for installation via npm)
Install via npm
npm install systemjs - 2
Run it
- Install the package with npm install systemjs
- Add the system.js script to your HTML page
- Load a System.register module with a script element of type systemjs-module
- Or call System.import('/js/main.js') from your code to load a module at runtime
- 3
Get the most out of it
- Use the systemjs-examples repository for working examples, as linked in the README
- Use the Rollup code-splitting starter project to see a bundling workflow that emits System.register output
- Add the Babel extension (systemjs-babel) if you need to load TypeScript or ES modules during development
- Use the dynamic import maps and named register extras to extend loader behavior when needed
Downloads
Strengths
- Small footprint: the README lists a 2.8KB minimal loader and a 4.2KB full loader
- Hookable design lets developers customize loading behavior
- Supports a wide range of features including import maps, integrity, and Content Security Policy
Trade-offs
- The README's benchmark shows it is slower than native ES modules (2334ms vs 1668ms uncached in its test)
- Does not share dependencies with the native browser module system, so it cannot be mixed directly with native modules
- Requires modules to be emitted in System.register format, which usually means a build step
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| systemjs (this) | 13.1k | Library | intermediate | 5 months ago | Front-end developers loading ES modules in browsers that do not support them natively |
| browserify | 14.7k | Dev tool | intermediate | 13 days ago | Web developers who already write Node.js-style CommonJS modules |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.