Getting Started

Understanding the documentation

Note

Slint provides a web based live-editing tool called Slintpad ↗. It’s possible to open the larger snippets in this tool by clicking the play button in the top right corner of the snippets.

If you are new to Slint and want to quickly get started and learning the basics we recommend using Visual Studio Code (VS Code). VS Code is popular, free and thanks to the Slint extension it is also the easiest to get started with.

Tip

We support many other tools and editors see here ↗).

Setting up VS Code

Windows

1. Install VS Code. Download it here ↗.

2. Install the Slint extension. Find it here ↗.

3. Create a new project based on a Slint template. This is done via the command palette (Ctrl+Shift+P).

4. Choose your language.

macOS

1. Install VS Code.
   Download it here ↗.

2. Install the Slint extension.
   Find it here ↗.

3. Create a new project based on a Slint template.
   This is done via the command palette (CMD+Shift+P).

4. Choose your language.
   

5. Choose a folder to save the project in.
   

Linux

1. Install VS Code.
   Download it here ↗.

2. Install the Slint extension.
   Find it here ↗.

3. Create a new project based on a Slint template.
   This is done via the command palette (Ctrl+Shift+P).

4. Choose your language.

Slint project structure

C++

• Directory.vscode/

  • …
• Directorysrc/

  • main.cpp
• Directoryui/

  • app-window.slint The main Slint file
• CMakeLists.txt
• LICENSE
• README.md

NodeJS

• Directory.vscode/

  • …
• Directorysrc/

  • main.js
• Directoryui/

  • app-window.slint The main Slint file
• package.json
• README.md

Rust

• Directory.vscode/

  • …
• Directorysrc/

  • main.rs
• Directorytarget/

  • Directorydebug/

    • …
  • .rustc_info.json
  • CACHEDIR.TAG
• Directoryui/

  • app-window.slint The main Slint file
• build.rs
• Cargo.Toml
• LICENSE
• README.md

The src folder is for the apps business logic. While the ui folder contains the Slint files that define the user interface.