React Analyzer 🔍

A powerful CLI tool with an interactive web interface to analyze React component trees, relationships, and architecture patterns. Store multiple analysis runs in SQLite and visualize your React application structure with beautiful interactive graphs.

✨ Features

Core Analysis

🌳 Component Tree Visualization - See your component hierarchy at a glance
🔗 Relationship Analysis - Track how components interact with each other
🪝 Hooks Detection - Analyze React hooks usage patterns
📊 Props Analysis - Understand component interfaces and prop flow
⚡ Fast AST Parsing - Powered by Babel for accurate code analysis

Storage & Persistence

💾 SQLite Database - Persistent storage for multiple analysis runs
📅 Historical Tracking - Compare analyses over time
🔍 Run Management - View and switch between different analysis runs

Interactive Web Viewer

🌐 Web-Based Dashboard - Beautiful, responsive interface
📱 Three View Modes:
- List View - Paginated component table with search
- Hierarchy View - Collapsible component tree with usage counts
- Graph View - Interactive D3.js force-directed network visualization
🎨 Interactive Features:
- Zoom controls (+, -, reset)
- Fullscreen mode
- Drag-and-drop nodes
- Hover tooltips
- Click for component details
- URL-based state management

🚀 Quick Start

Installation

# Clone the repository
git clone https://github.com/mohmed98/react-analyzer.git
cd react-analyzer

# Install dependencies
npm install

Basic Usage

# 1. Analyze your React project
node bin/cli.js analyze -d /path/to/your/react/project --include-props --include-hooks

# 2. Start the web viewer
node bin/cli.js serve

# 3. Open your browser
# Visit http://localhost:3000

🎯 Commands

`analyze` - Analyze React Components

Scan your React codebase and store analysis results in the database.

node bin/cli.js analyze [options]

Options:

-d, --dir <directory> - Directory to analyze (default: ./src)
--include-props - Include detailed prop analysis
--include-hooks - Include React hooks analysis

Examples:

# Analyze current project
node bin/cli.js analyze --include-props --include-hooks

# Analyze specific directory
node bin/cli.js analyze -d /path/to/react/app/src --include-props --include-hooks

# Quick analysis without extras
node bin/cli.js analyze -d ./components

`serve` - Start Web Viewer

Launch the interactive web interface to explore analysis results.

node bin/cli.js serve [options]

Options:

-p, --port <port> - Port to run the server on (default: 3000)

Examples:

# Default port (3000)
node bin/cli.js serve

# Custom port
node bin/cli.js serve -p 8080

📊 Web Viewer Features

1. 📋 List View

Paginated Table - Browse components 50 at a time
Component Details - Click any component to see full details
File Paths - Hidden by default, shown in modal
Props & Hooks - View all props and hooks used

2. 🌲 Hierarchy View

Tree Structure - Visual parent-child relationships
Collapsible Nodes - Expand/collapse component trees
Usage Counts - See how many times components are used (e.g., "Button (×5)")
Smart Limits - Show 50, 100, 200, 500, or all components
Auto-Collapse - Large datasets start collapsed for performance

3. 🕸️ Graph View (Network Visualization)

The most powerful view for understanding architecture!

Features:

Force-Directed Layout - Components automatically arrange based on relationships
Interactive Nodes:
- 🟣 Purple nodes - Root components (not used by others)
- 🟢 Green nodes - Used components
- Size - Bigger nodes = more usage
Controls:
- + / - - Zoom in/out buttons
- ⊙ - Reset zoom to center
- ⛶ - Fullscreen mode (true fullscreen!)
- Mouse wheel - Smooth zoom
- Drag - Rearrange nodes
- Pan - Click empty space and drag
Interactions:
- Hover - Show component name and usage count
- Click node - Open detailed component modal
- Live animation - Watch the graph settle into optimal layout

Perfect for:

🔍 Finding central/hub components
🏗️ Understanding architecture patterns
🔗 Visualizing complex relationships
📊 Presenting to teams

🗄️ Database Schema

Analysis data is stored in react-analysis.db with three tables:

`analysis_runs`

Multiple analysis runs with timestamps
Summary statistics
Project metadata

`components`

Component details (name, file path)
Props and hooks (JSON)
Linked to analysis run

`relationships`

Component usage relationships
Parent-child connections
Enables hierarchy and graph views

📖 Example Workflows

Daily Development Workflow

# Morning: Analyze current state
node bin/cli.js analyze -d ./src --include-props --include-hooks

# Throughout day: View in browser
node bin/cli.js serve

# Browse to http://localhost:3000
# - Check hierarchy view for new components
# - Use graph view to understand impacts
# - Compare with previous runs

Code Review Workflow

# Before review: Analyze feature branch
node bin/cli.js analyze -d ./src --include-props --include-hooks

# During review: Use web viewer
node bin/cli.js serve

# - List view: Find specific components
# - Hierarchy view: See new component relationships
# - Graph view: Visualize architecture changes

Large Codebase Exploration

# Initial analysis
node bin/cli.js analyze -d /path/to/large/app --include-props --include-hooks

# Start viewer
node bin/cli.js serve

