GitHub - foxted/rsc-boundary: Tooling to visualize React Server Components vs Client Components boundaries in Next.js App Router

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

Why use it

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.

What you get (dev mode)

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.

Install

Next.js (App Router)

Requirements: Next.js 16+ (App Router), React 19+.

pnpm add @rsc-boundary/next
# or: npm install @rsc-boundary/next
# or: yarn add @rsc-boundary/next

Wrap 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>
  );
}

TanStack Start

Requirements: @tanstack/react-start 1+, React 19+.

pnpm add @rsc-boundary/start

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

Migrating from `rsc-boundary`

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";

Packages

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.

Agent skill (`install`)

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-start

Contributing

Layout, local dev, and where to put changes: CONTRIBUTING.md and AGENTS.md.

Releases

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

License

See LICENSE. Each package includes its own LICENSE file.