See where Server Components end and Client Components begin—directly in the browser, on your real app.
RSC Boundary is a lightweight devtool for React Server Component apps. Add one provider to your root layout and you get outlines, labels, and a panel that map server-rendered regions vs client subtrees—no annotations on every file, no guessing from the file tree alone.
The published packages live under packages/; the demo site and playground live under apps/web. Minimal adapter smoke-tests live under playgrounds/.
- Make the RSC mental model concrete. Server Components have no client fibers; Client Components hydrate. That split is easy to lose when you're deep in JSX—this tool surfaces it on the page you're building.
- Onboard and review faster. Spot accidental client boundaries, nested server islands, and where interactivity actually lives without spelunking through
"use client"directives. - Zero ceremony in production. In production builds the provider is a pass-through: no extra DOM, no runtime cost. Highlights run only in development.
- Orange dashed outlines around client component roots (
"use client"). - Blue dashed outlines around server regions (heuristic detection, plus optional explicit markers when you need precision).
- Labels and a panel with component names and provenance—so you can correlate the UI with your source.
Requirements: Next.js 16+ (App Router), React 19+.
pnpm add @rsc-boundary/next
# or: npm install @rsc-boundary/next
# or: yarn add @rsc-boundary/nextWrap children in your root app/layout.tsx:
import { RscBoundaryProvider } from "@rsc-boundary/next";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<RscBoundaryProvider>{children}</RscBoundaryProvider>
</body>
</html>
);
}Requirements: @tanstack/react-start 1+, React 19+.
pnpm add @rsc-boundary/startWrap children in your root route (app/routes/__root.tsx):
import { RscBoundaryProvider } from "@rsc-boundary/start";See packages/start/README.md for the full integration guide.
The unscoped rsc-boundary package on npm is deprecated — it is no longer published from this monorepo. Next.js (App Router): install @rsc-boundary/next (includes @rsc-boundary/core as a dependency). TanStack Start: install @rsc-boundary/start (same).
pnpm remove rsc-boundary && pnpm add @rsc-boundary/next
# or, for Start:
pnpm remove rsc-boundary && pnpm add @rsc-boundary/start-import { RscBoundaryProvider } from "rsc-boundary";
+import { RscBoundaryProvider } from "@rsc-boundary/next";| Package | Description |
|---|---|
@rsc-boundary/core |
Framework-agnostic: fiber walk, highlighting engine, devtools UI, adapter contract |
@rsc-boundary/next |
Next.js App Router adapter + RscBoundaryProvider |
@rsc-boundary/start |
TanStack Start adapter + RscBoundaryProvider |
For behavior details, optional APIs (RscDevtools, explicit server markers), architecture, and limitations, read the per-package READMEs.
This repo includes coding-agent skills that walk through the integration steps:
- Next.js:
skills/install-next - TanStack Start:
skills/install-start
npx skills add foxted/rsc-boundary --skill install-next
npx skills add foxted/rsc-boundary --skill install-startLayout, local dev, and where to put changes: CONTRIBUTING.md and AGENTS.md.
Versioning and publishing use Changesets. The three publishable packages are versioned together (same version at every release). From the repo root:
pnpm changeset # describe changes
pnpm version-packages # bump versions from changesets
pnpm release # build packages and publish (maintainers)Maintainers: after the scoped packages are on npm, deprecate the legacy unscoped package so installs show a migration hint:
npm deprecate rsc-boundary@"*" "rsc-boundary has moved. Install @rsc-boundary/next (Next.js) or @rsc-boundary/start (TanStack Start) instead - @rsc-boundary/core is pulled in automatically."See LICENSE. Each package includes its own LICENSE file.