> ## 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. # Edge Fragment Composition with @knitkit/edge > Stream-stitch independent HTML fragments from multiple remotes at the edge using @knitkit/edge, with automatic import-map injection and graceful fallbacks. `@knitkit/edge` assembles a complete page at the edge from independent HTML fragments — each owned by a different team, built with a different framework (or no framework at all). It fetches all fragments in parallel, streams them into the host template in document order, and injects a negotiated import map before `` so any client-side modules hydrate correctly. Because every fragment renders its own HTML, there is no shared React instance to coordinate and no "invalid hook call" risk. The package runs wherever the Web Fetch and Streams APIs are available: Cloudflare Workers, Deno Deploy, Vercel Edge Functions, and Node.js 18+. ## Install ```bash theme={null} npm i @knitkit/edge ``` ## Concepts ### Fragment placeholders You mark insertion points in your host HTML template with `` custom elements: ```html theme={null}

Checkout is temporarily unavailable.

 ``` Use the self-closing form when you have no meaningful fallback: ```html theme={null} ``` Each placeholder's `name` attribute maps to a `Fragment` object in the `fragments` array you pass to `composeStream`. ### The `Fragment` type ```ts theme={null} interface Fragment { /** Matches the `name` of a `` placeholder in the template. */ name: string; /** URL to fetch the fragment's HTML from. */ src: string; /** Optional fetch init (headers, signal, etc.). */ init?: RequestInit; } ``` ## Step-by-step ### Write the host template Create a shell HTML document that owns the page ``, global navigation, and any chrome that is not owned by a remote team. Place `` elements where each team's content belongs. Include meaningful fallback content inside each tag — that content renders whenever the corresponding fragment server is unreachable. ```html theme={null} My Shop
My Shop

Product details are loading…

Reviews are temporarily unavailable.
Powered by knitkit
``` ### Call `composeStream` Import `composeStream` and call it with your template, the array of fragments to fetch, and an optional import map. All fragment fetches are kicked off in parallel immediately; the stream flushes each resolved fragment in document order. ```js theme={null} import { composeStream } from "@knitkit/edge"; const stream = composeStream({ template, fragments: [ { name: "product", src: "https://product.example.com/fragment" }, { name: "reviews", src: "https://reviews.example.com/fragment" }, ], // importMap is injected before automatically. importMap: { imports: { "@shop/analytics": "https://cdn.example.com/analytics.js", }, }, }); ``` If your `template` contains a `` tag, `composeStream` inserts a `