Dependency Tree Visualizer transforms your package.json into an interactive, color-coded tree that reveals security issues, deprecated packages, and dependency relationships at a glance. Built for developers who need to understand and audit their project dependencies quickly and safely.
Explore your dependency tree with intuitive controls:
- Expandable/Collapsible branches for focused navigation
- Expand All / Collapse All quick actions
- Color-coded dependencies by type (production, dev, peer, optional)
- Click-to-explore nested dependencies
- Responsive design that works on any device
Stay ahead of security issues and technical debt:
- Security vulnerability detection for known CVEs
- Deprecated package warnings (moment, request, etc.)
- Version conflict alerts and wildcard usage warnings
- Outdated package notifications
- Real-time analysis as you upload
Your package.json data never leaves your browser:
- 100% client-side processing with no server uploads
- Safe for proprietary projects and sensitive codebases
- No data logging or analytics on your dependencies
- Works offline once loaded
- GDPR compliant by design
Get instant insights about your project:
- Total dependency count (production + development)
- Dependency type breakdown with visual charts
- Security score overview with issue counts
- Package health metrics at a glance
Each dependency is color-coded for instant recognition:
- 🔵 Production (Blue) - Runtime dependencies
- 🟣 Development (Purple) - Dev-only tools
- 🟢 Peer (Green) - Expected by consuming projects
- ⚫ Optional (Gray) - Nice-to-have packages
Go beyond basic tree viewing:
- Duplicate dependency detection
- License compatibility checking
- Bundle size impact estimates
- Update recommendations
- Vulnerability severity scoring
Work with dependency data seamlessly:
- Upload package.json files directly
- Paste JSON content for quick analysis
- Export visualizations as images
- Save analysis reports for auditing
- Sample data to test features
Built with modern tools for smooth performance:
- Next.js 16 with App Router
- TypeScript for type safety
- Tailwind CSS for responsive design
- Radix UI for accessible components
- Framer Motion for smooth animations
- Lucide React for beautiful icons
Perfect for developers who need to:
- Identify vulnerable packages before deployment
- Track deprecated dependencies in legacy projects
- Audit third-party package usage for compliance
- Understand dependency complexity in large codebases
- Find duplicate packages inflating bundle size
- Analyze dependency relationships and conflicts
- Prioritize package updates based on security impact
- Plan migration away from deprecated libraries
- Document dependency decisions for team reviews
- Share visual dependency maps with stakeholders
- Onboard new developers with clear project structure
- Present architecture decisions with visual evidence
Leveraging cutting-edge web technologies:
- WebAssembly for fast parsing of large package.json files
- Virtual scrolling for smooth performance with 1000+ dependencies
- Progressive loading for instant initial render
- Service worker caching for offline functionality
- Responsive design optimized for mobile and desktop
Planned features include:
- Network graph visualization using D3.js
- npm/yarn audit integration for real vulnerability data
- Dependency size analysis with bundle impact
- Multi-file comparison mode
- GitHub integration for repository scanning
- CI/CD pipeline integration for automated auditing
Ready to visualize your dependencies? Upload your package.json and discover what's really in your project.