RSC Boundary
93GitHub repository

Getting started

RSC Boundary helps you visualize where Client Components begin in a React app that supports Server Components—whether you use Next.js (App Router) or TanStack Start. Server Components don't create client fibers, so the tool approximates server regions by exclusion (and optional explicit markers).

Next.js

Use @rsc-boundary/next in App Router projects.

Prerequisites

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

Install

Add the package from your registry of choice.

pnpm add @rsc-boundary/next

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

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

TanStack Start

Use @rsc-boundary/start with TanStack Start and the file routes root document pattern.

Prerequisites

  • React 19+
  • TanStack Start 1+ with @tanstack/react-start

Install

Add the package from your registry of choice.

pnpm add @rsc-boundary/start

Add the provider

Wrap children in your root route document (typically where you render <html> and <body>). The same RSC devtools pill appears in development.

app/routes/__root.tsx
import type { ReactNode } from "react";
import { createRootRoute, Outlet, Scripts, HeadContent } from "@tanstack/react-router";
import { RscBoundaryProvider } from "@rsc-boundary/start";

export const Route = createRootRoute({
  component: RootComponent,
});

function RootComponent() {
  return (
    <RootDocument>
      <Outlet />
    </RootDocument>
  );
}

function RootDocument({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        <RscBoundaryProvider>{children}</RscBoundaryProvider>
        <Scripts />
      </body>
    </html>
  );
}

Deprecated: rsc-boundary

The unscoped rsc-boundary package on npm is deprecated and is no longer published from this repository. Use @rsc-boundary/next or @rsc-boundary/start (each includes @rsc-boundary/core as a dependency).

First Activation

  1. On the Examples page, blue and orange borders are static illustrations (not live devtools).
  2. In your own project, run your dev server with the provider wired at the root, open any route, and use the RSC pill (bottom-left).
  3. 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.