Syntax

Comments

Comments are lines of code that are ignored by the Slint compiler. They are used to explain the code or to temporarily disable code.

Single line comments

Single line comments are denoted by // and are terminated by a new line.

// Amazing text! This is a comment
Text {
    text: "Hello World"; // This is also a comment
    color: blue;
}

Multi line comments

Multi line comments are denoted by /* and */ and are terminated by a new line.

/*
    This is a multi
    line comment
*/
Text {
    text: "Hello World";
    color: blue;
}

Elements and components

The core part of the Slint language are elements and components. Technically they are the same thing so once you know how to declare and use one you know the other. Elements are the basic building blocks that are part of the Slint Language, while components (also know as widgets) are larger items that are built up from multiple elements and properties.

To declare an element you use the element-name followed by a set of curly braces {} that contain the properties of the element. Note that elements are not lines of code that must be terminated with a semicolon ;. Doing so will result in an error.

// Note: This is not a valid Slint file, it's just an example of the syntax
Text {
    text: "Hello World";
    color: blue;
}

// valid
Text {}
// Also valid
Text {

}
// Valid, but considered bad Slint practice
Text
{

}
// Valid but hard to read when there are no spaces between the name and braces
Text{}

// Not valid due to terminating semicolon
Text {
};

If you have come from other languages such as HTML or React you might be used to opening and closing tags as well as self closing tags.

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

Slint only has a single way to declare an item element-name {}. There are some additions to this, such as declaring an element to be a component or a global singleton. Additionally how to declare an Identifier so other elements can reference it’s properties.

The root element

component MyApp {
    Text {
        text: "Hello World";
        font-size: 24px;
    }
}

Run in Slintpad

To be a valid Slint file the root element must be a component. Then inside the component you can declare any number of elements. This is explained in more detail later, it’s not important to understand at this point.

Properties

Properties are the values that are assigned to an element. They are set using the property-name: value; syntax.