Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 2,142 Commits
.changeset		.changeset
.github/workflows		.github/workflows
.vscode		.vscode
.yarn		.yarn
examples/embedded-example		examples/embedded-example
packages		packages
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
.yarnrc.yml		.yarnrc.yml
LICENSE		LICENSE
README.md		README.md
apply-version.sh		apply-version.sh
package.json		package.json
renovate.json		renovate.json
turbo.json		turbo.json
yarn.lock		yarn.lock

Repository files navigation

RSC Parser

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.

Comparison

How do I use this?

Extension

There is a Chrome Extension that you can addhere.

npm package

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 alayout.tsx for example.

import{Suspense,lazy}from"react";constRscDevtoolsPanel=lazy(()=>import("@rsc-parser/embedded").then(module=>({default:module.RscDevtoolsPanel,})),);exportdefaultfunctionRootLayout({ children}){return(<htmllang="en"><body>{children}{/* Use any condition or flag you want here */}{process.env.NODE_ENV==="development" ?(<Suspense><RscDevtoolsPanel/></Suspense>) :null}</body></html>);

Website

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 likeO:,1:I,b: or similar.
Copy the text and paste it into the form onhttps://rsc-parser.vercel.app/
Explore!