Getting Started

In this tutorial, we use JavaScript as the host programming language. We also support other programming languages like Rust or C++.

You'll need a development environment with Node.js 16 and npm installed. More recent versions of NodeJS are currently not supported, for details check Issue #961. Since Slint is implemented in the Rust programming language, you also need to install a Rust compiler (1.66 or newer). You can easily install a Rust compiler following the instruction from the Rust website. You will also need some additional platform-specific dependencies, see https://github.com/slint-ui/slint/blob/master/docs/building.md#prerequisites

We're going to use slint-ui as npm dependency.

In a new directory, we create a new package.json file.

{
    "name": "memory",
    "version": "1.0.0",
    "main": "main.js",
    "dependencies": {
        "slint-ui": "^1.0.0"
    },
    "scripts": {
        "start": "node ."
    }
}

This should look familiar to people familiar with NodeJS. We see that this package.json references a main.js, which we will add later. We must then create, in the same directory, the memory.slint file. Let's just fill it with a hello world for now:

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

What's still missing is the main.js:

// main.js
require("slint-ui");
let ui = require("./memory.slint");
let mainWindow = new ui.MainWindow();
mainWindow.run();

To recap, we now have a directory with a package.json, memory.slint, and main.js.

We can now compile and run the program:

npm install
npm start

and a window will appear with the green "Hello World" greeting.

Feel free to use your favorite IDE for this purpose.