react-state-flow 0.0.1

package/README.md

@@ -0,0 +1,41 @@
+# react-state-flow
+
+Visualize your React component hierarchy and state flow in real-time.
+
+<!-- screenshot here -->
+
+## Usage
+
+Run in any React project — no install required:
+
+```bash
+npx react-state-flow ./src
+```
+
+A browser window opens at `http://localhost:7272` showing an interactive graph of your components, their relationships, and context providers.
+
+The graph updates automatically when you save files.
+
+## Runtime instrumentation (optional)
+
+To see which components are re-rendering and how many times, add the runtime to your app:
+
+```bash
+npm install @rsf/runtime
+```
+
+```ts
+// main.tsx — must be the very first import
+import '@rsf/runtime'
+```
+
+Components that re-render will be highlighted in the graph in real-time.
+
+## Requirements
+
+- Node 18+
+- React 17 or 18
+
+## How it works
+
+`react-state-flow` parses your source files statically using Babel to extract component relationships and context usage, then serves an interactive graph UI. The optional `@rsf/runtime` package hooks into React's internal fiber reconciler (the same mechanism used by React DevTools) to capture render events and stream them to the UI over WebSocket.