<p align="center"> <img src="https://raw.githubusercontent.com/codeyousef/summon/main/assets/logo.png" alt="Summon logo" width="200" /> <br> <a href="https://x.com/DeepIssueMassaj">x.com/@DeepIssueMassaj</a> </p>

Summon

📦 IMPORTANT: Group ID Migration (November 2025)

Summon is migrating from io.github.codeyousef to codes.yousef!

• Version 0.5.0.0 will be the LAST release under io.github.codeyousef
• Please switch your dependencies to codes.yousef as soon as possible

Action Required: Update your dependencies from:

implementation("io.github.codeyousef:summon:0.6.2.2")  // Old - deprecated

To:

implementation("codes.yousef:summon:0.6.2.2")  // New - use this!

See Migration Guide below for details.

⚠️ Alpha Status: Summon is currently in alpha development and actively seeking testers and feedback. While core functionality is stable, APIs may change between releases. We welcome early adopters and contributors! Please report issues and share your experience.

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.

Project Structure

This monorepo contains:

• summon-core/ - The main Summon library
• summon-cli/ - Command-line tool for project generation
• diagnostics/ - Stress tests, leak detectors, and JMH benchmarks
• docs/ - Documentation and guides

📝 Examples: Example projects showing various integrations have been moved to a separate repository for cleaner core library maintenance.

🎨 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.

Features

• Cross-Platform: Build once, run on JavaScript, WebAssembly (WASM), 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
• Server-Side Rendering (SSR):
  • Complete SSR implementation with composition context management
  • State management during server rendering (remember, mutableStateOf)
  • SEO optimization with meta tags, OpenGraph, and Twitter Cards
  • Client-side hydration for interactive components
  • Production-ready performance handling 100+ components efficiently
• 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
• WebAssembly (WASM) Support:
  • Native-like performance with near-zero startup time
  • Server-side rendering with seamless client-side hydration
  • Progressive enhancement with automatic JS fallback
  • Cross-browser compatibility and progressive loading
  • Production-ready WASM with optimized bundle sizes

Component Categories

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

Input Components

• 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

Layout 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

Display Components

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

Feedback Components

• Alert - Dismissible alert messages
• Modal - Dialog system with variants (DEFAULT, ALERT, CONFIRMATION, FULLSCREEN) and sizes
• Loading & LoadingOverlay - Loading indicators with multiple animation types (SPINNER, DOTS, LINEAR, CIRCULAR)
• Toast & ToastManager - Notification system with positioning and action support
• Snackbar & SnackbarHost - Temporary notifications
• Progress & ProgressBar - Progress indicators
• Tooltip - Hover tooltips

Navigation Components

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

Utility Components

• Div - Basic container element
• AccessibleElement - Accessibility wrapper

Network and Communication

• WebSocket - Cross-platform WebSocket with auto-reconnection and lifecycle management
• HttpClient - Comprehensive HTTP client with JSON and form data support
• Storage - Local, session, and memory storage abstraction with TypedStorage wrapper

Inspiration

Summon draws inspiration from several excellent projects:

• Kobweb - Modern full-stack web framework built on Compose HTML. Kobweb's elegant API design shaped Summon's philosophy.
• Spring Petclinic WASM (Sébastien Deleuze) - Pioneered SSR + WASM hydration patterns, proving WASM maintains SEO compatibility.
• Kilua (Robert Jaros) - First production-ready Kotlin/WASM framework with comprehensive SSR capabilities.
• kotlinx-browser & kotlinx.html - Official Kotlin libraries providing WASM browser APIs and type-safe HTML generation.

Summon stands on the shoulders of these giants and the broader Kotlin/WASM community.

Documentation

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

API Reference

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