# Examples
These examples demonstrate the main features of Slint and how to use them in different language environments.
| Thumbnail | Description | Example |
| --- | --- | --- |
| [Widget Gallery ](./gallery/) | A simple application showing the different widgets.
[Project...](./gallery) | [Wasm Demo](https://slint.dev/snapshots/master/demos/gallery/) |
| [Energy Meter](./energy-monitor/) | A fictional user interface of a device that monitors energy consumption in a building.
[Project...](./energy-monitor) | [Wasm Demo](https://slint.dev/snapshots/master/demos/energy-monitor/) |
| [Todo app](./todo/) | A simple todo application.
[Project...](./todo)
A simple todo application based on the [Model View Controller](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller) pattern.
[Project...](./todo-mvc) | [Wasm Demo](https://slint.dev/snapshots/master/demos/todo/)
[Wasm MVC Demo](https://slint.dev/snapshots/master/demos/todo-mvc/) |
| [Carousel](./carousel/) | A custom carousel widget that can be controlled by touch, mouse and keyboard.
[Project...](./carousel) | [Wasm Demo](https://slint.dev/snapshots/master/demos/carousel/) |
| [Slide Puzzle](./slide_puzzle/) | Puzzle game based on a Flutter example.
[Project...](./slide_puzzle) | [Wasm Demo](https://slint.dev/snapshots/master/demos/slide_puzzle/) |
| [Memory Game](./memory/) | A basic memory game used as an example the tutorial.
[Project...](./memory) | [Wasm Demo](https://slint.dev/snapshots/master/demos/memory/) |
| [IOT Dashboard](./iot-dashboard/) | AA clone of one demo from the [QSkinny framework](https://qskinny.github.io/).
Also shows how to dynamically load widgets from C++.
[Project...](./iot-dashboard) | |
| [Image Filter](./imagefilter/) | A Rust-only example that shows how to use the Rust image crate to do image manipulationsand feed the result into Slint.
[Project...](./imagefilter/) | [Wasm Demo](https://slint.dev/snapshots/master/demos/imagefilter/) |
| [Plotter](./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...](./plotter/) | [Wasm Demo](https://slint.dev/snapshots/master/demos/plotter/) |
| [Using Bash](./bash/) | Some examples of how to use the `slint-viewer` to add a GUI to shell scripts.
[Project...](./bash/) | |
| [OpenGL Underlay](./opengl_underlay/) | A Rust and C++ example that shows how render Slint on top of graphical effect rendered using custom OpenGL code.
[Project...](./opengl_underlay/) | [Wasm Demo](https://slint.dev/snapshots/master/demos/opengl_underlay/) |
| [OpenGL](./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.
[Project...](./opengl_texture/) | |
| [FFmpeg ](./ffmpeg/) | A Rust example that shows how render video frames with FFmpeg within a Slint scene.
[Project...](./ffmpeg/) | |
| [Maps](./maps/) | A rust example that load image tiles asynchronously from OpenStreetMap server and allow panning and zooming.
[Project...](./maps/) | |
| [Virtual Keyboard](./virtual_keyboard/) | A Rust and C++ example that shows how to implement a custom virtual keyboard in Slint.
[Project...](./virtual_keyboard/) | |
| [7GUIs](./7guis/) | Our implementations of the ["7GUIs"](https://7guis.github.io/7guis/) Tasks.
[Project...](./7guis/) | |
| [Slint & Bevy](./bevy/slint-hosts-bevy/) | A demo that shows how to embed [Bevy](https://bevyengine.org) into Slint
[Project...](./bevy/slint-hosts-bevy) | |
| [Bevy & Slint](./bevy/bevy-hosts-slint/) | A demo that shows how to embed Slint into [Bevy](https://bevyengine.org)
[Project...](./bevy/bevy-hosts-slint) | |
### Additional Examples
These examples demonstrate specialized features or integrations:
| Example | Description |
| --- | --- |
| [fancy_demo](./fancy_demo/) | Custom widget implementations built from scratch (buttons, sliders, checkboxes, MDI windows) |
| [fancy-switches](./fancy-switches/) | Fancy toggle switch animations |
| [dial](./dial/) | Rotary dial control |
| [speedometer](./speedometer/) | Animated speedometer gauge |
| [orbit-animation](./orbit-animation/) | Orbital animation effects |
| [sprite-sheet](./sprite-sheet/) | Sprite sheet animation |
| [repeater](./repeater/) | Demonstrates the `for` repeater element |
| [gstreamer-player](./gstreamer-player/) | Video playback using GStreamer |
| [wgpu_texture](./wgpu_texture/) | Custom rendering with wgpu into a Slint texture |
### Embedded/MCU Examples
| Example | Description |
| --- | --- |
| [mcu-board-support](./mcu-board-support/) | Board support packages for various MCU targets |
| [mcu-embassy](./mcu-embassy/) | Embassy async runtime integration for MCUs |
| [uefi-demo](./uefi-demo/) | Running Slint in a UEFI environment |
### Platform Integration Examples
| Example | Description |
| --- | --- |
| [cpp](./cpp/) | C++ platform API examples (native WIN32, Qt integration, Qt viewer) |
| [servo](./servo/) | Integration with the Servo web engine |
| [safe-ui](./safe-ui/) | Safety-critical UI patterns |
#### External examples
| Thumbnail | Description |
| --- | --- |
| [Cargo UI](https://github.com/slint-ui/cargo-ui) | A rust application that makes use of threads in the background.
[Project...](https://github.com/slint-ui/cargo-ui) |
---
### Loading the example with the `viewer`
Simply load the .slint file with the viewer application
```sh
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:
```sh
cd examples/gallery
cargo run --release
```
or you can run them from anywhere in the Cargo workspace by name:
```sh
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
```sh
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](/docs/building.md#c-build), this will build the C++
examples as well by default
* **From [installed binary packages](/api/cpp/README.md#binary-packages):** Simply run cmake in one of the example directory containing a CMakeLists.txt
```sh
mkdir build && cd build
cmake -GNinja -DCMAKE_PREFIX_PATH="" ..
cmake --build .
```
---
### Running the Node Examples
You can run the examples by going into the node sub-folder and use [`pnpm`](https://pnpm.io), for example:
```sh
cd examples/todo/node
pnpm install
pnpm start
```