## File: README.md [](https://github.com/slint-ui/slint/actions/workflows/ci.yaml) [](https://api.reuse.software/info/github.com/slint-ui/slint) [](https://github.com/slint-ui/slint/discussions) **Slint** is an open-source declarative GUI toolkit for building native user interfaces for embedded systems, desktops, and mobile platforms. Write your UI once in `.slint`, a simple markup language. Connect it to business logic written in Rust, C++, JavaScript, or Python. ## Why Slint? The name *Slint* is derived from our design goals: - **Scalable**: Slint should support responsive UI design, allow cross-platform usage across operating systems and processor architectures and support multiple programming languages. - **Lightweight**: Slint should require minimal resources, in terms of memory and processing power, and yet deliver a smooth, smartphone-like user experience on any device. - **Intuitive**: Designers and developers should feel productive while enjoying the GUI design and development process. The design creation tools should be intuitive to use for the designers. Similarly for the developers, the APIs should be consistent and easy to use, no matter which programming language they choose. - **Native**: GUI built with Slint should match the end users' expectations of a native application irrespective of the platform - desktop, mobile, web or embedded system. The UI design should be compiled to machine code and provide flexibility that only a native application can offer: Access full operating system APIs, utilize all CPU and GPU cores, connect to any peripheral. Beyond the design goals, here’s what makes Slint stand out: - **Independent UI Design**: Use a declarative language to separate your UI from business logic. Designers can work in parallel with developers. - **Tooling**: Iterate quickly with our Live Preview & editor integrations. Integrate from Figma with the [Figma to Slint plugin](https://www.figma.com/community/plugin/1474418299182276871/figma-to-slint). - **Stable APIs**: Slint follows a stable 1.x API. We evolve carefully without breaking your code. See what others have built: [#MadeWithSlint](https://madewithslint.com) ## Examples ### Embedded | RaspberryPi | STM32 | RP2040 | | ------------------------------------ | ----------------------------- | ------------------------------ | | [Video of Slint on Raspberry Pi][#1] | [Video of Slint on STM32][#2] | [Video of Slint on RP2040][#3] | ### Desktop | Windows | macOS | Linux | | ------------------------------------------- | ----------------------------------------- | ----------------------------------------- | | ![Screenshot of the Gallery on Windows][#4] | ![Screenshot of the Gallery on macOS][#5] | ![Screenshot of the Gallery on Linux][#6] | ### Web using WebAssembly | Printer Demo | Slide Puzzle | Energy Monitor | Widget Gallery | Weather demo | | ------------------------------------------- | -------------------------------------------- | ---------------------------------------------------- | --------------------------------------------- | --------------------------------------------- | | [![Screenshot of the Printer Demo][#7]][#8] | [![Screenshot of the Slide Puzzle][#9]][#10] | [![Screenshot of the Energy Monitor Demo][#11]][#12] | [![Screenshot of the Gallery Demo][#13]][#14] | [![Screenshot of the weather Demo][#29]][#30] | More examples and demos in the [examples folder](examples#examples) ## Get Started ### Hello World The UI is defined in a Domain Specific Language that is declarative, easy to use, intuitive, and provides a powerful way to describe graphical elements, their placement, their hierarchy, property bindings, and the flow of data through the different states. Here's the obligatory "Hello World": ```slint export component HelloWorld inherits Window { width: 400px; height: 400px; Text { y: parent.width / 2; x: parent.x + 200px; text: "Hello, world"; color: blue; } } ``` ### Documentation For more details, check out the [Slint Documentation](https://docs.slint.dev). The [examples](examples) folder contains examples and demos, showing how to use the Slint markup language and how to interact with a Slint user interface from supported programming languages. The `docs` folder contains a lot more information, including [build instructions](docs/building.md), and [internal developer docs](docs/development.md). Refer to the README of each language directory in the `api` folder: - [C++](api/cpp) ([Documentation][#15] | [Getting Started Template][#17]) - [Rust](api/rs/slint) [![Crates.io][#18]][#19] ([Documentation][#20] | [Tutorial Video][#22] | [Getting Started Template][#23]) - [JavaScript/NodeJS (Beta)](api/node) [![npm][#24]][#25] ([Documentation][#26] | [Getting Started Template][#28]) - [Python (Beta)](api/python/slint) [![pypi][#31]][#32] ([Documentation][#33] | [Getting Started Template][#34]) ## Architecture An application is composed of the business logic written in Rust, C++, Python, or JavaScript and the `.slint` user interface design markup, which is compiled to native code. ### Compiler The `.slint` files are compiled ahead of time. The expressions in the `.slint` are pure functions that the compiler can optimize. For example, the compiler could choose to "inline" properties and remove those that are constant or unchanged. The compiler uses the typical compiler phases of lexing, parsing, optimization, and finally code generation. It provides different back-ends for code generation in the target language. The C++ code generator produces a C++ header file, the Rust generator produces Rust code, and so on. An interpreter for dynamic languages is also included. ### Runtime The runtime library consists of an engine that supports properties declared in the `.slint` language. Components with their elements, items, and properties are laid out in a single memory region, to reduce memory allocations. Rendering backends and styles are configurable at compile time: - The `femtovg` renderer uses OpenGL ES 2.0 for rendering. - The `skia` renderer uses [Skia](https://skia.org) for rendering. - The `software` renderer uses the CPU with no additional dependencies. NOTE: When Qt is installed on the system, the `qt` style becomes available, using Qt's QStyle to achieve native looking widgets. ### Tooling We have a few tools to help with the development of .slint files: - A [**LSP Server**](./tools/lsp) that adds features like auto-complete and live preview of the .slint files to many editors. - It is bundled in a [**Visual Studio Code Extension**](./editors/vscode) available from the market place. - A [**slint-viewer**](./tools/viewer) tool which displays the .slint files. The `--auto-reload` argument makes it easy to preview your UI while you are working on it (when using the LSP preview is not possible). - [**SlintPad**](https://slintpad.com/), an online editor to try out .slint syntax without installing anything ([sources](./tools/slintpad)). - A [**Figma to Slint**](https://www.figma.com/community/plugin/1474418299182276871/figma-to-slint) plugin. Please check our [Editors README](./editors/README.md) for tips on how to configure your favorite editor to work well with Slint. ## License See [LICENSE.md](LICENSE.md) for the licensing terms of the whole repository, including documentation and examples. You can use Slint under ***any*** of the following licenses, at your choice: 1. Build proprietary desktop, mobile, or web applications for free with the [Royalty-free License](LICENSES/LicenseRef-Slint-Royalty-free-2.0.md), 2. Build open source embedded, desktop, mobile, or web applications for free with the [GNU GPLv3](LICENSES/GPL-3.0-only.txt), 3. Build proprietary embedded, desktop, mobile, or web applications with the [Commercial license](LICENSES/LicenseRef-Slint-Software-3.0.md). See the [Slint licensing options on the website](https://slint.dev/pricing) and the [Licensing FAQ](FAQ.md#licensing). ## Contributions We welcome your contributions: in the form of code, bug reports or feedback. For contribution guidelines see [CONTRIBUTING.md](CONTRIBUTING.md). ## Frequently Asked Questions Please see our separate [FAQ](FAQ.md). ## About us (SixtyFPS GmbH) We are passionate about software - API design, cross-platform software development and user interface components. Our aim is to make developing user interfaces fun for everyone: from Python, JavaScript, C++, or Rust developers all the way to UI/UX designers. We believe that software grows organically and keeping it open source is the best way to sustain that growth. Our team members are located remotely in Germany, Finland, and US. ### Stay up to date - Follow [@slint_ui](https://twitter.com/slint_ui) on X/Twitter. - Follow [@slint@fosstodon.org](https://fosstodon.org/@slint) on Mastodon. - Follow [@slint-ui](https://www.linkedin.com/company/slint-ui/) on LinkedIn. - Follow [@slint.dev](https://bsky.app/profile/slint.dev) on Bluesky - Subscribe to our [YouTube channel](https://www.youtube.com/@Slint-UI) ### Contact us Feel free to join [Github discussions](https://github.com/slint-ui/slint/discussions) for general chat or questions. Use [Github issues](https://github.com/slint-ui/slint/issues) to report public suggestions or bugs. We chat in [our Mattermost instance](https://chat.slint.dev) where you are welcome to listen in or ask your questions. You can of course also contact us privately via email to [info@slint.dev](mailto:info@slint.dev). [#1]: https://www.youtube.com/watch?v=_BDbNHrjK7g [#2]: https://www.youtube.com/watch?v=NNNOJJsOAis [#3]: https://www.youtube.com/watch?v=dkBwNocItGs [#4]: https://slint.dev/resources/gallery_win_screenshot.png "Gallery" [#5]: https://slint.dev/resources/gallery_mac_screenshot.png "Gallery" [#6]: https://slint.dev/resources/gallery_linux_screenshot.png "Gallery" [#7]: https://slint.dev/resources/printerdemo_screenshot.png "Printer Demo" [#8]: https://slint.dev/demos/printerdemo/ [#9]: https://slint.dev/resources/puzzle_screenshot.png "Slide Puzzle" [#10]: https://slint.dev/demos/slide_puzzle/ [#11]: https://slint.dev/resources/energy-monitor-screenshot.png "Energy Monitor Demo" [#12]: https://slint.dev/demos/energy-monitor/ [#13]: https://slint.dev/resources/gallery_screenshot.png "Gallery Demo" [#14]: https://slint.dev/demos/gallery/ [#15]: https://docs.slint.dev/latest/docs/cpp/ [#17]: https://github.com/slint-ui/slint-cpp-template [#18]: https://img.shields.io/crates/v/slint [#19]: https://crates.io/crates/slint [#20]: https://docs.slint.dev/latest/docs/rust/slint/ [#22]: https://youtu.be/WBcv4V-whHk [#23]: https://github.com/slint-ui/slint-rust-template [#24]: https://img.shields.io/npm/v/slint-ui [#25]: https://www.npmjs.com/package/slint-ui [#26]: https://docs.slint.dev/latest/docs/node/ [#28]: https://github.com/slint-ui/slint-nodejs-template [#29]: ./demos/weather-demo/docs/img/desktop-preview.png "Weather Demo" [#30]: https://slint.dev/demos/weather-demo/ [#31]: https://img.shields.io/pypi/v/slint [#32]: https://pypi.org/project/slint/ [#33]: https://docs.slint.dev/latest/docs/python/slint/ [#34]: https://github.com/slint-ui/slint-python-template --- ## File: api/rs/slint/README.md # Slint [](https://crates.io/crates/slint) [](https://docs.rs/slint) # A Rust UI toolkit [Slint](https://slint.rs) is a Rust based UI toolkit to build native user interfaces on desktop platforms and for embedded devices. This crate provides the Rust APIs to interact with the user interface implemented in Slint. The complete Rust documentation for Slint can be viewed online at https://slint.rs/docs/rust/slint/. ## Getting Started The [crate documentation](https://slint.dev/docs/rust/slint/) shows how to use this crate. ### Hello World The most basic "Hello world" application can be achieved with a few lines of code: In your `Cargo.toml` add: ```toml [dependencies] slint = "1.16.0" ``` And in your `main.rs`: ```rust,no_run slint::slint!{ export component HelloWorld { Text { text: "hello world"; color: green; } } } fn main() { HelloWorld::new().unwrap().run().unwrap(); } ``` The [`slint` crate documentation](https://slint.dev/docs/rust/slint/) contains more advanced examples and alternative ways to use this crate. To quickly get started, use the [Template Repository](https://github.com/slint-ui/slint-rust-template) with the code of a minimal application using Slint as a starting point for your program. 1. Download and extract the [ZIP archive of the Rust Template](https://github.com/slint-ui/slint-rust-template/archive/refs/heads/main.zip). 2. Rename the extracted directory and change into it: ```bash mv slint-rust-template-main my-project cd my-project ``` ## More examples You can quickly try out the [examples](/examples) by cloning this repo and running them with `cargo run` ```sh # Runs the "printerdemo" example cargo run --release --bin printerdemo ``` --- ## File: api/rs/macros/README.md **NOTE**: This library is an **internal** crate for the [Slint project](https://slint.rs). This crate should **not be used directly** by applications using Slint. You should use the `slint` crate instead. **WARNING**: This crate does not follow the semver convention for versioning and can only be used with `version = "=x.y.z"` in Cargo.toml. --- ## File: api/node/README.md # Slint-node (Beta) [](https://www.npmjs.com/package/slint-ui) [Slint](https://slint.dev/) is a UI toolkit that supports different programming languages. Slint-node is the integration with Node.js. To get started you use the [walk-through tutorial](https://slint.dev/docs/slint/tutorial/quickstart). We also have a [Getting Started Template](https://github.com/slint-ui/slint-nodejs-template) repository with the code of a minimal application using Slint that can be used as a starting point to your program. **Warning: Beta** Slint-node is still in the early stages of development: APIs will change and important features are still being developed. ## Slint Language Manual The [Slint Language Documentation](../slint) covers the Slint UI description language in detail. ## API documentation (local build) Published API docs for this binding live under [slint.dev …/docs/node/](https://slint.dev/latest/docs/node/). See [docs/building.md](../../docs/building.md#nodejs-api-docs) and [docs/nodejs/README.md](../../docs/nodejs/README.md). ## Installing Slint Slint is available via NPM, so you can install by running the following command: ```sh npm install slint-ui ``` This requires **[Node.js](https://nodejs.org/download/release/)** (v20 or newer). Pre-built binaries are included for Linux (x86-64 and ARM64, glibc), macOS (ARM64), and Windows (x86-64 and ARM64). ### Building from Source On platforms without pre-built binaries, build Slint-node from a checkout of this repository by running `pnpm install && pnpm build` in `api/node`. You need to install the following components: * **[pnpm](https://www.pnpm.io/)** * **[Rust compiler](https://www.rust-lang.org/tools/install)** You will also need a few more dependencies, see ## Using Slint First, import the API from the `slint-ui` module. In the following examples we're using [ECMAScript module syntax](https://nodejs.org/api/esm.html#modules-ecmascript-modules), but if you prefer you can also import the API using [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs-modules) syntax. To initialize the API, you first need to import the `slint-ui` module in our code: ```js import * as slint from "slint-ui"; ``` Next, load a slint file with the `loadFile` function: ```js let ui = slint.loadFile("ui/main.slint"); ``` Combining these two steps leads us to the obligatory "Hello World" example: ```js import * as slint from "slint-ui"; let ui = slint.loadFile(new URL(".ui/main.slint", import.meta.url)); let main = new ui.Main(); main.run(); ``` For a full example, see [/examples/todo/node](https://github.com/slint-ui/slint/tree/master/examples/todo/node). ## API Overview ### Instantiating a Component The following example shows how to instantiate a Slint component from JavaScript. **`ui/main.slint`** ```slint export component MainWindow inherits Window { callback clicked <=> i-touch-area.clicked; in property counter; width: 400px; height: 200px; i-touch-area := TouchArea {} } ``` Each exported Window component is exposed as a type constructor. The type constructor takes as parameter an object which allow to initialize the value of public properties or callbacks. A name declared with a dash in `.slint` can be given either as declared (`"my-property"`) or with underscores (`my_property`), which is how it is exposed on the instance. **`main.js`** ```js import * as slint from "slint-ui"; // In this example, the main.slint file exports a module which // has a counter property and a clicked callback let ui = slint.loadFile(new URL("ui/main.slint", import.meta.url)); let component = new ui.MainWindow({ counter: 42, clicked: function() { console.log("hello"); } }); ``` ### Accessing a property Properties declared as `out` or `in-out` in `.slint` files are visible as JavaScript on the component instance. ```js component.counter = 42; console.log(component.counter); ``` ### Callbacks Callbacks in Slint can be defined using the `callback` keyword and can be connected to a callback of an other component using the `<=>` syntax. **`ui/my-component.slint`** ```slint export component MyComponent inherits Window { callback clicked <=> i-touch-area.clicked; width: 400px; height: 200px; i-touch-area := TouchArea {} } ``` The callbacks in Slint are exposed as properties in JavaScript and that can be called as a function. **`main.js`** ```js import * as slint from "slint-ui"; let ui = slint.loadFile(new URL("ui/my-component.slint", import.meta.url)); let component = new ui.MyComponent(); // connect to a callback component.clicked = function() { console.log("hello"); }; // emit a callback component.clicked(); ``` ### Functions Functions in Slint can be defined using the `function` keyword. **`ui/my-component.slint`** ```slint export component MyComponent inherits Window { width: 400px; height: 200px; public function my-function() -> int { return 42; } } ``` If the function is marked `public`, it can also be called from JavaScript. **`main.js`** ```js import * as slint from "slint-ui"; let ui = slint.loadFile(new URL("ui/my-component.slint", import.meta.url)); let component = new ui.MyComponent(); // call a public function let result = component.my_function(); ``` ### Type Mappings The types used for properties in .slint design markup each translate to specific types in JavaScript. The follow table summarizes the entire mapping: | `.slint` Type | JavaScript Type | Notes | | --- | --- | --- | | `int` | `Number` | | | `float` | `Number` | | | `string` | `String` | | | `color` | `RgbaColor` | | | `brush` | `Brush` | | | `image` | `ImageData` | | | `data-transfer` | `DataTransfer` | Drag-and-drop and clipboard payload; usually obtained from a callback parameter. See [Drag and Drop](https://docs.slint.dev/latest/docs/guide/development/drag-and-drop/). | | `length` | `Number` | | | `physical_length` | `Number` | | | `duration` | `Number` | The number of milliseconds | | `angle` | `Number` | The angle in degrees | | structure | `Object` | Structures are mapped to JavaScript objects where each structure field is a property. | | array | `Array` or any implementation of Model | | | `styled-text` | `StyledText` | Use `StyledText.fromMarkdown()` or `StyledText.fromPlainText()` to create. | | enumeration | `String` | The value of an enum | ### Arrays and Models For property of array type, they can either be set using an array. In that case, getting the property also return an array. If the array was set within the .slint file, the array can be obtained ```js component.model = [1, 2, 3]; // component.model.push(4); // does not work, because it operate on a copy // but re-assigning works component.model = component.model.concat(4); ``` Another option is to set a model object. A model object has the following function: * `rowCount()`: returns the number of element in the model. * `rowData(index)`: return the row at the given index * `setRowData(index, data)`: called when the model need to be changed. `this.notify.rowDataChanged` must be called if successful. As an example, here is the implementation of the `ArrayModel` (which is available as `slint.ArrayModel`) ```js import * as slint from "slint-ui"; let array = [1, 2, 3]; export class ArrayModel extends slint.Model { private a: Array constructor(arr: Array) { super(); this.a = arr; } rowCount() { return this.a.length; } rowData(row: number) { return this.a[row]; } setRowData(row: number, data: T) { this.a[row] = data; this.notify.rowDataChanged(row); } push(...values: T[]) { let size = this.a.length; Array.prototype.push.apply(this.a, values); this.notify.rowAdded(size, arguments.length); } remove(index: number, size: number) { let r = this.a.splice(index, size); this.notify.rowRemoved(index, size); } get length(): number { return this.a.length; } values(): IterableIterator { return this.a.values(); } entries(): IterableIterator<[number, T]> { return this.a.entries() } } let model = new ArrayModel(array); component.model = model; model.push(4); // this works // does NOT work, getting the model does not return the right object // component.model.push(5); ``` ### structs An exported struct can be created either by defining an object literal or by using the new keyword. **`my-component.slint`** ```slint export struct Person { name: string, age: int } export component MyComponent inherits Window { in-out property person; } ``` **`main.js`** ```js import * as slint from "slint-ui"; let ui = slint.loadFile(new URL("my-component.slint", import.meta.url)); let component = new ui.MyComponent(); // object literal component.person = { name: "Peter", age: 22 }; // new keyword (sets property values to default e.g. '' for string) component.person = new ui.Person(); // new keyword with parameters component.person = new ui.Person({ name: "Tim", age: 30 }); ``` ### enums A value of an exported enum can be set as string or by using the value from the exported enum. **`my-component.slint`** ```slint export enum Position { top, bottom } export component MyComponent inherits Window { in-out property position; } ``` **`main.js`** ```js import * as slint from "slint-ui"; let ui = slint.loadFile(new URL("my-component.slint", import.meta.url)); let component = new ui.MyComponent(); // set enum value as string component.position = "top"; // use the value of the enum component.position = ui.Position.bottom; ```