React Doctor UI

A focused local viewer for JSON reports produced by React Doctor.

Usage

Pipe a report directly into the viewer:

npx react-doctor@latest --diff master --json | npx react-doctor-ui

Or open a report saved earlier:

npx react-doctor@latest --diff master --json > react-doctor-report.json
npx react-doctor-ui react-doctor-report.json

The CLI reads and validates the complete report before starting an HTTP server bound to 127.0.0.1 on a random available port. The browser receives the data from a local JSON endpoint, so report size is not constrained by URL limits. The server keeps the report in memory and stops with Ctrl+C.

The viewer follows the operating system appearance on first launch. Use the toolbar appearance control to switch between light and dark mode; the chosen theme is saved locally for future reports.

When React Doctor omits branch metadata, such as for reports created without --diff, the CLI resolves the current Git branch from the report directory and includes it in the toolbar.

When a diagnostic points to a local source file, the CLI adds a small code excerpt around the affected line. It only reads files inside the detected project directory, ignores files larger than 2 MB, and sends the browser the excerpt rather than the entire file.

The detail view can copy a self-contained repair prompt with the project and branch context, diagnostic metadata, issue, suggested change, and available source excerpt. Paste it into a coding agent to start from the same evidence shown in the viewer.

Local development

npm install
npm run build
npx react-doctor@latest --diff master --json | node ./bin/react-doctor-ui.js

Useful CLI flags:

--no-open        Start without opening the browser
--port <number>  Use a specific port