A TypeScript library for parsing React Server Components (RSC) network payloads into JSON
npm install rsc-to-jsonA TypeScript library for parsing React Server Components (RSC) network payloads into JSON.
- 🚀 Full RSC Support: Parse all RSC chunk types (imports, models, errors, hints)
- 🔗 Reference Resolution: Automatically resolve $L references into nested JSON
- 📦 Dual Module Support: Works with both CommonJS and ES Modules
- 🎯 Type Safe: Written in TypeScript with full type definitions
- 🧪 Well Tested: Comprehensive test suite with real-world examples
``bash
npm install rsc-to-json
Quick Start
typescript
import { parseRSC } from 'rsc-to-json';const rscPayload =
;const result = parseRSC(rscPayload);
console.log(JSON.stringify(result.root, null, 2));
`Output:
json
{
"type": "div",
"props": {
"className": "profile",
"children": {
"name": "Global Cybersecurity Advisor",
"title": "CISSP, CCSP",
"bio": "John Doe - Software Engineer"
}
}
}
`CLI Usage
Convert RSC files to JSON from the command line:
bash
Basic usage
rsc-to-json input.rsc output.jsonWith options
rsc-to-json input.rsc output.json --no-prettyShow help
rsc-to-json --help
`$3
-
- Pretty print JSON output (default: true)
- --no-pretty - Output compact JSON
- --help, -h - Show help message$3
`bash
Create an RSC file
echo '170:["John Doe"]
0:[["$","div",null,{"children":"$L170"}]]' > test.rscConvert to JSON
rsc-to-json test.rsc output.jsonView the result
cat output.json
`API Reference
$3
Parse and resolve an RSC payload in one step.
typescript
const result = parseRSC(rscPayload);
`$3
For more control, use the parser class directly:
typescript
import { RSCParser, resolveReferences } from 'rsc-to-json';const parser = new RSCParser();
const parsed = parser.parse(rscPayload);
const resolved = resolveReferences(parsed);
`$3
typescript
interface ImportInfo {
id: string;
moduleId: string;
exports: string[];
name: string;
}interface ComponentInfo {
id: string;
type: 'ReactElement' | 'ComplexComponent' | 'Unknown';
element?: string;
props?: Record;
children?: any;
metadata?: any;
}
interface ParsedRSCData {
imports: Map;
components: Map;
references: Map;
rootComponent?: ComponentInfo;
}
interface ResolvedRSCData {
imports: Record;
components: Record;
root?: any;
references?: Record;
}
`Understanding RSC Format
React Server Components use a line-based format for streaming UI:
$3
1:I["moduleId",[],"ComponentName"]
- Imports a component for use in the payload$3
0:[["$","div",null,{"children":"Hello"}]]
- Defines UI components and data$3
$L170 // References component with ID 170
$L1 // References import with ID 1
$3
$undefined // Represents undefined value
Advanced Usage
$3
typescript
const parser = new RSCParser();
const parsed = parser.parse(rscPayload);// Access raw parsed data
console.log(parsed.imports); // Map of imports
console.log(parsed.components); // Map of components
console.log(parsed.references); // Map of references
`$3
typescript
// Complex application RSC payload with imports
const complexPayload = ;const result = parseRSC(complexPayload);
`$3
typescript
try {
const result = parseRSC(malformedPayload);
} catch (error) {
console.error('Failed to parse RSC:', error);
}
``- Development Tools: Build RSC inspectors and debuggers
- Testing: Parse and analyze RSC payloads in tests
- Documentation: Generate documentation from RSC payloads
- Migration: Convert RSC payloads to other formats
- Analysis: Analyze component usage and dependencies
Contributions are welcome! Please feel free to submit a Pull Request.
MIT