Summon is a powerful, type-safe frontend framework for Kotlin Multiplatform that brings the elegance of Jetpack Compose to both browser and JVM environments. Build beautiful, responsive applications with a declarative syntax that feels natural to Kotlin developers.

🎨 Type-safe styling with an intuitive modifier API inspired by Compose.

🧩 Component-based architecture for maximum reusability and maintainability.

🔄 Reactive state management that automatically updates your UI when data changes.

Summon combines the best ideas from modern frontend frameworks like React, Vue, and Next.js with the declarative UI patterns of Jetpack Compose and SwiftUI, while leveraging Kotlin's powerful type system to catch errors at compile time rather than runtime. Whether you're building a simple website or a complex web application, Summon provides the tools you need to create polished, professional user interfaces with less code and fewer bugs.

• Cross-Platform: Build once, run on both JavaScript and JVM platforms
• Component-Based: Create reusable UI components with a declarative syntax
• Type-Safe: Leverage Kotlin's type system for safer UI development with compile-time checks
• Enhanced Styling System:
  • Flexible and powerful styling using a comprehensive modifier API
  • Type-safe CSS properties with enum support for values like BorderStyle, Alignment, etc.
  • Numeric extensions for CSS units (px, rem, em, etc.) for cleaner code
  • Comprehensive gradient support with both linear and radial options
  • Extensive color system with Material Design and Catppuccin palettes
• Flexible Layout System:
  • Powerful flexbox layout with alignment controls
  • Row and Column components with intuitive alignment modifiers
  • Grid layout support with comprehensive controls
• State Management: Simple yet powerful reactive state management solutions
• Next.js-Style Routing: File-based routing with automatic page discovery and code generation
• Lifecycle Aware: Built-in lifecycle management with side effects and cleanup
• Framework Interoperability: Integrate with existing frameworks like Quarkus, Ktor, and Spring Boot
• Security: Comprehensive JWT authentication and role-based access control (RBAC)
• Accessibility: Built-in accessibility features with ARIA support for inclusive applications
• Animation and Transitions:
  • Smooth animations with keyframes support
  • CSS transitions with type-safe timing functions and properties
  • Transform operations for scaling, rotation, and translation
• SSR Support: Server-side rendering capabilities for improved performance
• Enhanced Theme System:
  • Flexible theming with dark mode support
  • Type-safe theme properties for typography, spacing, colors, and more
  • Easy theme switching at runtime
• Internationalization: Full i18n support with RTL layouts for languages like Arabic and Hebrew

Recent enhancements to Summon include:

• Enhanced Theme System with typed theme classes for more type-safe access
• Improved Modifier API with type-safe CSS properties and enum support
• Comprehensive Border API with support for individual sides and properties
• Enhanced Flexbox Layout with alignment controls for Row and Column components
• Extensive Color System with Material Design and Catppuccin palettes
• Gradient Support for both linear and radial gradients with flexible options
• Animation Enhancements with keyframes and transition support
• Improved Documentation with comprehensive examples and API references

Summon provides a comprehensive set of UI components organized into logical categories:

• TextField - Single-line text input
• TextArea - Multi-line text input
• Button - Clickable button with various styles
• Checkbox - Checkbox input with label
• RadioButton - Radio button for single selection
• Switch - Toggle switch component
• Select - Dropdown selection component
• Slider - Single value slider
• RangeSlider - Dual-handle range slider
• DatePicker - Date selection component
• TimePicker - Time selection component
• FileUpload - File upload with drag & drop support
• Form & FormField - Form management components

• Row - Horizontal layout with alignment controls
• Column - Vertical layout with alignment controls
• Box - Container with positioning capabilities
• Grid - CSS Grid layout component
• Spacer - Flexible spacing component
• Divider - Visual separator
• Card - Elevated container with shadow
• AspectRatio - Maintains aspect ratio for content
• ExpansionPanel - Collapsible/expandable panel
• LazyColumn & LazyRow - Virtualized lists for performance
• ResponsiveLayout - Responsive layout utilities

• Text - Text display with styling
• Image - Image display component
• Icon - Icon component with various sources
• Badge - Small status indicator

• Alert - Dismissible alert messages
• Snackbar & SnackbarHost - Temporary notifications
• Progress & ProgressBar - Progress indicators
• Tooltip - Hover tooltips

• Link - Navigation links
• TabLayout - Tab-based navigation

• Div - Basic container element
• AccessibleElement - Accessibility wrapper

Summon is proudly inspired by Kobweb, a modern framework for full stack web apps in Kotlin built upon Compose HTML. Kobweb's elegant API design and approach to creating web applications using Kotlin has been instrumental in shaping Summon's philosophy. We highly recommend checking out Kobweb if you're looking for a mature, feature-rich solution for Kotlin web development.

For detailed documentation, please check the docs directory:

• Components - Learn about Summon's built-in UI components
• Routing - Set up navigation in your application with Next.js-style file-based routing
• File-Based Routing - Next.js-style file-based routing system
• State Management - Manage application state effectively
• Styling - Apply styles to your components
• Integration Guides - Integrate with existing frameworks
• Security - Authentication and authorization features
• Accessibility and SEO - Build accessible and SEO-friendly applications
• Internationalization - Add multi-language support with RTL layouts

Comprehensive API reference documentation is available in the docs/api-reference directory:

• Core API - Core interfaces and classes
• Components API - Built-in UI components
• Modifier API - Styling and layout modifiers
• State API - State management utilities
• Routing API - Navigation and routing
• Effects API - Side effects and lifecycle management
• Events API - Event handling and listeners
• Animation API - Animations, transitions, and keyframes
• Theme API - Theming and styling system
• Color API - Color system with Material Design and Catppuccin palettes
• Focus Management API - Focus management and keyboard navigation
• Validation API - Form validation and input validation
• Security API - Security features and access control
• Authentication API - Authentication providers and JWT integration
• Accessibility API - Accessibility features and ARIA support
• SEO API - SEO features and meta tags
• Internationalization API - Multi-language and RTL layout support

Add Summon to your project dependencies from GitHub Packages:

repositories {
    maven {
        url = uri("https://maven.pkg.github.com/codeyousef/summon")
        credentials {
            username = project.findProperty("gpr.user") as String? ?: System.getenv("GITHUB_ACTOR")
            password = project.findProperty("gpr.key") as String? ?: System.getenv("GITHUB_TOKEN")
        }
    }
}

// Dependencies same as above

Note: GitHub Packages requires authentication. Add your credentials to ~/.gradle/gradle.properties:

gpr.user=YOUR_GITHUB_USERNAME
gpr.key=YOUR_GITHUB_TOKEN

Generate a GitHub token with read:packages permission at https://github.com/settings/tokens