Slint

https://docs.slint.dev/latest/docs/slint
Admin
Slint is a declarative GUI toolkit for developing user interfaces for embedded systems and desktop...
Tokens:91,112
Snippets:1,165
Trust Score:9.5
Update:3 months ago
Show doc for...
Tokens:
Raw
### Setup Python Project Environment

Source: https://docs.slint.dev/latest/docs/slint/tutorial/getting_started

Commands to prepare the Python project directory and install dependencies.

```sh
mv slint-python-template-main memory
cd memory
```

```sh
uv sync
```

--------------------------------

### Install slint-lsp from source

Source: https://docs.slint.dev/latest/docs/slint/guide/tooling/manual-setup

Install the language server from source using the Rust toolchain.

```sh
cargo install slint-lsp
```

```sh
cargo install slint-lsp --git https://github.com/slint-ui/slint --force
```

--------------------------------

### Install slint-lsp via cargo binstall

Source: https://docs.slint.dev/latest/docs/slint/guide/tooling/manual-setup

Use cargo binstall to quickly download and install the pre-built binary.

```sh
cargo binstall slint-lsp
```

--------------------------------

### Install Runtime Dependencies on Debian

Source: https://docs.slint.dev/latest/docs/slint/guide/tooling/slint-viewer

Install necessary system libraries for the viewer to function on Debian-based Linux distributions.

```sh
sudo apt install -y libx11-xcb1 libxcb1 libxkbcommon0 libinput10 libgbm1
```

--------------------------------

### Install elf2uf2-rs flashing tool

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/embedded

Utility for flashing UF2 binaries to the Raspberry Pi Pico.

```sh
cargo install elf2uf2-rs
```

--------------------------------

### Install debug build with Gradle

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/mobile/android

Build and install the native library and APK on a connected device.

```sh
./gradlew installDebug
```

--------------------------------

### Install syntax highlighting on Linux

Source: https://docs.slint.dev/latest/docs/slint/guide/tooling/kate

Run these commands to create the directory and download the syntax highlighting XML file for Kate on Linux.

```sh
mkdir -p ~/.local/share/org.kde.syntax-highlighting/syntax/
wget https://raw.githubusercontent.com/slint-ui/slint/master/editors/kate/slint.ksyntaxhighlighter.xml -O ~/.local/share/org.kde.syntax-highlighting/syntax/slint.xml
```

--------------------------------

### Install wasm-pack

Source: https://docs.slint.dev/latest/docs/slint/tutorial/running_in_a_browser

Install the wasm-pack tool via cargo to enable WebAssembly builds.

```sh
cargo install wasm-pack
```

--------------------------------

### Basic Button Implementation

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/basic-widgets/button

A standard button example demonstrating how to handle the clicked callback to update a text label.

```slint
import { Button, VerticalBox } from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 100px;
    VerticalBox {
        label := Text {
            text: "Button not clicked";
        }
        Button {
            text: "Click Me";
            clicked => {
                label.text = " Button clicked";
            }
        }
    }
}
```

--------------------------------

### Create a grid using manual row and col properties

Source: https://docs.slint.dev/latest/docs/slint/reference/layouts/gridlayout

Shows how to achieve the same layout as the Row-based example by manually specifying row and col indices.

```slint
import { Button } from "std-widgets.slint";
export component Foo inherits Window {
    width: 200px;
    height: 100px;
    GridLayout {
        Button { row: 0; col: 1; text: "Top Right"; } // `row: 0;` could even be left out at the start
        Button { row: 1; text: "Bottom Left"; } // new row, implicitly resets column to 0
        Button { text: "Bottom Right"; } // same row, sequentially assigned column 1
    }
}
```

--------------------------------

### Install Node.js dependencies

Source: https://docs.slint.dev/latest/docs/slint/tutorial/getting_started

Command to install project dependencies via npm.

```sh
npm install
```

--------------------------------

### Basic TabWidget implementation

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/views/tabwidget

A standard usage example showing how to define a TabWidget with multiple Tab children.

```slint
import { TabWidget } from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 200px;
    TabWidget {
        Tab {
            title: "First";
            Rectangle { background: orange; }
        }
        Tab {
            title: "Second";
            Rectangle { background: pink; }
        }
    }
}
```

--------------------------------

### Basic LineEdit implementation

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/views/lineedit

A standard example showing how to include a LineEdit within a VerticalBox.

```slint
import { LineEdit, VerticalBox } from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 60px;

    VerticalBox {
        LineEdit {
            placeholder-text: "Enter text here";
        }
    }
}
```

--------------------------------

### Install Slint Viewer via Cargo

Source: https://docs.slint.dev/latest/docs/slint/guide/tooling/slint-viewer

Install the binary directly from crates.io using a Rust toolchain.

```sh
cargo install slint-viewer
```

--------------------------------

### Configure Slider properties

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/basic-widgets/slider

Examples for setting value, step, minimum, and maximum constraints on a Slider.

```slint
Slider {
    value: 50;
}
```

```slint
Slider {
    step: 1;
}
```

```slint
Slider {
    minimum: 10;
    value: 11;
}
```

```slint
Slider {
    maximum: 10;
    value: 9;
}
```

--------------------------------

### Example component and JSON data

