Kilua guide
  • Kilua Guide
  • Introduction
  • Compose world
  • 1. Getting Started
    • Setting Up
    • Creating a New Application
    • Modules
    • Development Workflow
    • Hot Module Replacement
    • Debugging
    • Building For Production
  • 2. Frontend Development Guide
    • Composable functions
    • Browser APIs
    • Interoperability with JavaScript
    • Working with Compose
    • Rendering HTML
    • Type-safe CSS properties
    • Resources
    • Icons
    • Routing
    • Layout containers
    • Events
    • Forms
    • Form controls
    • SVG images
    • Drag and drop
    • Internationalization
    • REST client
    • Markdown and sanitization
    • Using Bootstrap
    • Using TailwindCSS
    • Using Tabulator
    • Animation
    • Using Jetpack Compose API
  • 3. Fullstack Components
  • Useful References
Powered by GitBook
On this page
  • State management
  • Lifecycle and side-effects
  1. 2. Frontend Development Guide

Working with Compose

PreviousInteroperability with JavaScriptNextRendering HTML

Last updated 6 months ago

State management

Kilua is based on Compose Multiplatform runtime and you can easily use all Compose state management features. In short, you can create a mutable state using Compose functions and the UI content which is created based on this state will be automatically updated. There is no need for any manual bindings or optimizations, by default only the parts of the UI which are using the changed state will be updated. If you are not familiar with Compose you should definitely start with the official guide -

This would be a standard "counter" example created with Kilua

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import dev.kilua.compose.root
import dev.kilua.html.button
import dev.kilua.html.div

root("root") {
    var counter by remember { mutableStateOf(0) }

    div {
        +"Counter value: $counter"
    }

    div {
        button("Increment counter") {
            onClick {
                counter++
            }
        }
        button("Decrement counter") {
            onClick {
                counter--
            }
        }
    }
}

Lifecycle and side-effects

Kilua uses the same architectural model as all other Compose based frameworks. This includes the concepts of a composition, recompositions, compsables' lifecycle and side-effects. You should get familiar with these concepts with the official Compose guides:

https://developer.android.com/develop/ui/compose/state
https://developer.android.com/develop/ui/compose/lifecycle
https://developer.android.com/develop/ui/compose/side-effects