This is a parser for React Server Components (RSC) when sent over the network. React uses a format to represent a tree of components/html or metadata such as required imports, suspense boundaries, and css/fonts that needs to be loaded.
I made this tool to more easily let you understand the data and explore it visually.
There is a Chrome Extension that you can add here.
You can also add the parser as a package to your project. You'll get an embedded panel component that you can render in a layout.tsx for example.
First, install @rsc-parser/embedded from npm like: yarn add @rsc-parser/embedded
Then you can load it in a layout.tsx for example.
import { Suspense, lazy } from "react";
const RscDevtoolsPanel = lazy(() =>
import("@rsc-parser/embedded").then(module => ({
default: module.RscDevtoolsPanel,
})),
);
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
{/* Use any condition or flag you want here */ }
{process.env.NODE_ENV === "development" ? (
<Suspense>
<RscDevtoolsPanel />
</Suspense>
) : null}
</body>
</html>
);There is also a website that you can use by manually copy pasting RSC payloads.
- Go to a site that uses the NextJS App router or generally is based on React Server components.
- Open the network tab in your dev tools
- Reload.
- Look for fetch responses the payload roughly looks like json, but each like starts with something like
O:,1:I,b:or similar. - Copy the text and paste it into the form on https://rsc-parser.vercel.app/
- Explore!
Please make an issue on https://github.com/alvarlagerlof/rsc-parser/issues/new and include the text content that the parser was unable to handle.