Source: https://docs.slint.dev/latest/docs/slint/guide/tooling/slint-viewer

Example of a Slint component structure and its corresponding JSON property file.

```slint
export component Form inherits Window {
    in-out property <string> name;
    in-out property <int> age;
}
```

```json
{
    "name": "Alice",
    "age": 30
}
```

--------------------------------

### Install Slint skill via GitHub CLI

Source: https://docs.slint.dev/latest/docs/slint/guide/tooling/ai-coding-assistants

Use the GitHub CLI to install the Slint skill for specific supported agents.

```sh
# Codex
gh skill install slint-ui/ai-plugins slint --agent codex

# Claude Code
gh skill install slint-ui/ai-plugins slint --agent claude-code
```

--------------------------------

### Install slint-tr-extractor

Source: https://docs.slint.dev/latest/docs/slint/guide/development/translations

Install the tool required to extract translatable strings from .slint files.

```sh
cargo install slint-tr-extractor
```

--------------------------------

### Declarative UI Examples in React and SwiftUI

Source: https://docs.slint.dev/latest/docs/slint/guide/language/concepts/slint-language

Examples of declarative UI definitions using React JSX and SwiftUI syntax.

```jsx
function ContentView() {
  return (
    <p style={{ fontSize: '2rem', color: 'green' }}>
      Hello World
    </p>
  );
}
```

```swift
struct ContentView: View {
    var body: some View {
        Text("Hello World")
            .font(.title)
            .foregroundColor(.green)
    }
}
```

--------------------------------

### Install Slint skill for Codex

Source: https://docs.slint.dev/latest/docs/slint/guide/tooling/ai-coding-assistants

Commands to add the Slint marketplace and install the plugin within the Codex environment.

```sh
codex plugin marketplace add slint-ui/ai-plugins
codex plugin add slint@slint
```

--------------------------------

### Install xbuild for Rust Android development

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/mobile/android

Install the git version of xbuild to ensure the latest fixes are included.

```sh
cargo install --git https://github.com/rust-mobile/xbuild.git
```

--------------------------------

### Install Linux X11 dependencies

Source: https://docs.slint.dev/latest/docs/slint/guide/backends-and-renderers/backend_winit

Command to install required X11 development libraries on Debian-based Linux systems.

```sh
sudo apt install libx11-xcb-dev xinput libxcursor-dev libxkbcommon-x11-dev libx11-dev
```

--------------------------------

### Start Remote Viewer

Source: https://docs.slint.dev/latest/docs/slint/guide/tooling/slint-viewer

Initiates the viewer in remote mode to wait for a live preview connection from an editor.

```sh
slint-viewer --remote
```

--------------------------------

### Update main.rs for WebAssembly

Source: https://docs.slint.dev/latest/docs/slint/tutorial/running_in_a_browser

Add the wasm_bindgen start attribute to the main function to initialize the application in the browser.

```rust
#[cfg_attr(target_arch = "wasm32",
           wasm_bindgen::prelude::wasm_bindgen(start))]
pub fn main() {
    //...
}
```

--------------------------------

### Example Usage of a Container Component

Source: https://docs.slint.dev/latest/docs/slint/guide/language/coding/positioning-and-layouts

Demonstrates the intended usage of a component that wraps child elements.

```slint
export component MyApp inherits Window {

    BoxWithLabel {
        Text {
            // ...
        }
    }

    // ...
}
```

--------------------------------

### Install Slint skill via npx

Source: https://docs.slint.dev/latest/docs/slint/guide/tooling/ai-coding-assistants

Use the npx skills CLI to add the Slint skill to the current project.

```sh
npx skills add slint-ui/ai-plugins --skill slint
```

--------------------------------

### List DRM Outputs

Source: https://docs.slint.dev/latest/docs/slint/guide/backends-and-renderers/backend_linuxkms

Example output when setting SLINT_DRM_OUTPUT to list to identify available display devices.

```text
DRM Output List Requested:
eDP-1 (connected: true)
DP-1 (connected: false)
DP-2 (connected: false)
DP-3 (connected: true)
DP-4 (connected: false)
```

--------------------------------

### Demonstrate Slint Layout Alignment Options

Source: https://docs.slint.dev/latest/docs/slint/guide/language/coding/positioning-and-layouts

Shows various alignment properties such as stretch, start, end, center, space-between, and space-around within HorizontalLayout containers.

```slint
export component Example inherits Window {
    width: 300px;
    height: 200px;
    VerticalLayout {
        HorizontalLayout {
            alignment: stretch;
            Text { text: "stretch (default)"; }
            Rectangle { background: blue; min-width: 20px; }
            Rectangle { background: yellow; min-width: 30px; }
        }
        HorizontalLayout {
            alignment: start;
            Text { text: "start"; }
            Rectangle { background: blue; min-width: 20px; }
            Rectangle { background: yellow; min-width: 30px; }
        }
        HorizontalLayout {
            alignment: end;
            Text { text: "end"; }
            Rectangle { background: blue; min-width: 20px; }
            Rectangle { background: yellow; min-width: 30px; }
        }
        HorizontalLayout {
            alignment: start;
            Text { text: "start"; }
            Rectangle { background: blue; min-width: 20px; }
            Rectangle { background: yellow; min-width: 30px; }
        }
        HorizontalLayout {
            alignment: center;
            Text { text: "center"; }
            Rectangle { background: blue; min-width: 20px; }
            Rectangle { background: yellow; min-width: 30px; }
        }
        HorizontalLayout {
            alignment: space-between;
            Text { text: "space-between"; }
            Rectangle { background: blue; min-width: 20px; }
            Rectangle { background: yellow; min-width: 30px; }
        }
        HorizontalLayout {
            alignment: space-around;
            Text { text: "space-around"; }
            Rectangle { background: blue; min-width: 20px; }
            Rectangle { background: yellow; min-width: 30px; }
        }
    }
}
```

