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.

.slint Design	Rust Source	TypeScript Source	Online wasm Preview
main.slint	main.rs	main.ts	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 Slint 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

opengl_texture

A Rust and C++ example that shows how render a scene with custom OpenGL code into a texture and render that texture within a Slint scene. For more details check out the Readme.

.slint Design	Rust Source	C++ Source
scene.slint	main.rs	main.cpp

ffmpeg

A Rust example that shows how render video frames with FFmpeg within a Slint scene. For more details check out the Readme.

.slint Design	Rust Source
scene.slint	main.rs

virtual keyboard

.slint Design	Rust Source	C++ Source
main_window.slint	main.rs	main.cpp

A Rust and C++ example that shows how to implement a custom virtual keyboard in Slint. For more details check out the Readme.

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