SeamJS extracts HTML skeletons from UI components at build time via renderToString. Any framework that can produce an HTML string from a component tree can generate a SeamJS skeleton. The UI framework runs only in the browser — the server never imports or executes UI code.
| React | Vue | Solid | |
|---|---|---|---|
| Core | @canmi/seam-client |
||
| Bindings | @canmi/seam-react |
— | — |
| Router | @canmi/seam-tanstack-router |
— | — |
| FS Router | @canmi/seam-router |
||
| i18n | @canmi/seam-i18n |
||
| Linter | @canmi/eslint-plugin-seam |
— | — |
| Query | @canmi/seam-query-react |
— | — |
- Svelte bindings
- Solid bindings
- Vue bindings
- HTMX support
- Shell Router — page-level micro-frontend navigation with per-page UI
- Island Mode
- framework switching
At build time, SeamJS renders each page component to static HTML using renderToString. During this process, sentinel values (typed placeholders) in the component tree are detected and converted into slot markers (<!--seam:path-->). The result is a skeleton template: structurally complete HTML with named injection points where server data will be inserted at request time.
The client runtime reads injected data from __data, hydrates the skeleton, and replaces slot markers with live components. The server never imports React, Vue, or any UI library — it only performs string replacement on the skeleton.
Structured Head Metadata: routes can declare head: HeadConfig | HeadFn for per-page <title>, <meta>, and <link> tags. At build time, slot proxies generate head markers; at request time, the server resolves the head config with actual data. During SPA navigation, updateHead() manages document.head tags using data-seam-head markers.
Derived Data: routes can declare derive entries that transform loader data into display-ready values. The ESLint rule no-derived-data-in-skeleton enforces this boundary — computations on seam data belong in derive definitions, not in page.tsx render logic. On the client, useSeamDerive reads server-computed values from the hydrated __derived cache and recomputes from QueryClient data on SPA navigation.
- Sentinel Protocol — build-time placeholder format
- Slot Protocol — server-side HTML injection syntax
- Skeleton Constraints — rules for build-safe components