Comprehensive TypeScript & React codebase visualization with AI-ready context export.
Shadow Map V2 is a powerful VS Code extension that visualizes your entire codebase as an interactive dependency graph, mapping components, hooks, interfaces, functions, and their relationships. Perfect for understanding complex architectures and providing AI coding assistants with deep project context.
Shadow Map detects and visualizes everything in your TypeScript/React codebase:
- Components - All React components with full metadata
- Custom Hooks - Automatically detected and properly categorized
- Interfaces & Types - Complete type system mapping
- Functions - Regular functions, async, generators
- Call Graphs - Function and component relationships
- Dependencies - Import/export relationships
Result: See 3x more code elements than basic tools (60+ nodes vs 19)
- ✅ Component composition tracking (
usesComponents) - ✅ Custom hooks identification (
type: "custom-hook") - ✅ HOC (Higher-Order Component) detection
- ✅ React optimization patterns (
memo,lazy,forwardRef) - ✅ Context API tracking (providers & consumers)
- ✅ Props, state, and hooks metadata
- ✅ Generic type parameters (
<T, K>) - ✅ Interface, Type Alias, and Enum mapping
- ✅ Async/Generator function detection
- ✅ JSDoc documentation capture
- ✅ Export status tracking
- ✅ Comprehensive type signatures
Click "Copy AI Context" on any node to get:
- Complete node metadata with all V2 enhancements
- React-specific information (props, state, hooks, composition)
- Full dependency trees
- Call graphs
- Formatted JSON + Markdown for easy AI integration
Perfect for Claude, ChatGPT, Gemini, or any LLM!
- Dynamic Graph - Zoom, pan, drag nodes
- Smart Search - Find components, hooks, interfaces instantly
- Advanced Filters - Filter by type, complexity, export status
- Color Coding - Visual distinction by node type
- Focus Mode - Click nodes to see details and relationships
- Install the extension from the marketplace
- Open a TypeScript/React project in VS Code
- Run command:
Shadow Map: Open Visualizer(Ctrl+Shift+P) - Explore your codebase as an interactive graph!
- Basic file/function detection
- Limited metadata
- No React-specific features
- 19 nodes detected
- Comprehensive mapping of all code elements
- Rich metadata for every node
- Full React & TypeScript support
- 60+ nodes detected (+216% increase!)
- Custom hooks, HOCs, generics, Context API, and more
- Understand unfamiliar codebases quickly
- Visualize component hierarchies
- Track dependencies and relationships
- Identify optimization opportunities
- Document architecture
- Export rich context for AI coding assistants
- Provide comprehensive project structure to LLMs
- Get better AI suggestions with full context
- Accelerate development with AI pair programming
- Onboard new developers faster
- Review architecture decisions
- Plan refactoring efforts
- Identify circular dependencies
- Maintain code quality
- VS Code 1.80.0 or higher
- TypeScript or JavaScript project
- React projects get enhanced detection
Shadow Map works out of the box with no configuration required!
Future versions will add customizable settings for:
- Color themes
- Filter presets
- Export formats
- Graph layout options
- Webview Phase 2 UI enhancements temporarily disabled (backend fully functional)
- Very large projects (>1000 files) may take time to analyze
See Issues for the latest status.
Complete TypeScript/React mapping overhaul!
- Custom Hooks detection with dedicated node type
- HOC identification
- React optimization patterns (memo, lazy, forwardRef)
- Generic type parameters extraction
- Async/Generator function detection
- JSDoc documentation capture
- Interface, Type Alias, and Enum mapping
- Enhanced call graphs and relationships
- Comprehensive AI context export
- 216% more code elements detected
- Accurate export detection
- Component detection for all JSX patterns
- Performance optimizations
See CHANGELOG for full details.
Contributions welcome! Please see our GitHub repository for guidelines.
MIT License - see LICENSE file for details.
Built with:
- ts-morph - TypeScript AST manipulation
- React Flow - Graph visualization
- Dagre - Graph layout
- Issues: GitHub Issues
- Discussions: GitHub Discussions
Enjoy visualizing your code with Shadow Map! 🗺️