# In Graph View:
# 1. Start with 50 components to see core structure
# 2. Identify central hubs (big green nodes)
# 3. Gradually increase to 100, 200 for full picture
# 4. Use fullscreen mode for better visibility
# 5. Click nodes to understand component details

🎨 Screenshots & Demos

Graph View - Full Screen

Perfect for presentations and architecture discussions:

See entire component network
Identify tightly coupled areas
Find reusable components (big green nodes)
Spot orphaned components (purple nodes)

Hierarchy View

Collapsible tree structure
Usage counts show component reusability
Great for understanding parent-child flows

List View

Traditional table format
Quick searching and filtering
Pagination for large apps

💡 Use Cases

🔍 Architecture Analysis

Identify central hub components
Find tightly coupled areas
Spot architectural anti-patterns
Plan refactoring strategies

👥 Team Collaboration

Share analysis runs via database
Present architecture in fullscreen graph mode
Onboard new developers visually
Document component relationships

📚 Documentation

Generate visual component maps
Track architecture evolution over time
Compare different analysis runs
Export findings for documentation

🔧 Refactoring

Identify most-used components for optimization
Understand impact before making changes
Track relationship changes over time
Plan component extraction safely

📁 Integration Examples

NPM Scripts

Add to your package.json:

{
  "scripts": {
    "analyze": "node ./react-analyzer/bin/cli.js analyze --include-props --include-hooks",
    "analyze:dir": "node ./react-analyzer/bin/cli.js analyze -d",
    "viewer": "node ./react-analyzer/bin/cli.js serve",
    "viewer:custom": "node ./react-analyzer/bin/cli.js serve -p 8080"
  }
}

Pre-commit Hook

#!/bin/bash
# .git/hooks/pre-commit

echo "Analyzing React components..."
node ./react-analyzer/bin/cli.js analyze --include-props --include-hooks

CI/CD Integration

# .github/workflows/analyze.yml
name: React Architecture Analysis
on: [push, pull_request]
jobs:
  analyze:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
      - name: Install React Analyzer
        run: |
          git clone https://github.com/mohmed98/react-analyzer.git
          cd react-analyzer && npm install
      - name: Run Analysis
        run: |
          node react-analyzer/bin/cli.js analyze -d ./src --include-props --include-hooks
      - name: Upload Database
        uses: actions/upload-artifact@v4
        with:
          name: analysis-results
          path: react-analysis.db

🔧 Advanced Usage

Analyzing Multiple Projects

# Analyze different projects
node bin/cli.js analyze -d ~/projects/project-a/src --include-props --include-hooks
node bin/cli.js analyze -d ~/projects/project-b/src --include-props --include-hooks

# All runs stored in same database
node bin/cli.js serve

# Switch between runs in the web interface

Custom Port for Development

# Run on different port to avoid conflicts
node bin/cli.js serve -p 4000

# Multiple instances for different projects
node bin/cli.js serve -p 3000  # Project A
node bin/cli.js serve -p 3001  # Project B

🛠️ Technical Stack

Backend

Node.js - Runtime environment
Express.js - Web server framework
better-sqlite3 - Fast SQLite database driver
Babel - JavaScript AST parsing
Commander.js - CLI interface

Frontend

Vanilla JavaScript - No framework overhead
D3.js - Force-directed graph visualization
Modern CSS - Flexbox, Grid, responsive design
HTML5 - Semantic markup

🚨 Troubleshooting

Port Already in Use

# Error: Port 3000 is already in use
# Solution: Use a different port
node bin/cli.js serve -p 8080

Database Locked

# Error: Database is locked
# Solution: Stop any running server instances
# Check: ps aux | grep "node bin/cli.js serve"
# Kill: kill -9 <process_id>

No Components Found

Ensure directory has React files (.jsx, .tsx, .js)
Check component naming (must be PascalCase)
Verify JSX syntax is valid
Try analyzing parent directory

Graph View Performance

Start with 50 components for large apps
Use fullscreen mode for better performance
Collapse unused branches in hierarchy view
Consider analyzing subdirectories separately

🤝 Contributing

Contributions are welcome! Areas for improvement:

Search/filter components in web viewer
Export analysis as JSON/CSV
Compare different analysis runs visually
Dark mode toggle
Component complexity metrics
Performance profiling integration
TypeScript type analysis
Custom styling for graph nodes
Share analysis runs via URL

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'feat: Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Built with Babel for AST parsing
Visualizations powered by D3.js
CLI interface built with Commander.js
Database powered by better-sqlite3
Server built with Express.js

🔮 Roadmap

Made with ❤️ for the React community

If this tool helps you understand your React applications better, please give it a ⭐!

📸 Quick Demo

# Try it with your project in 3 commands:
git clone https://github.com/mohmed98/react-analyzer.git
cd react-analyzer && npm install
node bin/cli.js analyze -d /path/to/your/react/app --include-props --include-hooks && node bin/cli.js serve

Then open http://localhost:3000 and switch to Graph View with Fullscreen mode for the best experience! 🚀

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
bin		bin
src		src
viewer		viewer
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
USAGE_GUIDE.md		USAGE_GUIDE.md
package.json		package.json
setup.sh		setup.sh

License

mohmed98/react-analyzer

Folders and files

Latest commit

History

Repository files navigation