Schema Lens

Schema Lens is a visualizer-first JSON analysis and code generation tool. It transforms complex JSON structures into interactive graphs, allowing developers to understand data relationships at a glance and instantly generate type definitions for TypeScript and Java.

🚀 Features

• Visualizer-First Approach: View JSON data as an interactive node graph using React Flow.
• Interactive Graph:
  • Auto-layout powered by Dagre.
  • Expand/Collapse nodes to focus on specific data segments.
  • Path Highlighting: Select any node to see its path (e.g., root.users[0].address).
  • "Copy Path" functionality for quick access to data selectors.
• Code Generation:
  • Instantly generate TypeScript interfaces.
  • Generate Java classes (with optional Lombok @Data support).
  • Clean, production-ready output powered by Quicktype.
• Powerful Editor:
  • Built-in Monaco Editor for JSON input.
  • Real-time syntax validation and error reporting.
  • Auto-formatting.
• Modern UI:
  • Built with Tailwind CSS and Shadcn UI.

🛠️ Technology Stack

• **Frontend Framework **: React + TypeScript + Vite
• State Management: Zustand (with persistence).
• Visualization: React Flow + Dagre.
• Editor: @monaco-editor/react.
• Code Generation: quicktype-core.
• Styling: Tailwind CSS + Radix UI.

💡 Philosophy

Working with massive JSON responses from APIs can be overwhelming. Standard collapsible tree views often fail to show the "big picture" of data relationships.

Schema Lens was built with a simple philosophy: See the structure, then see the code.

Instead of just formatting JSON text, Schema Lens treats JSON as a graph of connected objects. This allows developers to:

1. Explore: Navigate deeply nested structures visually.
2. Understand: See how arrays, objects, and primitives relate.
3. Implement: Immediately get the type definitions needed to consume that data in their application.

📦 Installation & Usage

1. Clone the repository

   git clone https://github.com/nunosilva-dev/schema-lens.git
   cd schema-lens

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Build for production

   npm run build

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License.