PropFlow: Visual Prop Tracing for React, Next.js & Remix

The Problem

You're debugging a React application. A button's theme color is wrong. You need to find where type is coming from.

You search your codebase. 47 results. 😫

You start tracing manually:

• NotificationBanner receives it from WelcomeCard
• WelcomeCard receives it from MainContent
• MainContent receives it from Dashboard

And so on...

20 minutes later, you find the issue.

There has to be a better way.

Introducing PropFlow

PropFlow is a VS Code extension that traces React props instantly.

Hover over any prop → see its complete journey from source to usage.

Features

🔍 Instant Prop Tracing

Place your cursor on any prop and run "PropFlow: Show PropFlow Lineage" (or use the CodeLens button).

PropFlow analyzes your component tree and shows you:

• 🟢 SOURCE: Where the prop originates
• 🔵 USAGE: Components passing it through
• 🟣 DEFINITION: Where you're currently viewing it

🗺️ Visual Flowcharts

Hover over any prop to see an inline ASCII flowchart:

🟢 App (SOURCE)
└─ prop: "notificationVariant"
↓
🔵 Dashboard (USAGE)
└─ prop: "alertType"
...
↓
🟣 NotificationBanner (DEFINITION)
└─ prop: "type"

🔗 Click-to-Navigate

Every component in the chain is clickable. Jump directly to the file and line where it's defined.

⚡ Real-Time Updates

As you edit your code, PropFlow updates instantly. No need to save files.

📊 PropFlow Lineage Panel

View the complete prop chain in a dedicated sidebar panel. Click any component to navigate.

Installation

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "PropFlow"
4. Click Install

Or install from the [VS Code Marketplace] - https://marketplace.visualstudio.com/items?itemName=rutpshah.propflow

Usage

Method 1: Command Palette

1. Place cursor on a prop name
2. Press Ctrl+Shift+P (Cmd+Shift+P on Mac)
3. Type "PropFlow: Show Prop Lineage"
4. View results in PropFlow Lineage panel

Method 2: CodeLens

1. Look for "⬆ Trace Props" above component definitions
2. Click it
3. Select prop from dropdown
4. View trace

Method 3: Hover

1. Hover over any prop in your component
2. See inline flowchart
3. Click components to navigate

How It Works

PropFlow uses TypeScript's Compiler API (ts-morph) to:

1. Parse React components into Abstract Syntax Trees
2. Extract prop definitions from function parameters
3. Search workspace for JSX usages
4. Build complete prop lineage chains

All processing happens locally. Your code never leaves your machine.

Use Cases

🐛 Debugging

Quickly find where a prop value is set or why it's the wrong value.

📚 Understanding Codebases

New to a project? Trace props to understand component relationships.

♻️ Refactoring

See all components affected by a prop before making changes.

🎓 Learning

Understand how data flows through React applications.

Supported Features

✅ Function components

✅ Arrow function components

✅ TypeScript & JavaScript

✅ JSX & TSX files

✅ Props destructuring

✅ Interface/Type definitions

✅ Spread operators (marked as ambiguous)

Roadmap

• [ ] Server Component awareness
• [ ] Multi-prop tracing
• [ ] Context API support
• [ ] Redux/Zustand state tracing
• [ ] Export flow diagrams
• [ ] Graph visualization mode
• [ ] Full-stack data flow visualization

Try It Out

PropFlow is completely free and open source.

• VS Code Marketplace: https://marketplace.visualstudio.com/items?itemName=rutpshah.propflow
• GitHub: https://github.com/rutpshah/propflow
• License: MIT

If you find it useful, a ⭐ on GitHub helps!

Feedback

What would make PropFlow more useful for you?

Leave a comment below or open an issue on GitHub.

---

Happy prop tracing! 🚀