💡 Inspiration The inspiration behind Lumora came from the growing gap between web development agility and native mobile performance. React developers can iterate at lightning speed, while Flutter developers enjoy unmatched performance — yet bridging these two worlds remains cumbersome. We wanted to combine React’s declarative UI model with Flutter’s native rendering engine, allowing developers to author in React/TypeScript while targeting Flutter for production.
⚙️ What It Does Lumora is a mobile-first Flutter development framework that lets you:
Write UI in React + TypeScript/TSX. Instantly preview native Flutter UI on real devices via QR code and live synchronization. Generate production-ready Dart code with deterministic state management. It offers two runtime modes: Fast Path — interprets JSON UI schemas at runtime for instant previews. Native Path — compiles TSX to Dart for full native performance and reliability.
🧱 How We Built It Lumora is composed of several coordinated subsystems: Dev-Proxy (Node.js) – manages sessions, generates QR codes, and maintains live WebSocket connections between editors and Flutter clients. Flutter Dev Client – renders live UI updates from JSON schemas using the Flutter engine. Codegen Tool – translates React TSX components into Flutter-compatible Dart code, complete with the chosen state management adapter (Bloc, Riverpod, Provider, or GetX).
Kiro Core – the schema interpretation engine that powers real-time previews. Kiro UI Tokens – provides consistent design primitives for layout, color, and typography.
We engineered Lumora with modularity and speed in mind, ensuring every component could operate independently or together within the development loop.
⚔️ Challenges We Ran Into
Designing a deterministic codegen pipeline that preserves UI fidelity between React and Flutter. Achieving instant synchronization with minimal latency across WebSocket connections. Balancing JSON schema flexibility with runtime performance in the Fast Path mode. Managing the complexity of state management adapters while maintaining consistent APIs.
🏆 Accomplishments That We’re Proud Of
Successfully built a live, bidirectional editing loop between React editors and Flutter devices. Enabled real-time previews without any native rebuilds or restarts. Designed a scalable architecture supporting multiple state management paradigms. Achieved TSX-to-Dart codegen that produces human-readable and production-grade Flutter code.
📚 What We Learned
How to bridge two fundamentally different UI ecosystems (React’s virtual DOM vs Flutter’s widget tree). The importance of runtime schema consistency for reliable previews. Deep understanding of code generation pipelines and AST transformations. How to optimize WebSocket messaging for low-latency developer feedback loops.
Log in or sign up for Devpost to join the conversation.