{"id":13998442,"url":"https://github.com/alvarlagerlof/rsc-parser","last_synced_at":"2025-05-15T15:06:36.265Z","repository":{"id":163221824,"uuid":"638631346","full_name":"alvarlagerlof/rsc-parser","owner":"alvarlagerlof","description":"A parser for the React Server Components when sent over the network","archived":false,"fork":false,"pushed_at":"2025-05-10T17:42:16.000Z","size":307514,"stargazers_count":596,"open_issues_count":4,"forks_count":14,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-10T18:28:29.873Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://rsc-parser.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alvarlagerlof.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-05-09T19:04:01.000Z","updated_at":"2025-05-10T17:42:20.000Z","dependencies_parsed_at":"2023-09-25T00:33:48.644Z","dependency_job_id":"c424fd84-7efc-452e-8282-b07902333b17","html_url":"https://github.com/alvarlagerlof/rsc-parser","commit_stats":null,"previous_names":[],"tags_count":66,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvarlagerlof%2Frsc-parser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvarlagerlof%2Frsc-parser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvarlagerlof%2Frsc-parser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvarlagerlof%2Frsc-parser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alvarlagerlof","download_url":"https://codeload.github.com/alvarlagerlof/rsc-parser/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254364270,"owners_count":22058878,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-09T19:01:40.615Z","updated_at":"2025-05-15T15:06:36.247Z","avatar_url":"https://github.com/alvarlagerlof.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# RSC Parser\n\nThis 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.\n\nI made this tool to more easily let you understand the data and explore it visually.\n\n## Comparison\n\n\u003cdiv style=\"display: flex; flex-direction: row;\"\u003e\n\n\u003cimg width=\"49%\" alt=\"image\" src=\"https://github.com/alvarlagerlof/rsc-parser/assets/14835120/f4384956-74e0-4647-a27e-b154a8716afa\"\u003e\n\n\u003cimg width=\"49%\" alt=\"image\" src=\"https://github.com/alvarlagerlof/rsc-parser/assets/14835120/f8f96e38-fc29-4348-8d83-1a04cd6322aa\"\u003e\n\u003c/div\u003e\n\n## How do I use this?\n\n### Extension\n\nThere is a Chrome Extension that you can add [here](https://chromewebstore.google.com/detail/rsc-devtools/jcejahepddjnppkhomnidalpnnnemomn).\n\n### npm package\n\nYou 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.\n\nFirst, install [@rsc-parser/embedded](https://www.npmjs.com/package/@rsc-parser/embedded) from npm like: `yarn add @rsc-parser/embedded`\n\nThen you can load it in a `layout.tsx` for example.\n\n```tsx\nimport { Suspense, lazy } from \"react\";\n\nconst RscDevtoolsPanel = lazy(() =\u003e\n  import(\"@rsc-parser/embedded\").then(module =\u003e ({\n    default: module.RscDevtoolsPanel,\n  })),\n);\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003chtml lang=\"en\"\u003e\n      \u003cbody\u003e\n        {children}\n        {/* Use any condition or flag you want here */ }\n        {process.env.NODE_ENV === \"development\" ? (\n          \u003cSuspense\u003e\n            \u003cRscDevtoolsPanel /\u003e\n          \u003c/Suspense\u003e\n        ) : null}\n      \u003c/body\u003e\n    \u003c/html\u003e\n  );\n```\n\n### Website\n\nThere is also a website that you can use by manually copy pasting RSC payloads.\n\n1. Go to a site that uses the NextJS App router or generally is based on React Server components.\n2. Open the network tab in your dev tools\n3. Reload.\n4. Look for fetch responses the payload roughly looks like json, but each like starts with something like `O:`, `1:I`, `b:` or similar.\n5. Copy the text and paste it into the form on https://rsc-parser.vercel.app/\n6. Explore!\n\n## It crashed!\n\nPlease make an issue on https://github.com/alvarlagerlof/rsc-parser/issues/new and include the text content that the parser was unable to handle.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falvarlagerlof%2Frsc-parser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falvarlagerlof%2Frsc-parser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falvarlagerlof%2Frsc-parser/lists"}