Guide · Open source

How to use SystemJS: load ES modules in browsers and Node.js

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

SystemJS is an open-source JavaScript module loader that lets code written for native ES modules run in browsers that lack support, by using the System.register format. This guide is for front-end developers and teams who need to load modules in the browser or on the server without a build step for every module. After reading it, you will know how to install SystemJS, load modules with a script tag or System.import(), and decide whether it fits your project.

SystemJSsystemjs/systemjs · ★ 13.1k · MIT Install options & downloads

Quick start

1Confirm your target browsers. Decide whether you need support for browsers without native ES modules or need import maps. If you only target modern browsers, consider native modules first.
2Install the package. Run npm install systemjs in your project folder. You need Node.js and npm.
3Add the loader to your HTML. Include system.js with a script tag before your module scripts.
4Mark your modules. Use script elements with type systemjs-module and a src pointing to a System.register module.
5Load on demand. Call System.import() with a module path when you need that code.
6Choose a loader build. Use s.js for the smallest footprint, system.js for extra features, or system-node.cjs for Node.js.

Check whether you need SystemJS

SystemJS is aimed at a few specific situations. It is useful when you must support browsers without native ES module support, including older browsers back to IE11, or when you need import maps, Content Security Policy compatible loading, or a loader for server-side rendering in Node.js.

If your project targets only modern browsers, native ES modules already work. The README says SystemJS does not integrate directly with the native browser loader, so you would not gain much from adding it there. SystemJS is also a loader, not a bundler, so it does not replace a build tool.

Good fit: front-end code that must run in browsers without native module support
Good fit: projects that need import maps or CSP-compatible loading
Not a fit: modern-browser-only projects that already use native modules
Not a fit: loading CommonJS modules in the Node.js loader, which the README says is not currently supported

Install SystemJS with npm

SystemJS is installed as a package. You need Node.js and npm available on your machine. Run the install command from your project folder.

npm install systemjs

Load a System.register module in the browser

Include the SystemJS loader in your HTML with a script element, then mark your module scripts with type systemjs-module. The README shows this pattern for loading a module by path and loading a named module with the import: prefix.

The README notes that modules must be in the System.register module format, which is what a bundling step such as Rollup code splitting can produce. It also notes that anonymous System.register statements are the form to emit when building System modules.

<script src="system.js"></script>
<script type="systemjs-module" src="/js/main.js"></script>
<script type="systemjs-module" src="import:name-of-module"></script>

Load modules on demand with System.import()

To load a module at any time, call System.import() with the module path. The module must be in the System.register format. This is useful when you want to load code only when a feature is used.

System.import('/js/main.js');

Choose the right loader file

The README describes three builds. The s.js loader is the minimal production loader at 2.8KB. The system.js loader is 4.2KB and adds features such as tracing hooks, a registry deletion API, and loading of Wasm, CSS and JSON module types. The system-node.cjs loader is built for Node.js, typically for server-side rendering.

The README lists pluggable extras you can add to the s.js loader, including AMD loading, named register, dynamic import maps, global loading, and module types.

s.js: smallest footprint, loads System.register modules and import maps
system.js: adds hooks, registry deletion, and Wasm, CSS and JSON module types
system-node.cjs: runs System modules in Node.js from disk (file:// URLs) or the network
Extras: AMD loading, named register, dynamic import maps, global loading, module types

Use SystemJS for server-side rendering in Node.js

The Node.js loader can load System modules from disk or the network, with caching that respects the Content-Type header. It supports import maps through the applyImportMap API. The README warns that CommonJS modules are not supported in this loader, so if you need them, use Node.js native module support instead.

Understand performance and alternatives

The README says SystemJS is designed to run roughly around 1.5 times the speed of native ES modules. In its own benchmark on 426 modules, native modules took 1668ms uncached and SystemJS took 2334ms. The README points to ES Module Shims as an option that extends native browser module support, and the project lists RequireJS and Browserify as comparable projects.

What people use it for

Running ES module code in older browsers that lack native module support
Using import maps to map bare module names to paths in the browser
Loading modules with System.import() only when a feature needs them
Rendering System modules on the server in Node.js for server-side rendering workflows
Loading global library scripts from a CDN with the global loading extra

Frequently asked questions

Is SystemJS free to use?

SystemJS is licensed under the MIT licence, as listed on its project page. You can use, modify and distribute it under those terms.

What do I need to install SystemJS?

The install method is npm, so you need Node.js and npm. Run npm install systemjs to add it to your project.

Does SystemJS work with native ES modules?

The README says SystemJS does not integrate directly with the native browser module loader because there is no way to share dependencies between the two module systems. For extending native module support, the README points to ES Module Shims.

Can SystemJS load CommonJS modules in Node.js?

No. The README says loading CommonJS modules is not currently supported in the system-node.cjs loader and likely won't be. Use Node.js native module support instead.

How does SystemJS compare to RequireJS or Browserify?

The project lists RequireJS, Browserify and ES Module Shims as comparable projects. Browserify is a bundler, while SystemJS is a loader, so they solve different parts of the workflow.

Why is SystemJS slower than native modules?

The README says SystemJS is designed to run roughly around 1.5 times the speed of native ES modules. In its benchmark, uncached loading took 2334ms with SystemJS versus 1668ms with native modules.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

SystemJS suits front-end developers who must run ES module code in browsers without native support, need import maps or CSP-compatible loading, or want a server-side loader in Node.js. Teams targeting only modern browsers, or anyone wanting a bundler, should choose native modules or a build tool such as Rollup instead.

Install options & downloads