Schema Visualizer
Building a real-time, multiplayer schema visualization and collaboration platform for data models. Internal Product (Hubql Labs Product Studio).
Industry
Developer Tools, SaaS
Service Type
Full-Stack Product Development
Core Tech
React, xyflow, Supabase, Node.js, AWS
The Challenge
Understanding complex data structures is a universal pain point for engineering teams. Schemas—whether JSON, GraphQL, SQL, or Prisma—are often buried in code repositories, making it difficult for stakeholders to visualize relationships or collaborate on changes. Existing tools were often static, disjointed, or lacked the real-time interactivity required for modern remote teams.
As an engineering-first company, we identified the need for a tool that could bridge the gap between raw code and visual understanding, allowing teams to "draw" with their data and collaborate in real-time.
The Goal
We set out to engineer a **real-time collaborative platform** that could:
Instantly visualize complex schemas from multiple sources (Prisma, SQL, OpenAPI, etc.).
Enable multiplayer editing (similar to Figma) for distributed teams.
Seamlessly integrate with existing developer workflows via GitHub and CLI tools.
The Solution
Hubql Labs built Schema Visualizer as a cutting-edge SaaS application, demonstrating our capability to engineer complex, state-heavy web applications.
Architecture & Approach
We leveraged a Supabase backend to handle real-time subscriptions and authentication, ensuring millisecond-latency updates for collaborative sessions. The frontend was built on React, heavily utilizing xyflow (React Flow) for the interactive graph visualization engine.
Key Features
Multi-Format Parsing
We engineered parsers capable of ingesting and visualizing diverse formats, including JSON, XML, Proto, GraphQL, Prisma, SQL, and OpenAPI.
Real-Time "Multiplayer" Engine
Implemented live cursor tracking and node position synchronization, allowing multiple users to explore and annotate schemas simultaneously without conflicts.
Two-Way Git Sync
We built a custom GitHub App integration that allowed for bidirectional synchronization—changes made visually could be committed back to the repo, and code pushes would update the visual graph.
Technical Highlights
Edge-Ready Integration: Developed the Hubql CLI to bridge local development environments with the cloud platform.
Language Server Protocol (LSP): Integrated the Prisma language server to provide accurate, type-safe schema parsing.
Technologies & Tools
Frontend
React, TypeScript, xyflow (Graph Visualization)
Backend
Node.js, Supabase (Realtime & Auth)
Infrastructure
AWS
Integrations
GitHub App API
The Result
Schema Visualizer served as a powerful proof of concept for Hubql Labs' engineering capabilities. It successfully handled complex graph rendering and real-time state management, proving our ability to build desktop-grade experiences in the browser.
Build with us. Reach out today.
Ready to start? We'll help you turn your vision into a scalable product.