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.1.1",
"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.