Powerful type-safe frontend framework delivers reactive state management, component-based architecture, and comprehensive styling for building elegant, responsive applications with declarative syntax and enhanced UI capabilities.
📦 IMPORTANT: Group ID Migration (November 2025)
Summon is migrating from
io.github.codeyouseftocodes.yousef!
- Version 0.5.0.0 will be the LAST release under
io.github.codeyousef- Please switch your dependencies to
codes.yousefas soon as possibleAction Required: Update your dependencies from:
implementation("io.github.codeyousef:summon:0.6.2.2") // Old - deprecatedTo:
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.
This monorepo contains:
summon-core/ - The main Summon librarysummon-cli/ - Command-line tool for project generationdiagnostics/ - Stress tests, leak detectors, and JMH benchmarksdocs/ - 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.
Summon provides a comprehensive set of UI components organized into logical categories:
Summon draws inspiration from several excellent projects:
Summon stands on the shoulders of these giants and the broader Kotlin/WASM community.
For detailed documentation, please check the docs directory:
Comprehensive API reference documentation is available in the docs/api-reference directory:
The Summon CLI helps you quickly scaffold new projects and generate components.
Download the latest JAR from GitHub Releases:
# Download summon-cli-0.6.2.0.jar
# Run commands directly
java -jar summon-cli-0.6.2.0.jar init my-app
java -jar summon-cli-0.6.2.0.jar --help
git clone https://github.com/codeyousef/summon.git
cd summon
./gradlew :summon-cli:shadowJar
java -jar summon-cli/build/libs/summon-cli-0.6.2.0.jar init my-app
# Let Summon CLI prompt for stack + backend
java -jar summon-cli-0.6.2.0.jar init portal
# Or skip the prompts entirely
java -jar summon-cli-0.6.2.0.jar init landing --mode=standalone --here
java -jar summon-cli-0.6.2.0.jar init portal --mode=fullstack --backend=ktor
cd portal ./gradlew build ./gradlew run # Ktor full-stack projects
cd ../portal-spring ./gradlew build ./gradlew bootRun # Spring Boot full-stack projects
cd ../portal-quarkus ./gradlew build ./gradlew unitTest # Lightweight backend checks ./gradlew quarkusDev # Hot reload backend + Summon UI
cd ../landing ./gradlew jsBrowserDevelopmentRun # Standalone browser project
### Summon Library
Add Summon to your project dependencies from Maven Central:
```kotlin
repositories {
mavenCentral()
}
dependencies {
// ⚠️ NEW GROUP ID - Use codes.yousef (not io.github.codeyousef)
// For JVM projects (Ktor, Spring Boot, Quarkus)
implementation("codes.yousef:summon-jvm:.")
("codes.yousef:summon-js:.")
("codes.yousef:summon-wasm-js:.")
("codes.yousef:summon:.")
}
📦 Migration Note: If you're upgrading from an older version, change
io.github.codeyouseftocodes.yousefin your dependencies. Both group IDs will be published until version 0.5.0.0 for compatibility.
Note: No authentication required - Summon is available directly from Maven Central!
We're transitioning from io.github.codeyousef to codes.yousef to:
codes.yousef)In your build.gradle.kts, change:
// ❌ OLD - Don't use
dependencies {
implementation("io.github.codeyousef:summon:0.4.7.0")
}
To:
// ✅ NEW - Use this
dependencies {
implementation("codes.yousef:summon:0.6.2.0")
}
If you have any hardcoded imports (unlikely), update:
// ❌ OLD
import io.github.codeyousef.summon.*
// ✅ NEW
import codes.yousef.summon.*
Note: For most users, you don't need to change imports - they're handled automatically by your dependencies.
Run ./gradlew build to ensure everything compiles correctly.
codes.yousefIf you encounter issues during migration:
./gradlew clean./gradlew --refresh-dependenciesSummon uses a centralized version management approach to ensure consistency across the main project and example projects. The version information is defined in a single place and referenced from all other places.
For more information, see VERSIONING.md.
Summon 0.4.0.0 introduces comprehensive WebAssembly support, bringing near-native performance to web applications while maintaining full compatibility with server-side rendering and JavaScript fallbacks.
Create a new project with the Summon CLI, then enable the WASM target using the steps that follow:
# Download the CLI JAR from releases first, then run:
java -jar summon-cli-0.6.2.0.jar init my-wasm-app --mode=standalone
// build.gradle.kts
kotlin {
wasmJs {
moduleName = "my-wasm-app"
browser {
commonWebpackConfig {
outputFileName = "my-wasm-app.js"
}
}
binaries.executable()
}
}
dependencies {
implementation("codes.yousef:summon-wasm-js:0.6.2.0")
}
The Summon CLI provides comprehensive WASM development tools:
# Build WASM for development
./gradlew wasmJsBrowserDevelopmentRun
# Build optimized WASM for production
./gradlew wasmJsBrowserProductionWebpack
# Run WASM development server with hot reload
./gradlew wasmJsBrowserDevelopmentRun --continuous
# Analyze WASM bundle size and performance
./gradlew wasmJsBrowserDistribution
Summon provides production-ready Server-Side Rendering capabilities for improved SEO, faster initial page loads, and better user experience. The SSR implementation includes full composition context management, state handling, and client-side hydration.
SSR works seamlessly with popular JVM frameworks:
See our integration guides for detailed framework-specific examples.
For maintainers: Publishing instructions are available at docs/private/publishing.md.
Summon aims to give back to the Kotlin/WASM community by:
Together, we're building the future of web development with Kotlin! 🚀
remember, mutableStateOf)| Version | io.github.codeyousef | codes.yousef | Notes |
|---|
| 0.4.8.7 | ✅ Published | ✅ Published | Both available |
| 0.4.9.0 | ✅ Published | ✅ Published | Both available |
| 0.5.8.3 | ✅ Published | ✅ Published | Both available |
| 0.5.0.0 | ✅ FINAL | ✅ Published | Last version on old group |
| 0.6.2.0+ | ❌ Not published | ✅ Published | New group only |
// src/wasmJsMain/kotlin/Main.kt
import codes.yousef.summon.annotation.Composable
import codes.yousef.summon.components.display.Text
import codes.yousef.summon.components.input.Button
import codes.yousef.summon.components.layout.Column
import codes.yousef.summon.modifier.Modifier
import codes.yousef.summon.runtime.wasmMain
import codes.yousef.summon.state.mutableStateOf
import codes.yousef.summon.runtime.remember
fun App() {
val counter = remember { mutableStateOf(0) }
Column(modifier = Modifier()) {
Text("WASM Counter: ${counter.value}", modifier = Modifier())
Button(
onClick = { counter.value++ },
label = "Increment",
modifier = Modifier()
)
}
}
fun main() {
wasmMain {
App()
}
}
<!-- index.html -->
<html>
<head>
<meta charset="UTF-8">
<title>My WASM App</title>
</head>
<body>
<div id="root">
<!-- Server-rendered content for SEO -->
<div>Loading...</div>
</div>
<!-- Progressive WASM loading with JS fallback -->
<script src="wasm-loader.js"></script>
</body>
</html>
| Platform | Bundle Size | Load Time | Runtime Performance |
|---|
| WASM | ~450KB | ~80ms | ~95% native |
| JavaScript | ~380KB | ~120ms | ~60% native |
| JVM | N/A | N/A | ~100% native |
import codes.yousef.summon.annotation.Composable
import codes.yousef.summon.components.display.Text
import codes.yousef.summon.components.layout.Column
import codes.yousef.summon.modifier.Modifier
import codes.yousef.summon.runtime.PlatformRenderer
import codes.yousef.summon.runtime.remember
import codes.yousef.summon.state.mutableStateOf
// Create a renderer instance
val renderer = PlatformRenderer()
fun MyApp() {
val counter = remember { mutableStateOf(0) }
Column(modifier = Modifier()) {
Text("Server-Rendered Counter: ${counter.value}", modifier = Modifier())
Text("This content is generated on the server!", modifier = Modifier())
}
}
// Render to HTML string
val html = renderer.renderComposableRoot {
MyApp()
}
// The generated HTML includes proper document structure:
// <!DOCTYPE html>
// <html>
// <head>...</head>
// <body>
// <div>Server-Rendered Counter: 0</div>
// <div>This content is generated on the server!</div>
// </body>
// </html>
import code.yousef.summon.ssr.*
// High-level utility for complete page rendering
val html = ServerSideRenderUtils.renderPageToString(
rootComposable = { MyApp() },
initialData = mapOf("userId" to "123", "theme" to "dark"),
includeHydrationScript = true
)
// With custom SEO metadata
val context = RenderContext(
enableHydration = true,
seoMetadata = SeoMetadata(
title = "My Awesome App",
description = "A server-rendered Kotlin app built with Summon",
keywords = listOf("kotlin", "ssr", "web", "multiplatform"),
openGraph = OpenGraphMetadata(
title = "My Awesome App",
description = "Server-side rendered with Summon",
type = "website",
url = "https://myapp.com",
image = "https://myapp.com/og-image.jpg"
)
)
)
val seoOptimizedHtml = renderer.renderComposableRootWithHydration {
MyApp()
}
Surfaced from shared tags and platforms — no rankings paid for.