knitkit — Runtime-First Module Federation on Native ESM

knitkit is runtime-first module federation on native ES modules and import maps. No bundler plugin. < 5 KB. Works in the browser, Node SSR, and the edge.

Welcome to knitkit — a tiny (< 5 KB), zero-dependency, runtime-first module federation system built entirely on native ES modules and import maps. Instead of wiring up a bundler plugin, you declare a manifest, run a small CLI, and load remote modules from any host with two function calls. The same manifest drives the browser, Node SSR, and the edge without any configuration changes.

Introduction

Understand what knitkit is, how it differs from bundler-coupled federation, and which packages to install.

Quickstart

Go from zero to a working federated app in under 10 minutes — no bundler plugin required.

Runtime API

Full reference for registerRemotes, loadRemote, negotiateShared, and the rest of the public API.

Guides

Step-by-step walkthroughs for the browser, Node SSR, edge composition, and React integration.

Why knitkit?

• No bundler plugin. knitkit is a runtime, a manifest, and a small CLI. You never touch webpack.config.js, vite.config.ts, or any bundler-specific federation plugin.
• Singletons by construction. One import map entry per shared package means one URL, which means one module instance in the browser cache — shared by the host and every remote automatically. The “more than one copy of React” bug class is gone by design, not by configuration.
• Tiny and zero-dependency. The federation overhead is ~3.5 KB brotli — measured roughly 7–8× smaller than Module Federation. There are no runtime dependencies to audit, update, or break.
• Truly universal. Browser, Node SSR via module.register loader hooks, and edge fragment composition all run from the same knit.manifest.json. No environment-specific forks.

Core usage in 10 lines

Add an import map, call registerRemotes, and then call loadRemote anywhere in your app. That’s the entire contract.

<!-- Inject the import map before the first module import. Zero bundler plugins. -->
<script type="importmap">
  { "imports": { "@knitkit/runtime": "/runtime/index.js", "react": "https://esm.sh/react@18.3.1" } }
</script>
<script type="module">
  import { registerRemotes, loadRemote } from "@knitkit/runtime";

  await registerRemotes([{ name: "checkout", manifest: "/federation/knit.manifest.json" }]);

  const mount = await loadRemote("checkout/CartWidget"); // resolved via the negotiated import map
  mount(document.getElementById("slot"));                // a Vue widget, mounted inside a React host
</script>