--------------------------------

### Upload demo to Pico 2 on Linux

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/embedded

Mounts the device and uses picotool to load the binary.

```sh
# If you're on Linux: mount the device
udisksctl mount -b /dev/sda1
# upload
picotool load -u -v -x -t elf target/thumbv8m.main-none-eabihf/release/printerdemo_mcu
```

--------------------------------

### Run C++ Application with Live Preview

Source: https://docs.slint.dev/latest/docs/slint/guide/tooling/live-preview

Execute the application build with the live preview environment variable set.

```bash
SLINT_LIVE_PREVIEW=1 cmake --build path/to/your/build
```

--------------------------------

### Install system dependencies for slint-lsp

Source: https://docs.slint.dev/latest/docs/slint/guide/tooling/manual-setup

Install required build dependencies on Debian-based systems.

```shell
sudo apt install -y build-essential libx11-xcb1 libx11-dev libxcb1-dev libxkbcommon0 libinput10 libinput-dev libgbm1 libgbm-dev
```

--------------------------------

### Initialize SystemTrayIcon and Window

Source: https://docs.slint.dev/latest/docs/slint/reference/window/systemtrayicon

Instantiates both a main window and a tray icon, wiring the tray's clicked callback to show the window.

```rust
fn main() -> Result<(), slint::PlatformError> {
    let window = MainWindow::new()?;
    let tray = ExampleTray::new()?;

    let window_weak = window.as_weak();
    tray.on_clicked(move || {
        if let Some(w) = window_weak.upgrade() {
            let _ = w.show();
        }
    });

    window.show()?;
    tray.show()?;
    slint::run_event_loop()
}
```

```cpp
int main() {
    auto window = MainWindow::create();
    auto tray = ExampleTray::create();

    auto window_weak = slint::ComponentWeakHandle(window);
    tray->on_clicked([window_weak] {
        if (auto w = window_weak.lock()) {
            (*w)->show();
        }
    });

    window->show();
    tray->show();
    slint::run_event_loop();
}
```

```js
const window = new ui.MainWindow();
const tray = new ui.ExampleTray();
tray.clicked = () => window.show();
window.show();
tray.show();
await slint.runEventLoop();
```

```python
window = module.MainWindow()
tray = module.ExampleTray()
tray.clicked = lambda: window.show()
window.show()
tray.show()
slint.run_event_loop()
```

--------------------------------

### View Help Documentation

Source: https://docs.slint.dev/latest/docs/slint/guide/tooling/slint-viewer

Displays the current list of available command-line options for the viewer.

```sh
slint-viewer --help
```

--------------------------------

### Configure C++ main entry point

Source: https://docs.slint.dev/latest/docs/slint/tutorial/getting_started

The main.cpp file includes the generated header and initializes the Slint window.

```cpp
#include "app-window.h" // generated header from ui/app-window.slint

int main(int argc, char **argv)
{
    auto main_window = MainWindow::create();
    main_window->run();
}
```

--------------------------------

### Initialize Python Application

Source: https://docs.slint.dev/latest/docs/slint/tutorial/getting_started

Entry point configuration for a Slint application using Python.

```python

import slint


class MainWindow(slint.loader.ui.app_window.MainWindow):
    pass


main_window = MainWindow()
main_window.show()
main_window.run()
```

--------------------------------

### Create StandardButton instances

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/basic-widgets/standardbutton

Demonstrates basic usage of StandardButton with different pre-defined kinds.

```slint
import { StandardButton, VerticalBox } from "std-widgets.slint";
export component Example inherits Window {
  VerticalBox {
    StandardButton { kind: ok; }
    StandardButton { kind: apply; }
    StandardButton { kind: cancel; }
  }
}
```

--------------------------------

### Initialize project directory

Source: https://docs.slint.dev/latest/docs/slint/tutorial/getting_started

Commands to rename and enter the project directory for different language templates.

```sh
mv slint-rust-template-main memory
cd memory
```

```sh
mv slint-cpp-template-main memory
cd memory
```

```sh
mv slint-nodejs-template-main memory
cd memory
```

--------------------------------

### Handling keyboard input with FocusScope

Source: https://docs.slint.dev/latest/docs/slint/reference/keyboard-input/focusscope

Demonstrates how to use FocusScope to capture key events and define key bindings.

```slint
export component Example inherits Window {
    width: 100px;
    height: 100px;
    forward-focus: my-key-handler;
    my-key-handler := FocusScope {
        key-pressed(event) => {
            debug(event.text);
            if (event.modifiers.control) {
                debug("control was pressed during this event");
            }
            if (event.text == Key.Escape) {
                debug("Esc key was pressed")
            }
            accept
        }

        KeyBinding {
            keys: @keys(Control + X);
            activated => {
                debug("Control + X pressed")
            }
        }
    }
}
```

