VsCode Quick Start

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

Tip

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

Setting up VSCode

Windows

1. Install VSCode. 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 VSCode.
   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 VSCode.
   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.