Getting started

RSC Boundary helps you visualize where Client Components begin in a Next.js App Router app. Server Components don't create client fibers, so the tool approximates server regions by exclusion.

Prerequisites

Next.js 16+ with the App Router
React 19+

Install

Add the package from npm (or your registry of choice).

pnpm add rsc-boundary

pnpm add rsc-boundary

Add the provider

Wrap childrenin your root layout. In development you'll see a small RSC pill in the corner; click it to toggle highlights and open the component list.

app/layout.tsx

import { RscBoundaryProvider } from "rsc-boundary";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <RscBoundaryProvider>{children}</RscBoundaryProvider>
      </body>
    </html>
  );
}

import { RscBoundaryProvider } from "rsc-boundary";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <RscBoundaryProvider>{children}</RscBoundaryProvider>
      </body>
    </html>
  );
}

First activation

On the Examples page, blue and orange borders are static illustrations (not live devtools).
In your own project, run next dev with the provider in your root layout, open any route, and use the RSC pill (bottom-left).
Orange dashed outlines mark client subtrees; blue marks server regions (explicit labels from markers, or ~ heuristics). Click the number in the pill to open the panel.