--------------------------------

### Flash Pico demo on Linux

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/embedded

Mounts the device and flashes the binary using elf2uf2-rs.

```sh
udisksctl mount -b /dev/sda1
elf2uf2-rs -d target/thumbv6m-none-eabi/release/printerdemo_mcu
```

--------------------------------

### Install Slint skill for Claude Code

Source: https://docs.slint.dev/latest/docs/slint/guide/tooling/ai-coding-assistants

Commands to add the Slint marketplace and install the plugin within the Claude Code environment.

```sh
/plugin marketplace add slint-ui/ai-plugins
/plugin install slint@slint
```

--------------------------------

### Implement reactivity with properties and TouchArea

Source: https://docs.slint.dev/latest/docs/slint/guide/language/concepts/slint-language

Uses a property and a TouchArea to demonstrate automatic UI updates when dependencies change.

```slint
property <int> counter: 0;

Rectangle {
    width: 150px;
    height: 60px;
    background: white;
    border-radius: 10px;

    Text {
        text: "Count: " + counter;
        font-size: 24px;
        color: black;
    }

    TouchArea {
        clicked => {
            counter += 1;
        }
    }
}
```

--------------------------------

### Add Android Targets to Rust

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/mobile/android

Install the necessary Android architecture targets for the Rust compiler.

```sh
rustup target add aarch64-linux-android
```

```sh
rustup target add armv7-linux-androideabi  # armeabi-v7a
rustup target add x86_64-linux-android     # x86_64 (emulator)
rustup target add i686-linux-android       # x86 (emulator)
```

--------------------------------

### Run demo with probe-rs

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/embedded

Executes the demo using a hardware probe for debugging and flashing.

```sh
CARGO_TARGET_THUMBV6M_NONE_EABI_LINKER="flip-link" CARGO_TARGET_THUMBV6M_NONE_EABI_RUNNER="probe-rs run --chip RP2040" cargo run -p printerdemo_mcu --no-default-features --features=mcu-board-support/pico-st7789 --target=thumbv6m-none-eabi --release
```

--------------------------------

### Countdown Timer Example

Source: https://docs.slint.dev/latest/docs/slint/reference/timer

A timer that counts down from 10 to 0 every second, with a reset button.

```slint
import { Button } from "std-widgets.slint";
export component Example inherits Window {
    property <int> value: 10;
    timer := Timer {
        interval: 1s;
        running: true;
        triggered() => {
            value -= 1;
            if (value == 0) {
                self.running = false;
            }
        }
    }
    HorizontalLayout {
        Text { text: value; }
        Button {
            text: "Reset";
            clicked() => { value = 10; timer.running = true; }
        }
    }
}
```

--------------------------------

### Serve Application via Python

Source: https://docs.slint.dev/latest/docs/slint/tutorial/running_in_a_browser

Use a local web server to bypass file system restrictions when loading ES modules.

```sh
python3 -m http.server
```

--------------------------------

### Implement MainWindow with Tile Grid

Source: https://docs.slint.dev/latest/docs/slint/tutorial/from_one_to_multiple_tiles

Configures the main window to display a grid of tiles using a for loop over a TileData array.

```slint
export component MainWindow inherits Window {
    width: 326px;
    height: 326px;

    in property <[TileData]> memory_tiles: [
        { image: @image-url("icons/at.png") },
        { image: @image-url("icons/balance-scale.png") },
        { image: @image-url("icons/bicycle.png") },
        { image: @image-url("icons/bus.png") },
        { image: @image-url("icons/cloud.png") },
        { image: @image-url("icons/cogs.png") },
        { image: @image-url("icons/motorcycle.png") },
        { image: @image-url("icons/video.png") },
    ];
    for tile[i] in memory_tiles : MemoryTile {
        x: mod(i, 4) * 74px;
        y: floor(i / 4) * 74px;
        width: 64px;
        height: 64px;
        icon: tile.image;
        open_curtain: tile.image_visible || tile.solved;
        // propagate the solved status from the model to the tile
        solved: tile.solved;
        clicked => {
            tile.image_visible = !tile.image_visible;
        }
    }
}
```

--------------------------------

### Define a callback in Slint

Source: https://docs.slint.dev/latest/docs/slint/guide/tooling/slint-viewer

Example of a component definition containing a callback that can be wired to external commands.

```slint
export component MyApp inherits Window {
    callback open-url(string);
    // ...
}
```

--------------------------------

### Create a basic TextEdit widget

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/views/textedit

Demonstrates the basic usage of a TextEdit widget inside a VerticalBox layout.

```slint
import { TextEdit, VerticalBox } from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 200px;

    VerticalBox {
        TextEdit {
            font-size: 14px;
            text: "Lorem ipsum dolor sit amet,\n consectetur adipisici elit";
        }
    }
}
```

--------------------------------

### Enable Live Preview in Rust

Source: https://docs.slint.dev/latest/docs/slint/guide/tooling/live-preview

Run the application with the live-preview feature enabled via environment variable and command line flag.

```bash
SLINT_LIVE_PREVIEW=1 cargo run --features slint/live-preview
```

--------------------------------

### Compare HTML tag syntax

