Visualize, edit, and architect your JSON data with unparalleled precision and elegance.
Architect is a professional-grade JSON Visualizer and Editor built for developers who demand the best. Experience seamless two-way synchronization between a powerful code editor and an interactive graph canvas, powered by cutting-edge web technologies.
Monaco Editor and React Flow canvas are perfectly bound. Edit in code, see instant graph updates; modify nodes in the graph, watch the code transform in real-time.
Handle massive JSON datasets effortlessly with automatic hierarchical tree positioning. No more cramped views – expand your data universe.
Global search to instantly navigate to any key, value, or object. Fly through your data with lightning speed.
A dedicated space to comfortably read and edit long string values. No more squinting at truncated text in tiny nodes.
Instant TypeScript interface generation from your JSON structure. Turn data into type-safe code with a single click.
Clickable references to "fly" the camera to child nodes. Navigate complex data structures like a pro.
Fold away entire data branches to manage visual noise. Focus on what matters, hide the rest.
- Resizable sidebar for optimal layout
- Drag-and-Drop file uploads
- High-resolution PNG export for documentation and sharing
- Framework: Next.js 16
- Graph Visualization: React Flow
- Code Editor: Monaco Editor
- Icons: Lucide Icons
- Layout Algorithm: Dagre
- Image Export: html-to-image
- Styling: Tailwind CSS
- Clone the repository:
git clone <repository-url>
cd json-visualizer- Install dependencies:
npm install- Start the development server:
npm run dev- Open http://localhost:3000 in your browser.
- Press
Cmd+K(Mac) orCtrl+K(Windows/Linux) - Type any key, value, or object name
- Instantly fly to the matching element in the graph
- The graph automatically positions nodes hierarchically using Dagre
- For massive datasets, nodes are arranged in a clean, readable tree structure
- Click the "Generate Types" button
- Get instant TypeScript interfaces based on your JSON structure
- Copy and use in your projects for type safety
- Drag and drop JSON files onto the canvas
- Or use the file toolbar to browse and select files
- Use the export button to save high-res PNG images of your visualizations
- Perfect for documentation, presentations, or sharing insights
Add screenshots and GIFs here to showcase the features
- Main interface with two-way sync
- Search palette in action
- Deep inspector panel
- Code generation demo
- Large dataset visualization
We welcome contributions! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.
Built with ❤️ for developers who architect the future.