Slint Language

This following section gives you an insight into the thinking behind the language and the core concepts it’s made up from.

As covered in the video above, the Slint declarative UI language is designed to be a simple, yet powerful way to create any user interface you can imagine.

Text {
    text: "Hello World!";
    font-size: 24px;
    color: #0044ff;
}

This example shows the core of how Slint works. Use elements with their name followed by open and closed braces, e.g. Text {}. Then within the braces customize it with properties e.g. font-size: 24px.

To nest elements inside each other place them within the parents braces. For example the following Rectangle has a Text element as its child.

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

    Text {
        text: "Hello World!";
        font-size: 24px;
        color: black;
    }
}