Source: https://docs.slint.dev/latest/docs/slint/guide/language/coding/file

Examples of standard and self-closing tags in HTML for comparison with Slint.

```html
<!-- opening and closing tag -->
<Button>Hello World</Button>
 <!-- self closing tag -->
<img/>
```

--------------------------------

### Initialize JavaScript Application

Source: https://docs.slint.dev/latest/docs/slint/tutorial/getting_started

Entry point configuration for a Slint application using JavaScript.

```js
import * as slint from "slint-ui";

const ui = slint.loadFile(new URL("./ui/app-window.slint", import.meta.url));
const mainWindow = new ui.MainWindow();
await mainWindow.run();
```

--------------------------------

### Define Property Expressions in Slint

Source: https://docs.slint.dev/latest/docs/slint/guide/language/concepts/reactivity

Examples of simple and conditional property bindings using Slint syntax.

```slint
// Tracks the `x` value of an element called foo
x: foo.x;

// Tracks the value, but sets it to 0px or 400px based on if
// foo.x is greater than 400px
x: foo.x > 100px ? 0px : 400px;

// Tracks the value, but clamps it between 0px and 400px
x: clamp(foo.x, 0px, 400px);
```

--------------------------------

### Run specific Slint demo via command line

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/embedded

Override the default demo by passing the application name as an argument to the Docker container.

```bash
sudo docker run --rm --privileged --user=torizon \
  -v /dev:/dev -v /tmp:/tmp -v /run/udev:/run/udev \
  --device-cgroup-rule='c 199:* rmw' --device-cgroup-rule='c 226:* rmw' \
  --device-cgroup-rule='c 13:* rmw' --device-cgroup-rule='c 4:* rmw' \
  ghcr.io/slint-ui/slint/torizon-demos-arm64-imx8 printerdemo
```

--------------------------------

### Configure Xcode Project with Xcodegen

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/mobile/ios

Example project.yml configuration for generating an Xcode project for an iOS application.

```yaml
name: My App
options:
  bundleIdPrefix: com.company
settings:
  ENABLE_USER_SCRIPT_SANDBOXING: NO
targets:
  MyApp:
    type: application
    platform: iOS
    deploymentTarget: "12.0"
    info:
        path: Info.plist
        properties:
            UILaunchScreen:
                - ImageRespectSafeAreaInsets: false
    sources: []
    postCompileScripts:
      - script: |
          ./build_for_ios_with_cargo.bash slint-rust-template
        outputFileLists:
            $TARGET_BUILD_DIR/$EXECUTABLE_PATH
```

--------------------------------

### Using Math Namespace and Global Scope

Source: https://docs.slint.dev/latest/docs/slint/reference/global-functions/math

Demonstrates accessing math functions via the Math namespace, global scope, or postfix style.

```slint
// Using the Math namespace
x: Math.abs(-10); // sets x to 10
```

```slint
// Using the functions via global scope. No need for 'Math' prefix.
x: abs(-10); // sets x to 10
```

```slint
// Using the postfix style.
x: (-10).abs(); // sets x to 10
```

--------------------------------

### Initialize components with the init callback

Source: https://docs.slint.dev/latest/docs/slint/reference/common

The init callback executes after all properties are initialized, with execution order proceeding from inside to outside.

```slint
component MyButton inherits Rectangle {
    in-out property <string> text: "Initial";
    init => {
        // If `text` is queried here, it will have the value "Hello".
        debug("first");
    }
}

component MyCheckBox inherits Rectangle {
    init => { debug("second"); }
}

export component MyWindow inherits Window {
    MyButton {
        text: "Hello";
        init => { debug("third"); }
    }
    MyCheckBox {
    }
}
```

--------------------------------

### Set the initial date for DatePickerPopup

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/misc/datepicker

Configures the starting date displayed in the picker using a Date struct.

```slint
DatePickerPopup {
    date: { year: 2024, month: 11 };
}
```

--------------------------------

### Previewing a Slint file

Source: https://docs.slint.dev/latest/docs/slint/guide/tooling/slint-viewer

Opens a .slint file for previewing. Use '-' to read from standard input.

```sh
slint-viewer path/to/myfile.slint
```

--------------------------------

### Create a basic SpinBox

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/basic-widgets/spinbox

A standard SpinBox implementation within a window.

```slint
import { SpinBox, VerticalBox } from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 50px;

    VerticalBox {
        alignment: center;

        SpinBox {
            value: 42;
        }
    }
}
```

--------------------------------

### Rotate a conic gradient in Slint

Source: https://docs.slint.dev/latest/docs/slint/reference/colors-and-brushes

Uses the 'from' parameter to rotate the starting angle of the conic gradient.

```slint
export component Example inherits Window {
    preferred-width: 100px;
    preferred-height: 100px;
    Rectangle {
        background: @conic-gradient(from 90deg, #f00 0deg, #0f0 120deg, #00f 240deg, #f00 360deg);
    }
}
```

--------------------------------

### Build Slint with Live Preview for C++

Source: https://docs.slint.dev/latest/docs/slint/guide/tooling/live-preview

Configure the Slint build with the interpreter enabled using CMake.

```bash
mkdir build && cd build
cmake -GNinja -DSLINT_FEATURE_LIVE_PREVIEW=ON path/to/slint
cmake --build .
```

