examples

Examples

These examples demonstrate the main features of Slint and how to use them in different language environments.

printerdemo

A fictional user interface for the touch screen of a printer

.slint Design	Rust Source	C++ Source	Node Source	Online wasm Preview	Open in SlintPad
ui.slint	main.rs	main.cpp	main.js	Online simulation	Preview in Online Code Editor

gallery

A simple application showing the different widgets

.slint Design	Rust Source	C++ Source	Online wasm Preview	Open in SlintPad
gallery.slint	main.rs	main.cpp	Online simulation	Preview in Online Code Editor

energy-monitor

A fictional user interface of a device that monitors energy consumption in a building.

.slint Design	Rust Source	Online wasm Preview	Open in SlintPad
desktop_window.slint	main.rs	Online simulation	Preview in Online Code Editor

todo

A simple todo mvc application

.slint Design	Rust Source	C++ Source	NodeJS	Online wasm Preview	Open in SlintPad
todo.slint	main.rs	main.cpp	main.js	Online simulation	Preview in Online Code Editor

carousel

A custom carousel widget that can be controlled by touch, mouse and keyboard

The example can be run on desktop, wasm and mcu platforms

.slint Design	Rust Source	C++ Source	Node Source	Online wasm Preview	Open in SlintPad
ui.slint	main.rs	main.cpp	main.js	Online simulation	Preview in Online Code Editor

slide_puzzle

Puzzle game based on a Flutter example. See Readme

.slint Design	Rust Source	Online wasm Preview	Open in SlintPad
slide_puzzle.slint	main.rs	Online simulation	Preview in Online Code Editor

memory

A basic memory game used as an example the tutorial:

• Memory Game Tutorial (Rust)
• Memory Game Tutorial (C++)

.slint Design	Rust Source	C++ Source	Online wasm Preview	Open in SlintPad
memory.slint	main.rs	memory.cpp	Online simulation	Preview in Online Code Editor

iot-dashboard

A clone of one demo from the QSkinny framework.

Also show how a way to dynamically load widgets with the interpreter from C++.

.slint Design	C++ Source	Online wasm Preview	Open in SlintPad
main.slint	main.cpp	Online preview	Preview in Online Code Editor

imagefilter

A Rust-only example that shows how to use the Rust image crate to do image manipulations and feed the result into Slint.

Source	Online wasm Preview
main.rs	Online simulation

plotter

A Rust-only example that shows how to use the Rust plotters crate to do plot a graph and integrate the result into Slint.

.slint Design	Rust Source	Online wasm Preview
plotter.slint	main.rs	Online simulation

bash

Some examples of how to use the slint-viewer to add a GUI to shell scripts.

opengl_underlay

A Rust and C++ example that shows how render SixtyFPS on top of graphical effect rendered using custom OpenGL code. For more details check out the Readme.

.slint Design	Rust Source	C++ Source	Online wasm Preview
scene.slint	main.rs	main.cpp	Online simulation

7guis

Our implementations of the "7GUIs" Tasks.

External examples

• Cargo UI: A rust application that makes use of threads in the background.

Loading the example with the viewer

Simply load the .slint file with the viewer application

cargo run --release --bin slint-viewer -- examples/printerdemo/ui/printerdemo.slint

Running the Rust Examples

You can run the examples either by going into the rust sub-folder and use cargo run, for example:

cd examples/printerdemo/rust
cargo run --release

or you can run them from anywhere in the Cargo workspace by name:

cargo run --release --bin printerdemo

Wasm builds

In order to make the wasm build of the example, you first need to edit the Cargo.toml files to uncomment the line starting with #wasm# (or use the sed line bellow) You can then use wasm-pack (which you may need to obtain with cargo install wasm-pack). This will generate the wasm in the ./pkg directory, which the index.html file will open. Since wasm files cannot be served from file:// URL, you need to open a wab server to serve the content

cd examples/printerdemo/rust
sed -i "s/^#wasm# //" Cargo.toml
wasm-pack build --release --target web
python3 -m http.server

Running the C++ Examples

• When compiling Slint from sources: If you follow the C++ build instructions, this will build the C++ examples as well by default
• From installed binary packages: Simply run cmake in one of the example directory containing a CMakeLists.txt

mkdir build && cd build
cmake -GNinja -DCMAKE_PREFIX_PATH="<path to installed>" ..
cmake --build .

Running the Node Examples

You can run the examples by going into the node sub-folder and use npm, for example:

cd examples/printerdemo/node
npm install
npm start