rjaros / kilua

Composable web framework for Kotlin/Wasm and Kotlin/JS

Kilua

Experimental web framework for Kotlin/Wasm and Kotlin/JS.

Kilua allows you to build web applications with the Kotlin language.

You can think Kilua re-implements the compose-html library with a different API based on my KVision experiences and some new, ambitious goals in mind. Writing Kilua applications should be familiar to both Compose users (@Composable functions, state management) and KVision users (component based API, allowing some imperative, direct ways to interact with the UI components).

Goals

• Modern web framework powered by Compose Runtime.
• Compile the same application code for Kotlin/Wasm and Kotlin/JS targets.
• Direct DOM manipulation without virtual DOM.
• Rendering to String with JS/Node or WasmJS/Node target (ready for SSR).
• Ready to use components for all typical web application use cases.
• Component based API (familiar to KVision users).
• Fullstack support ported from KVision.
• Modular architecture.

Project status

All main concepts have been tested and the development is now focused on implementing new components. The project can be built and tested with single gradle tasks. Contributions and PRs are welcomed. Still no artifacts are published, but we are close to the first alpha release.

TODO

• Compose runtime integration
• Basic project architecture
• HMR support (JS target only)
• Testing environment
• Typesafe CSS style properties
• A few basic HTML tags
• A few basic form input components with StateFlow integration
• A component based on external NPM library (SplitPanel)
• Implement all standard HTML tags
• Implement all standard form input components
• Bootstrap module with basic components (tabs, toasts, dropdowns, modals etc.)
• Implement RichText form component based on Trix editor NPM library
• Implement RichDateTime form components based on Tempus Dominus NPM library
• Implement TomSelect and TomTypeahead form components based on TomSelect NPM library
• Implement support for masked inputs based on Imask NPM library
• CSS styles declarations
• Typesafe forms support with built-in validation
• Implement Tabulator component
• Routing support
• Web client
• I18n support
• Gradle plugin and KSP compiler plugin
• Fullstack support with SSR
• Code documentation
• Unit tests

Code sample

This is a simple "Hello, world!" application written in Kilua:

import 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)
}

Leave a star

If you like this project, please give it a star on GitHub. Thank you!