slint/examples

Examples

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

printerdemo

A fictional user interface for the touch screen of a printer

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

gallery

A simple application showing the different widgets

.60 Design	Rust Source	C++ Source	Online wasm Preview	Open in code editor
gallery.60	main.rs	main.cpp	Online simulation	Preview in Online Code Editor

todo

A simple todo mvc application

.60 Design	Rust Source	C++ Source	Node Source	Online wasm Preview	Open in code editor
todo.60	main.rs	main.cpp	main.js	Online simulation	Preview in Online Code Editor

slide_puzzle

Puzzle game based on a Flutter example. See Readme

.60 Design	Rust Source	C++ Source	Node Source	Online wasm Preview	Open in code editor
slide_puzzle.60	main.rs	❌	❌	Online simulation	Preview in Online Code Editor

Loading the example with the viewer

Simply load the .60 file with the viewer application

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

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

Running the C++ Examples

• When compiling SixtyFPS 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 -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