How many times have you opened any Complex YAML or JSON file or a complex application configuration and felt overwhelmed by the nested structure?
You know the data is there, but understanding the relationships and hierarchy feels like solving a puzzle.
ConfMap solves this problem by transforming your configuration files into beautiful, interactive mind maps that make complex structures instantly understandable, searchable, extractable and more.
🚀 What is ConfMap?
ConfMap is an open-source tool that converts YAML, JSON, and YML configuration files into interactive mind maps with intelligent 13-level color coding. Think of it as a visual debugger for your configuration files.
Try it live: https://confmap.com
Quick Demo on ConfMap
✨ Key Features - Curated from the feedback and pain
🎨 Intelligent Color Coding
- 13 distinct colors for different hierarchy levels
- Automatic color cycling for deeper nesting
- Visual legend showing all color levels
🔍 Powerful Search & Navigation
- Find and highlight ALL matching nodes
- Navigate results with ↑/↓ arrow keys
- Smart highlighting with visual feedback
🧹 TidyUp Mode (My Personal Favorite!)
- Press Alt+T to focus on any node's lineage
- Shows only the path from root + all descendants
- Perfect for understanding complex nested structures
📝 Word Wrapping for Long Text
- Press Alt+W to toggle word wrapping
- Handles those ridiculously long configuration keys
- Makes everything readable without horizontal scrolling
🎯 Multiple Layouts
- Horizontal: Traditional left-to-right flow
- Vertical: Top-to-bottom hierarchy
- Radial: Circular, centered view
🌀 Copy Lineage Feature
- Press Ctrl+C to copy any node's lineage
- Multiple formats: tree view and YAML-like structure
- Perfect for documentation and debugging
⌨️ Keyboard Shortcuts (Because We Love Efficiency)
Click on the Help section of the app to get to know all the shortcuts available - I know Legends does not use mouse
🛠️ Built with Modern Tech
- TypeScript for type safety
- ECharts for beautiful visualizations
- Tailwind CSS for responsive design
- Vite for lightning-fast builds
How to use it
Option 1: Use the Live Version (Recommended)
- Visit https://confmap.com
- Upload your configuration file ( Its locally rendered - data is not shared anywhere)
- Start exploring immediately!
Option 2: Run Locally
# Clone the repository git clone https://github.com/aksarav/confmap.git cd confmap # Install dependencies npm install # Start development server npm run dev # Open map.html in your browser 🤝 Contributing & Community
ConfMap is open-source and we'd love your contributions! Whether it's:
- 🐛 Bug reports
- 💡 Feature suggestions
- 🔧 Code contributions
- 📖 Documentation improvements
Visit our GitHub repository to get involved.
*⭐ Star the repo if you find it useful! Your support helps us continue improving.
*
🎯 Why This Matters
Configuration files are the backbone of modern applications, but they're often treated as an afterthought.
ConfMap and our other initiaves like ConfQL, YamlQL bridges the gap between complex configurations and human understanding, making your development workflow more efficient and less error-prone.
What's Next?
We're constantly adding new features based on community feedback.
Some ideas in the pipeline:
- Support for more file formats (TOML, INI, etc.)
- Collaborative editing features
- Configuration diff visualization
- Integration with popular IDEs as Extension
Top comments (0)