Composable web framework enabling modern web application development with declarative UI components, state management, server-side rendering, and support for WebAssembly and JavaScript targets.
Composable web framework for Kotlin/Wasm and Kotlin/JS.
Kilua allows you to build modern web applications with the Kotlin language.
It is powered by the Compose Runtime and is similar to the compose-html library. It gives you clean, modular API to create declarative UI components and manage their state. Unlike compose-html, Kilua supports both Kotlin/Wasm and Kotlin/JS targets. It also provides a lot of ready to use components for many typical web application use cases.
Kilua is a kind of successor to my KVision framework. Writing Kilua applications should be
familiar to both Compose users (@Composable functions, state management, coroutines/flow integration) and
KVision users (component based API, allowing some imperative, direct ways to interact with the UI components).
Kilua is being actively developed. Please create an issue for any bugs or feature requests. Contributions and PRs are welcomed. All artifacts are published to Maven Central.
Kilua website contains a comprehensive development guide.
Current API documentation is published at https://rjaros.github.io/kilua/api/.
Different example applications can be found in the examples directory, including fully compatible TodoMVC and Realworld.io (with SSR) implementations.
To build the examples, you need to have JDK 21 or later installed.
The following tasks are available from the root project level:
./gradlew -t :examples:[exampleName]:jsBrowserDevelopmentRun - run the webpack dev server in continuous build mode for JS target on http://localhost:3000For fullstack and SSR examples additional tasks are available:
To run packaged fullstack or SSR example just use java -jar [exampleName]-[version].jar command.
Note: use gradlew.bat instead of ./gradlew on Windows operating system.
If you want to start your own project, just copy the Kilua template project.
This is a simple "Hello, world!" application written in Kilua:
Kilua is the first Kotlin/Wasm and Kotlin/JS web framework supporting true Server-Side Rendering. SSR is a crucial concept in modern web development that enhances user experience and boosts SEO performance. Kilua SSR support is based on the possibility to run exactly the same application code both in the browser and in Node.js environment. What's more, you can easily use WASM compilation target for much better performance.
If you like this project, please give it a star on GitHub. Thank you!
./gradlew -t :examples:[exampleName]:wasmJsBrowserDevelopmentRun - run the webpack dev server in continuous build mode for Wasm target on http://localhost:3000./gradlew :examples:[exampleName]:jsBrowserDistribution - build production application for JS target to examples/[exampleName]/build/dist/js/productionExecutable directory./gradlew :examples:[exampleName]:wasmJsBrowserDistribution - build production application for Wasm target to examples/[exampleName]/build/dist/wasmJs/productionExecutable directory./gradlew :examples:[exampleName]:jvmRun - run the backend application for development on http://localhost:8080./gradlew :examples:[exampleName]:jarWithJs - build and package the production application with JS frontend to examples/[exampleName]/build/libs directory./gradlew :examples:[exampleName]:jarWithWasmJs - build and package the production application with Wasm frontend to examples/[exampleName]/build/libs directory./gradlew :examples:[exampleName]:exportWithJs - export static site with JS frontend to examples/[exampleName]/build/site directory./gradlew :examples:[exampleName]:exportWithWasmJs - export static site with Wasm frontend to examples/[exampleName]/build/site directoryimport androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import dev.kilua.Application
import dev.kilua.CoreModule
import dev.kilua.compose.root
import dev.kilua.html.button
import dev.kilua.html.div
import dev.kilua.html.unaryPlus
import dev.kilua.startApplication
class App : Application() {
override fun start() {
root("root") {
var state by remember { mutableStateOf("Hello, world!") }
div {
+state
}
button("Add an exclamation mark") {
onClick {
state += "!"
}
}
}
}
}
fun main() {
startApplication(::App, CoreModule)
}
Surfaced from shared tags and platforms — no rankings paid for.