Next.js App Router · React 19

See where server meets client

Wrap your root layout once. In development, toggle boundary highlights to inspect client component islands and server-rendered regions—no annotations required.

Read the docs View examples

Server (~): app/page.tsx

Zero config boundaries

Add a single provider to your root layout. Client subtrees get orange outlines; server regions show in blue when you toggle the devtools pill.

Dev-only by default

In production, the provider renders only children—no devtools bundle. The docs Examples page uses static outlined previews so you can see the color language on a live site.

Fiber-based detection

Walks the client React tree via DOM fiber pointers, filters framework noise, and keeps highlights in sync with a MutationObserver.

Quick start

Add the provider around your app body. That's the entire integration.

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