https://github.com/foxted/rsc-boundary
Tooling to visualize React Server Components vs Client Components boundaries in Next.js App Router
https://github.com/foxted/rsc-boundary
devtools nextjs react react-server-components rsc
Last synced: 3 days ago
JSON representation
Tooling to visualize React Server Components vs Client Components boundaries in Next.js App Router
- Host: GitHub
- URL: https://github.com/foxted/rsc-boundary
- Owner: foxted
- License: mit
- Created: 2026-04-05T22:49:16.000Z (23 days ago)
- Default Branch: main
- Last Pushed: 2026-04-23T04:22:20.000Z (5 days ago)
- Last Synced: 2026-04-23T06:22:33.659Z (5 days ago)
- Topics: devtools, nextjs, react, react-server-components, rsc
- Language: TypeScript
- Homepage: https://rsc-boundary.vercel.app
- Size: 1.3 MB
- Stars: 44
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# RSC Boundary
**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+**.
```bash
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`:
```tsx
import { RscBoundaryProvider } from "@rsc-boundary/next";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
### TanStack Start
**Requirements:** `@tanstack/react-start` **1+**, React **19+**.
```bash
pnpm add @rsc-boundary/start
```
Wrap `children` in your root route (`app/routes/__root.tsx`):
```tsx
import { RscBoundaryProvider } from "@rsc-boundary/start";
```
See [`packages/start/README.md`](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).
```bash
pnpm remove rsc-boundary && pnpm add @rsc-boundary/next
# or, for Start:
pnpm remove rsc-boundary && pnpm add @rsc-boundary/start
```
```diff
-import { RscBoundaryProvider } from "rsc-boundary";
+import { RscBoundaryProvider } from "@rsc-boundary/next";
```
## Packages
| Package | Description |
| --------------------------------------- | ---------------------------------------------------------------------------------- |
| [`@rsc-boundary/core`](packages/core) | Framework-agnostic: fiber walk, highlighting engine, devtools UI, adapter contract |
| [`@rsc-boundary/next`](packages/next) | Next.js App Router adapter + `RscBoundaryProvider` |
| [`@rsc-boundary/start`](packages/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`](skills/install-next)
- **TanStack Start:** [`skills/install-start`](skills/install-start)
```bash
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`](CONTRIBUTING.md)** and [`AGENTS.md`](AGENTS.md).
## Releases
Versioning and publishing use [Changesets](https://github.com/changesets/changesets). The three publishable packages are versioned together (same version at every release). From the repo root:
```bash
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:
```bash
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](LICENSE). Each package includes its own LICENSE file.