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 requiered 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.
I am currently developing a Chrome extension (Firefox hopefully soon) extension. Build artifacts are available here.
There is also a website that you can use by manually copy pasing 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.