OmniUI
OmniUI is a visual development tool for creating UI components that work across desktop and web platforms. It bridges modern web interfaces with desktop frameworks, starting with Qt integration. The system includes visual tools, real-time synchronization, and optimization paths to C++.
Bridge the UI
Divide
OmniUI tackles a significant challenge in software development: the disconnect between modern web UI frameworks and desktop application interfaces. Many organizations maintain desktop applications built with frameworks like Qt, which provide robust functionality but often lag behind web frameworks in UI capabilities.
Complete rewrites of these applications to web technologies are typically too costly and risky, leaving teams stuck with outdated UI paradigms. OmniUI offers a middle path – a visual development environment that lets designers and developers create modern, responsive interfaces that can be deployed to multiple platforms, starting with Qt.
The system allows teams to modernize their interfaces incrementally, without abandoning their existing codebases. By providing a common visual language and development environment across platforms, OmniUI reduces the complexity of supporting multiple UI frameworks while still leveraging the unique capabilities of each.
Create Once, Deploy Anywhere
With OmniUI, teams can design and build UI components in a modern web environment, then deploy those same components to desktop applications. The system handles the complexities of translating between different UI paradigms, ensuring consistent appearance and behavior across platforms. This approach dramatically reduces development time and maintenance overhead, while still allowing teams to take advantage of platform-specific features when needed.
Core Features
Component Builder
Create and manage atomic component instances from a component palette with drag and drop interface. Define component properties using platform-agnostic interfaces and organize components hierarchically.
Layout Engine
Use a grid-based layout system for precise component positioning with visual resizing and positioning. Group and nest components with a basic constraint system for layout management.
Theme System
Define and manage theme tokens for colors, spacing, and typography with a platform-agnostic structure. Preview themes in real-time and switch between them with ease.
Property Editor
Edit component properties with a visual interface that provides real-time updates. Use type-safe property definitions with validation to ensure correctness.
Component Binding
Create property-to-property connections between components with multi-condition support and conditional value matching. Transform functions enable complex data flows between components.
Development Tools
Visualize component trees, inspect component state, and preview UI in real-time. Monitor performance and preview how UI would appear in different target platforms.
Component Architecture
OmniUI uses a robust object-oriented architecture designed for flexibility, reusability, and clean separation of concerns. The diagram below illustrates the core component structure.
BaseDefinition
Abstract base class for all component definitions that can be stored in registries. Contains core identity properties and tracking metadata.
ComponentDefinition
Extends BaseDefinition to define a component type with configuration for content, layout, and styling. Can contain child components when isLayout is true.
ComponentConfig
Configuration object containing content, layout, and style settings. Handles platform-specific overrides and theme application.
BaseInstance
Abstract base class for component instances that live in layouts. Contains instance-specific identity and state information.
ComponentInstance
Extends BaseInstance to create a usable instance of a ComponentDefinition. Contains overrides that modify the base definition.
LayoutContainer
Manages a collection of component instances within a grid-based layout. Handles positioning, resizing, and component management.
Key Relationships:
- ComponentInstance references a ComponentDefinition through definitionId
- ComponentDefinition can contain a LayoutContainer when it acts as a container
- LayoutContainer manages multiple ComponentInstances
- All configs (Content, Layout, Style) support platform-specific overrides
- Export: Template-based code generation
Development
Process
OmniUI follows a structured development process with a focus on component architecture and state management. The development roadmap includes:
Foundation & Architecture
Core type system, state management foundation, and component registry
Builder Infrastructure
Component canvas, drag-and-drop system, grid-based layout engine
Core Functionality
Property editing, component binding, theme management
Platform Integration
Component export, platform-specific validation, Qt bridge
Current Sprint Focus
Recent Milestones
- Grid system with component snapping
- Component palette with drag-and-drop
- Local storage persistence
Looking Forward
The OmniUI vision extends beyond its current implementation, with plans for comprehensive UI development tools that bridge the gap between different UI frameworks and platforms.
Creator Tools
- Theme creator interface
- Layout templates system
- Custom component creation
- Advanced layout constraints
- Visual debugging tools
Platform Integration
- Qt-specific optimizations
- Platform preview system
- Component platform validation
- Platform bridges and adapters
- Export configurations
Collaboration
- Real-time collaborative editing
- User presence system
- Comments and annotations
- Version control for layouts
- Component marketplace
Professional Tools
- Performance profiling
- Memory usage monitoring
- Component versioning
- Advanced state management
- Plugin system
Ultimately, OmniUI aims to become a comprehensive UI development platform that bridges the gap between different UI frameworks, enabling teams to create beautiful, consistent interfaces that work everywhere, without sacrificing the unique capabilities of each target platform.