--------------------------------

### Define a ContextMenuArea in Slint

Source: https://docs.slint.dev/latest/docs/slint/reference/window/contextmenuarea

This example demonstrates how to structure a ContextMenuArea with various menu items, a separator, and a nested sub-menu.

```slint
export component Example {
    ContextMenuArea {
        Menu {
            MenuItem {
                title: @tr("Cut");
                activated => { debug("Cut"); }
            }
            MenuItem {
                title: @tr("Copy");
                activated => { debug("Copy"); }
            }
            MenuItem {
                title: @tr("Paste");
                activated => { debug("Paste"); }
            }
            MenuSeparator {}
            Menu {
                title: @tr("Find");
                MenuItem {
                    title: @tr("Find Next");
                }
                MenuItem {
                    title: @tr("Find Previous");
                }
            }
        }
    }
}
```

--------------------------------

### Create a ListView in Slint

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/views/listview

Demonstrates a basic ListView implementation using a for loop to render a list of colored items.

```slint
import { ListView, VerticalBox } from "std-widgets.slint";
export component Example inherits Window {
    width: 150px;
    height: 150px;

    VerticalBox {
        ListView {
            for data in [
                { text: "Blue", color: #0000ff, bg: #eeeeee},
                { text: "Red", color: #ff0000, bg: #eeeeee},
                { text: "Green", color: #00ff00, bg: #eeeeee},
                { text: "Yellow", color: #ffff00, bg: #222222 },
                { text: "Black", color: #000000, bg: #eeeeee },
                { text: "White", color: #ffffff, bg: #222222 },
                { text: "Magenta", color: #ff00ff, bg: #eeeeee },
                { text: "Cyan", color: #00ffff, bg: #222222 },
            ] : Rectangle {
                height: 30px;
                background: data.bg;
                width: parent.width;
                Text {
                    x: 0;
                    text: data.text;
                    color: data.color;
                }
            }
        }
    }
}
```

--------------------------------

### Basic Slint Component Declaration

Source: https://docs.slint.dev/latest/docs/slint/guide/language/concepts/slint-language

A simple example demonstrating a Rectangle containing a Button with a text property and a clicked callback.

```slint
Rectangle {
    Button {
        text: "Click me!";
        clicked => {
            debug("Button clicked!");
        }
    }
}
```

--------------------------------

### Organize project directory structure

Source: https://docs.slint.dev/latest/docs/slint/guide/development/best-practices

Maintain a clean separation between business logic in src/ and UI/asset files in ui/.

```text
my-project
├── src
│   ├── main.cpp / main.rs / main.js / main.py
│        <this is where your main business logic lives>
├── ui
    ├── app-window.slint <the entry point for your Slint UI>
    ├── <additional .slint files here>
    ├── images
        ├── logo.svg
        ├── highlight-marker.svg
        ├── <all your images go here>
```

--------------------------------

### Deploy Slint demo with Docker Compose

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/embedded

Use this configuration to run Slint demos on Torizon OS, ensuring necessary device access and environment variables are set.

```yaml
services:
  slint-demo:
    image: ghcr.io/slint-ui/slint/torizon-demos-arm64-imx8:latest
    restart: unless-stopped
    environment:
      - ACCEPT_FSL_EULA=1
    user: torizon
    privileged: true
    volumes:
      - type: bind
        source: /tmp
        target: /tmp
      - type: bind
        source: /dev
        target: /dev
      - type: bind
        source: /run/udev
        target: /run/udev
    device_cgroup_rules:
      # ... for tty
      - "c 4:* rmw"
      # ... for /dev/input devices
      - "c 13:* rmw"
      - "c 199:* rmw"
      # ... for /dev/dri devices
      - "c 226:* rmw"
```

--------------------------------

### List DRM Modes

Source: https://docs.slint.dev/latest/docs/slint/guide/backends-and-renderers/backend_linuxkms

Example output when setting SLINT_DRM_MODE to list to identify available display resolutions and refresh rates.

```text
DRM Mode List Requested:
Index: 0 Width: 3840 Height: 2160 Refresh Rate: 60
Index: 1 Width: 3840 Height: 2160 Refresh Rate: 50
Index: 2 Width: 3840 Height: 2160 Refresh Rate: 30
Index: 3 Width: 2560 Height: 1440 Refresh Rate: 59
Index: 4 Width: 1920 Height: 1080 Refresh Rate: 60
Index: 5 Width: 1680 Height: 1050 Refresh Rate: 59
...
```

--------------------------------

### Define a callback with parameters

Source: https://docs.slint.dev/latest/docs/slint/guide/language/coding/functions-and-callbacks

Shows how to define a callback that accepts multiple input parameters.

```slint
export component Example inherits Rectangle {
    // declares a callback
    callback hello(int, string);
    hello(aa, bb) => { /* ... */ }
}
```

--------------------------------

### Define Wasm Entry Point

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/web

Use the wasm_bindgen(start) attribute to mark the application entry point for Wasm targets.

```rust
#[cfg(target_family = "wasm")]
use wasm_bindgen::prelude::*;

slint::include_modules!(); // or slint!(...)

#[cfg_attr(target_family = "wasm", wasm_bindgen(start))]
pub fn main() {
    // Usual application code
    let main_window = MainWindow::new().unwrap();
    main_window.run().unwrap();
}
```

