VTool - Visual JSON Schema Builder

VTool (V2 Tool) is a visual interface that transforms complex JSON schema creation into an intuitive drag-and-drop experience. Built for Countable's custom CMS platform, VTool empowers both technical and non-technical team members to rapidly create and modify content management interfaces without diving into raw JSON.

Design Philosophy

The core challenge was removing technical barriers while maintaining the power and flexibility of JSON schemas. The solution needed to feel as approachable while producing production-ready CMS configurations.

Design Solutions

Interface Design

• Familiar toolbar layout inspired by creative tools like Apple's Freeform
• Custom-designed icons that bridge technical concepts with visual understanding
• Drag-and-drop canvas that provides immediate visual feedback
• Real-time JSON preview that validates schema integrity

User Experience

• Progressive disclosure of advanced features
• Template system for reusing common patterns
• Built-in internationalization support for Spanish content
• Personal libraries for saved schemas and templates

Technical Implementation

Built with Next.js 14, TypeScript, and MobX, VTool leverages modern web technologies to create a fluid, responsive interface:

Core Architecture

• MobX observable stores for complex nested schema structures
• Recursive schema generator for visual-to-JSON transformation
• Bidirectional parser for importing existing schemas
• @dnd-kit integration for accessible drag-and-drop

Performance & Reliability

• React Virtual DOM for efficient large schema updates
• Debounced auto-saving with optimistic UI updates
• Custom JSON validation system
• PocketBase integration for persistence and authentication

Impact

VTool transformed Countable's workflow by:

• Reducing schema creation time from hours to minutes
• Eliminating common JSON structure errors
• Increasing adoption of advanced CMS features
• Enabling non-technical team participation
• Streamlining multilingual content configuration

What I Learned

This project pushed me to master:

• Complex state management with MobX
• Accessible drag-and-drop interfaces
• Real-time preview systems
• Recursive component architectures