Getting Started

This tutorial uses JavaScript as the host programming language. Slint also supports other programming languages like Rust or C++.

We recommend using our editor integrations for Slint for following this tutorial.

Slint has an application template you can use to create a project with dependencies already set up that follows recommended best practices.

Clone the template with the following command:

git clone https://github.com/slint-ui/slint-nodejs-template memory
cd memory

Install dependencies with npm:

npm install

The package.json file references src/main.js as the entry point for the application and src/main.js references memory.slint as the UI file.

Replace the contents of src/main.js with the following:

// main.js
import * as slint from "slint-ui";

let ui = slint.loadFile("./ui/appwindow.slint");
let mainWindow = new ui.MainWindow();
await mainWindow.run();

The slint.loadFile method resolves files from the process's current working directory, so from the package.json file's location.

Replace the contents of ui/appwindow.slint with the following:

// appwindow.slint
export component MainWindow inherits Window {
    Text {
        text: "hello world";
        color: green;
    }
}

Run the example with npm start and a window appears with the green "Hello World" greeting.