Lumina Studio is a high-performance, professional-grade visual builder designed to bridge the gap between design and enterprise data schemas. Originally developed as a Techsurf Runner-Up entry, it has evolved into a fully decoupled, local-first engine capable of generating production-ready UI schemas in real-time.
Lumina started as a Contentstack-dependent tool but has since been refactored into the Lumina Studio Architecture, a localized ecosystem that prioritizes speed, reliability, and developer autonomy:
- The Studio Core: A dedicated, high-contrast workspace for visual engineering with an optimized drag-and-drop viewport.
- The Lumina Engine: A robust persistence layer using
localStorageandstudioApi, enabling designs to be "deployed" locally for testing without a backend. - Live Preview System: A standalone environment that renders designs exactly as they appear in the studio, providing a true "What You See Is What You Get" (WYSIWYG) experience.
- Schema-Driven UI: Every component is backed by a precise JSON schema, allowing for seamless integration into any headless CMS or custom enterprise stack.
Powered by @dnd-kit, the studio features a sophisticated reordering and insertion engine.
- Intelligent Sorting: Drag-and-drop elements within the viewport with real-time collision detection.
- Drag Overlays: High-fidelity visual feedback using custom drag overlays for each element type.
- Sensor Optimization: Multi-sensor support (Mouse & Touch) for cross-platform visual building.
Lumina Studio allows you to link static UI elements to dynamic data sources with zero code.
- Local Entity Mapping: Link headings, paragraphs, and images to local mock data (Products, Blogs, Team Members).
- Dynamic Grids: Build complex product or blog grids that automatically hydrate with data when published.
- Atomic Data Links: Every element can be uniquely mapped to specific schema fields.
A comprehensive suite of tools for fine-tuning the look and feel of your application.
- Typography Suite: Atomic control over font size, weight, alignment, and color.
- Layout Control: Fine-grained height/width adjustments for media elements.
- Design Tokens: Every adjustment generates a standardized design token, ensuring consistency across the UI.
- Glassmorphism Theme: Built-in support for modern "Glass" aesthetics with real-time blur and opacity control.
Transparency is core to Lumina. The studio provides a real-time JSON Schema Inspector.
- Technical Validation: View the exact JSON being generated by your visual design.
- Portability: Copy the schema directly to use in your production CMS or database.
- Versioned Logic: Built on a modular schema versioning system to ensure future compatibility.
- Core Framework: React 18 with TypeScript for type-safe UI construction.
- State Architecture:
- Redux Toolkit: Manages complex global states like content catalogs and studio settings.
- Context API: High-performance local state for drag-and-drop interactions.
- Styling Engine: A hybrid of Tailwind CSS for layout utilities and Vanilla CSS for premium visual effects.
- Persistence Layer: Custom
studioApiimplementation for local-first serialization and deployment.
# Clone the repository
git clone https://github.com/AdityyaX/UI-Builder.git
# Install dependencies
npm install
# Start the Visual Studio
npm run dev- Select Source: Choose your data provider from the sidebar (e.g., Blog Posts, Products).
- Build Canvas: Drag elements from the Library into the Viewport.
- Link Data: Use the Inspector to map UI elements to your data fields.
- Deploy: Click "Publish" to serialize your design and view it in the Live Preview mode.
Aditya Pachauri - Lead Architect & Techsurf Runner-Up
Lumina Studio was recognized for its architectural modularity, visual excellence, and engineering depth at the Techsurf 2025 competition.
Built with ❤️ and Precision.