> ## Documentation Index
> Fetch the complete documentation index at: https://knitkit.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<CardGroup cols={2}>
  <Card title="Introduction" icon="book-open" href="/introduction">
    Understand what knitkit is, how it differs from bundler-coupled federation, and which packages to install.
  </Card>

  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Go from zero to a working federated app in under 10 minutes — no bundler plugin required.
  </Card>

  <Card title="Runtime API" icon="code" href="/reference/runtime-api">
    Full reference for `registerRemotes`, `loadRemote`, `negotiateShared`, and the rest of the public API.
  </Card>

  <Card title="Guides" icon="map" href="/guides/browser-host">
    Step-by-step walkthroughs for the browser, Node SSR, edge composition, and React integration.
  </Card>
</CardGroup>

## 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.

```html theme={null}
<!-- 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>
```