--------------------------------

### Flash Pico demo on macOS

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/embedded

Command to flash the binary after putting the device into bootsel mode.

```sh
elf2uf2-rs -d target/thumbv6m-none-eabi/release/printerdemo_mcu
```

--------------------------------

### Run Slint demo container via command line

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/embedded

Execute a Slint demo container directly using the Docker CLI with required device permissions.

```bash
sudo docker run --rm --privileged \
  --user=torizon \
  -v /dev:/dev \
  -v /tmp:/tmp \
  -v /run/udev:/run/udev \
  --device-cgroup-rule='c 199:* rmw' \
  --device-cgroup-rule='c 226:* rmw' \
  --device-cgroup-rule='c 13:* rmw' \
  --device-cgroup-rule='c 4:* rmw' \
  ghcr.io/slint-ui/slint/torizon-demos-arm64-imx8
```

--------------------------------

### Initialize and Shuffle Tiles in Python

Source: https://docs.slint.dev/latest/docs/slint/tutorial/creating_the_tiles

Uses a custom MainWindow class to duplicate the initial memory tiles and shuffle them using a ListModel.

```python
import slint
import sys
import os
import random
import itertools
import copy
import datetime


class MainWindow(slint.loader.ui.app_window.MainWindow):
    def __init__(self):
        super().__init__()
        initial_tiles = self.memory_tiles
        tiles = slint.ListModel(
            itertools.chain(
                map(copy.copy, initial_tiles), map(copy.copy, initial_tiles)
            )
        )
        random.shuffle(tiles)
        self.memory_tiles = tiles


main_window = MainWindow()
main_window.show()
main_window.run()
```

--------------------------------

### Implement pinch and rotate gestures in Slint

Source: https://docs.slint.dev/latest/docs/slint/reference/gestures/scalerotategesturehandler

Captures initial state in the started callback and applies transformations in the updated callback to scale and rotate a rectangle.

```slint
export component Example inherits Window {
    width: 400px;
    height: 400px;

    property <float> start-scale;
    property <angle> start-rotation;

    gesture := ScaleRotateGestureHandler {
        started => {
            start-scale = rect.current-scale;
            start-rotation = rect.current-rotation;
        }
        updated => {
            rect.current-scale = start-scale * self.scale;
            rect.current-rotation = start-rotation + self.rotation;
        }

        rect := Rectangle {
            background: @radial-gradient(circle, #4488ff, #224488);
            border-radius: 8px;

            property <float> current-scale: 1.0;
            property <angle> current-rotation: 0deg;
            width: 200px * self.current-scale;
            height: 200px * self.current-scale;
            x: (parent.width - self.width) / 2;
            y: (parent.height - self.height) / 2;

            Text {
                text: "Pinch & rotate";
                color: white;
            }
        }
    }
}
```

--------------------------------

### Configure Rust main entry point

Source: https://docs.slint.dev/latest/docs/slint/tutorial/getting_started

The main.rs file requires the slint macro to include generated modules and a main function to run the window.

```rust
slint::include_modules!();

fn main() -> Result<(), slint::PlatformError> {
    let main_window = MainWindow::new()?;

    main_window.run()
}
```

--------------------------------

### Basic TimePickerPopup Implementation

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/misc/timepicker

Demonstrates how to trigger a TimePickerPopup from a button and handle the accepted and canceled callbacks.

```slint
import { TimePickerPopup, Button } from "std-widgets.slint";
export component Example inherits Window {
    width: 400px;
    height: 600px;

    time-picker-button := Button {
        text: @tr("Open TimePicker");

        clicked => {
            time-picker.show();
        }
    }

    time-picker := TimePickerPopup {
        x: (root.width - self.width) / 2;
        y: (root.height - self.height ) / 2;
        width: 360px;
        height: 524px;
        canceled => {
            time-picker.close();
        }

        accepted(time) => {
            debug(time);
            time-picker.close();
        }
    }
}
```

--------------------------------

### VSCode launch configuration for probe-rs

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/embedded

Launch configuration for debugging the MCU demo in VSCode.

```json
{
    "version": "0.2.0",
    "configurations": [
        {
            "preLaunchTask": "build mcu demo for pico",
            "type": "probe-rs-debug",
            "request": "launch",
            "name": "Flash and Debug MCU Demo",
            "cwd": "${workspaceFolder}",
            "connectUnderReset": false,
            "chip": "RP2040",
            "flashingConfig": {
                "flashingEnabled": true,
                "resetAfterFlashing": true,
                "haltAfterReset": true
            },
            "coreConfigs": [
                {
                    "coreIndex": 0,
                    "rttEnabled": true,
                    "programBinary": "./target/thumbv6m-none-eabi/release-with-debug/printerdemo_mcu"
                }
            ]
        },
    ]
}
```

--------------------------------

### Define Android entry point in C++

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/mobile/android

Use a preprocessor guard to define slint_main for Android and main for desktop platforms.

```cpp
#ifdef __ANDROID__
extern "C" void slint_main()
#else
int main()
#endif
{
    auto window = MainWindow::create();
    window->run();
}
```

--------------------------------

### Shorthand Relative Lengths

