slint-ui/slint

Slint is an open-source declarative GUI toolkit to build native user interfaces for Rust, C++, JavaScript, or Python apps

Summary

Slint is an open-source declarative GUI toolkit: teams define interfaces in .slint markup and connect them to business logic written in Rust, C++, JavaScript, or Python. The README describes ahead-of-time compilation to native code, with runtime support spanning desktop, mobile, web applications, and embedded Linux or microcontrollers such as STM32, ESP32, and RP2040.

What it is useful for

Slint fits projects where UI design needs to stay separate from application logic. A designer can work in the declarative markup while engineers handle state and business rules in a supported host language. The markup describes graphical elements, layout, property bindings, and data flow through different states.

It is also relevant when a team wants one UI approach across platforms or needs to support more than one programming language. The architecture separates the .slint compiler from the runtime. Rendering can use femtovg with OpenGL ES 2.0, skia, or a CPU-based software renderer with no additional dependencies. Native-looking Qt widgets are available through the qt style only when Qt is installed on the system.

There are maturity caveats: the JavaScript/NodeJS and Python integrations are marked Beta in the README. Slint itself follows a stable 1.x API, but the newer language integrations should be evaluated against their own documentation before becoming a project dependency.

How engineers can use it

Start with a component in a .slint file, then connect it to application logic. The README provides this basic Window example:

export component HelloWorld inherits Window {
    width: 400px;
    height: 400px;

    Text {
       y: parent.width / 2;
       x: parent.x + 200px;
       text: "Hello, world";
       color: blue;
    }
}

Choose the integration for the codebase and follow the corresponding README in api: Rust is under api/rs/slint, C++ under api/cpp, JavaScript/NodeJS under api/node, and Python under api/python/slint. The README also links to getting-started templates for each language. It does not provide a complete installation or build command sequence, so use those language-specific READMEs and docs/building.md rather than guessing the setup.

For editing, the repository includes an LSP server with auto-complete and live preview, plus a Visual Studio Code extension. The documented slint-viewer --auto-reload command can preview .slint files when live preview through the LSP is not possible. Use the examples folder for desktop and web demonstrations, and the Figma-to-Slint plugin when designs originate in Figma.