A small introduction to Slint

I've been working with Slint in my desktop app, Flinch, and I wanted to write a small introduction to what it is and what its code looks like.

I'll keep the example small. There are plenty of things involved in a complete application, but a counter is enough to show the basic pieces without getting lost in the process.

What is Slint?

Slint is a toolkit for building graphical interfaces. It has its own declarative UI language, with application logic written in a supported language such as Rust, C++, JavaScript, or Python. It can be used for desktop applications and embedded devices, among other targets.

Declarative means the code describes the interface and the relationships between its values. Instead of writing each step needed to update a label, a binding describes what that label should display.

I'll use Rust for the application code here. The interface itself is written in Slint.

A window with some text

This is a complete UI declaration:

1export component App inherits Window {2    width: 320px;3    height: 180px;4    title: "Hello, Slint";5
6    Text {7        text: "Hello from Slint!";8        horizontal-alignment: center;9        vertical-alignment: center;10    }11}

The component is called App, and it inherits from Window. Inside it is a Text element. Its properties set the content and alignment.

The nested structure might look familiar from other UI tools, but this is Slint's own language. The declaration can live in a .slint file, or inside a Rust macro, which I'll use a little later.

Adding a button

A label on its own doesn't show much about interaction. Let's give it something to display:

1import { Button, VerticalBox } from "std-widgets.slint";2
3export component App inherits Window {4    width: 320px;5    height: 180px;6    title: "A small counter";7
8    property <int> count: 0;9
10    VerticalBox {11        padding: 20px;12        spacing: 12px;13
14        Text {15            text: "Count: \{root.count}";16            horizontal-alignment: center;17        }18
19        Button {20            text: "Add one";21
22            clicked => {23                root.count += 1;24            }25        }26    }27}

The import brings in two standard widgets. VerticalBox arranges its children vertically, and Button provides the clickable control.

The count property starts at zero. When the button is clicked, its handler adds one to that value. root refers to the root element of the component, so root.count accesses the counter declared on App.

The interesting part is the label:

1text: "Count: \{root.count}";

The expression inside \{...} inserts the property's value into the string. Slint tracks that dependency, so changing count also updates the text. There isn't another instruction telling the label to refresh.

The property binding examples show this with other controls too, including a slider whose value is displayed in a label.

Calling Rust from the interface

For this counter, the behavior can stay entirely in Slint. A real button might need to save settings, load a file, or start some application operation. That's where a callback connects the UI to Rust.

Here's the same counter with its increment handled in Rust. Start with a new Cargo project and add Slint. This example uses version 1.18.1:

1cargo new slint-counter2cd slint-counter3cargo add slint@=1.18.1

Replace the contents of src/main.rs with:

1slint::slint! {2    import { Button, VerticalBox } from "std-widgets.slint";3
4    export component App inherits Window {5        width: 320px;6        height: 180px;7        title: "A small counter";8
9        in-out property <int> count: 0;10        callback increment();11
12        VerticalBox {13            padding: 20px;14            spacing: 12px;15
16            Text {17                text: "Count: " + root.count;18                horizontal-alignment: center;19            }20
21            Button {22                text: "Add one";23                clicked => { root.increment(); }24            }25        }26    }27}28
29fn main() -> Result<(), slint::PlatformError> {30    let app = App::new()?;31    let weak = app.as_weak();32
33    app.on_increment(move || {34        if let Some(app) = weak.upgrade() {35            app.set_count(app.get_count().saturating_add(1));36        }37    });38
39    app.run()40}

Running cargo run builds the application and opens the window.

The label uses "Count: " + root.count here. It still updates when the count changes, but avoids \{...} interpolation, which isn't supported inside the Rust macro. Rust reads those strings first and rejects the escape sequence.

The in-out declaration exposes the property for reading and writing from application code. Slint generates get_count() and set_count() for it, and on_increment() lets Rust supply the callback's behavior.

The callback captures a weak handle to the component. Capturing a strong handle here would create a reference cycle: the component owns the handler, which would keep the component alive. Upgrading the weak handle gives access while the component still exists.

The question marks propagate errors from creating or running the interface. This Rust version also uses saturating_add so the counter stops at the integer limit instead of overflowing.

These methods are covered in the Rust integration documentation. For a larger interface, the UI can move into separate .slint files compiled through a build script. Putting everything in one file just keeps this example easier to follow.

Trying it out: SlintPad

The Slint-only counter can also be tried in SlintPad, without setting up the Rust project. Paste the example from "Adding a button" into the editor (or simply click here), then change a few properties and see what happens.

There's plenty more to Slint, but I'll leave it here for this introduction. The documentation linked above goes further if this small example has made you curious.

Thanks for reading, see you next time!