Source: https://docs.slint.dev/latest/docs/slint/guide/language/coding/positioning-and-layouts

Demonstrates the shorthand syntax for setting width and height using percentages directly.

```slint
export component Example inherits Window {
    preferred-width: 100px;
    preferred-height: 100px;

    background: green;
    Rectangle {
        background: blue;
        width: 50%;
        height: 50%;
    }
}
```

--------------------------------

### Run Printer Demo on ESP32-S3-Box-3

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/embedded

Command to compile and flash the printer demo for the ESP32-S3-Box-3 target.

```sh
CARGO_PROFILE_RELEASE_OPT_LEVEL=s cargo +esp run -p printerdemo_mcu --target xtensa-esp32s3-none-elf --no-default-features --features=mcu-board-support/esp32-s3-box-3 --release --config examples/mcu-board-support/esp32_s3_box_3/cargo-config.toml
```

--------------------------------

### Set initial text for TextEdit

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/views/textedit

Shows how to initialize the TextEdit widget with a specific string value.

```slint
TextEdit {
    text: "Initial text";
}
```

--------------------------------

### Configure Gettext for C++ applications

Source: https://docs.slint.dev/latest/docs/slint/guide/development/translations

Sets up the translation domain and locale path using CMake and standard libintl functions.

```cmake
find_package(Intl)
if(Intl_FOUND)
    target_compile_definitions(my_application PRIVATE HAVE_GETTEXT SRC_DIR="${CMAKE_CURRENT_SOURCE_DIR}")
    target_link_libraries(my_application PRIVATE Intl::Intl)
endif()
```

```cpp
#ifdef HAVE_GETTEXT
#    include <locale>
#    include <libintl.h>
#endif

int main()
{
#ifdef HAVE_GETTEXT
    bindtextdomain("my_application", SRC_DIR "/lang/");
    std::locale::global(std::locale(""));
#endif
   //...
```

--------------------------------

### Define Android entry point in Rust

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/mobile/android

Use the android_main function to initialize the Slint application on Android.

```rs
#[cfg(target_os = "android")]
#[unsafe(no_mangle)]
fn android_main(app: slint::android::AndroidApp) {
    slint::android::init(app).unwrap();
    let main_window = MainWindow::new().unwrap();
    main_window.run().unwrap();
}
```

--------------------------------

### macos-bring-all-windows-to-front()

Source: https://docs.slint.dev/latest/docs/slint/reference/platform

Brings all application windows to the front of the screen on macOS. This is a no-op on other platforms.

```APIDOC
## macos-bring-all-windows-to-front()

### Description
Brings all application windows to the front of the screen. On macOS this invokes [NSApp arrangeInFront:], which raises every application window to the top of the window stack. On other platforms this function is a no-op.
```

--------------------------------

### Basic Text Usage

Source: https://docs.slint.dev/latest/docs/slint/reference/elements/text

Demonstrates basic text rendering and word wrapping behavior.

```slint
// text-example.slint
export component TextExample inherits Window {
    // Text colored red.
    Text {
        x:0; y:0;
        text: "Hello World";
        color: red;
    }

    // This paragraph breaks into multiple lines of text.
    Text {
        x:0; y: 30px;
        text: "This paragraph breaks into multiple lines of text";
        wrap: word-wrap;
        width: 150px;
        height: 100%;
    }
}
```

--------------------------------

### Build Slint Printer demo for Pico 2

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/embedded

Compiles the printer demo for the Raspberry Pi Pico 2 architecture.

```sh
cargo build -p printerdemo_mcu --no-default-features --features=mcu-board-support/pico2-st7789 --target=thumbv8m.main-none-eabihf --release
```

--------------------------------

### Importing from Component Libraries

Source: https://docs.slint.dev/latest/docs/slint/guide/language/coding/file

Syntax for importing components using library aliases instead of relative file paths.

```slint
import { MySwitch } from "@mylibrary/switch.slint";
import { MyButton } from "@otherlibrary";
```

--------------------------------

### Configure Slint Stretch Algorithms

Source: https://docs.slint.dev/latest/docs/slint/guide/language/coding/positioning-and-layouts

Illustrates how horizontal-stretch factors and min-width properties influence element sizing when using the stretch alignment.

```slint
export component Example inherits Window {
    width: 300px;
    height: 200px;
    VerticalLayout {
        // Same stretch factor (1 by default): the size is divided equally
        HorizontalLayout {
            Rectangle { background: blue; }
            Rectangle { background: yellow;}
            Rectangle { background: green;}
        }
        // Elements with a bigger min-width are given a bigger size before they expand
        HorizontalLayout {
            Rectangle { background: cyan; min-width: 100px;}
            Rectangle { background: magenta; min-width: 50px;}
            Rectangle { background: gold;}
        }
        // Stretch factor twice as big:  grows twice as much
        HorizontalLayout {
            Rectangle { background: navy; horizontal-stretch: 2;}
            Rectangle { background: gray; }
        }
        // All elements not having a maximum width have a stretch factor of 0 so they grow
        HorizontalLayout {
            Rectangle { background: red; max-width: 20px; }
            Rectangle { background: orange; horizontal-stretch: 0; }
            Rectangle { background: pink; horizontal-stretch: 0; }
        }
    }
}
```
Tokens:
Raw