Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Augani/kael/llms.txt

Use this file to discover all available pages before exploring further.

Kael applications are built around a simple pattern: you define a struct to hold your application state, implement the Render trait on it, and open a window. The framework handles the rest — reactive updates, GPU rendering, and event dispatch — so you can focus on your UI logic. This guide walks you through that pattern from scratch.
1

Add Kael to Cargo.toml

Create a new Rust binary project and add Kael as a dependency. Kael is available on crates.io and via its Git repository.
[dependencies]
kael = "0.5.1"
If you are on Linux, install the required system libraries before building. See the installation guide for the full list.
2

Implement Render on your application struct

Every Kael window is backed by a struct that implements the Render trait. Your struct holds the application state; render returns the element tree Kael displays each frame.The example below is a counter: clicking the “Increment” label increments the count and Kael automatically re-renders the window.
main.rs
use kael::*;

struct Counter {
    count: i32,
}

impl Render for Counter {
    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        div()
            .flex()
            .flex_col()
            .gap_2()
            .child(format!("Count: {}", self.count))
            .child(
                div()
                    .cursor_pointer()
                    .child("Increment")
                    .on_click(cx.listener(|this, _, _, _| {
                        this.count += 1;
                    })),
            )
    }
}

fn main() {
    Application::new().run(|cx| {
        cx.open_window(WindowOptions::default(), |_, cx| {
            cx.new(|_| Counter { count: 0 })
        })
        .unwrap();
    });
}
A few things to note:
  • div() is the primary layout element. Chain style methods like .flex(), .flex_col(), and .gap_2() to control layout and spacing.
  • .child() accepts strings, formatted strings, and other elements. Children are rendered in order.
  • cx.listener(...) creates a closure that receives a mutable reference to your struct, letting you update state directly. Kael schedules a re-render automatically after the handler runs.
  • cx.new(|_| ...) registers your struct as a managed entity. The returned handle is what open_window uses to drive the render cycle.
3

Run the application

Build and run your project with Cargo:
cargo run
A native window opens displaying “Count: 0” and an “Increment” label. Clicking the label increments the counter in real time.

​
Explore the examples

The Kael repository includes a set of runnable examples that cover animations, webviews, form controls, and more. Clone the repository and run any example with: 
cargo run -p kael --example hello_world
cargo run -p kael --example animation
cargo run -p kael --example recycling_list
cargo run -p kael --example webview_demo
cargo run -p kael --example form_controls
The hello_world example renders a styled greeting with colored boxes, demonstrating border, shadow, and text color utilities. The animation example shows how to apply keyframe animations to SVG elements using Animation::new and easing functions like bounce(ease_in_out).
Examples are defined in crates/kael/examples/ in the repository. You need to clone the repository to run them — they are not included when depending on the published crate.

​
Next steps

Installation

Configure Cargo features and install Linux system dependencies

Entities and context

Understand how Kael’s entity model drives reactive state

Elements and rendering

Learn the full element API and the render lifecycle

Layout and styling

Master flexbox layout, spacing, color, and typography utilities

Build docs developers (and LLMs) love

Get started for freeTalk to us