Examples

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

A simple todo application based on the Model View Controller pattern. Project... | Wasm Demo

Wasm MVC Demo | | Carousel | A custom carousel widget that can be controlled by touch, mouse and keyboard. Project... | Wasm Demo | | Slide Puzzle | Puzzle game based on a Flutter example. Project... | Wasm Demo | | Memory Game | A basic memory game used as an example the tutorial. Project... | Wasm Demo | | IOT Dashboard | AA clone of one demo from the QSkinny framework. Also shows how to dynamically load widgets from C++. Project... | | | Image Filter | A Rust-only example that shows how to use the Rust image crate to do image manipulationsand feed the result into Slint. Project... | Wasm Demo | | 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. Project... | Wasm Demo | | Using Bash | Some examples of how to use the slint-viewer to add a GUI to shell scripts. Project... | | | OpenGL Underlay | A Rust and C++ example that shows how render Slint on top of graphical effect rendered using custom OpenGL code. Project... | Wasm Demo | | OpenGL | 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. Project... | | | FFmpeg | A Rust example that shows how render video frames with FFmpeg within a Slint scene.
Project... | | | Maps | A rust example that load image tiles asynchronously from OpenStreetMap server and allow panning and zooming. Project... | | | Virtual Keyboard | A Rust and C++ example that shows how to implement a custom virtual keyboard in Slint. Project... | | | 7GUIs | Our implementations of the "7GUIs" Tasks. Project... | | | Slint & Bevy | A demo that shows how to embed Bevy into Slint Project... | | | Bevy & Slint | A demo that shows how to embed Slint into Bevy Project... | |

Additional Examples

These examples demonstrate specialized features or integrations:

Embedded/MCU Examples

Platform Integration Examples

External examples

Loading the example with the viewer

Simply load the .slint file with the viewer application

cargo run --release --bin slint-viewer -- examples/gallery/gallery.slint

Running the Rust Examples

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

cd examples/gallery
cargo run --release

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

cargo run --release --bin gallery

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/imagefilter/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 pnpm, for example:

cd examples/todo/node
pnpm install
pnpm start