DOCSEARCHbyAlgolia
Submit Docs

Slint Declarative GUI Toolkit

repository·master·Indexed 12 days ago

https://github.com/slint-ui/slint

A declarative GUI toolkit for building native user interfaces for embedded systems, desktops, and mobile platforms using a specialized markup language. Slint provides bindings for C++, Node.js (via slint-ui), and Python, with specific support for ESP-IDF on ESP32-S3 devices and integration with Briefcase for standalone Python applications.

Tokens
278.4K
Snippets
892
Records
1.4K
Agent score
96%

What's inside Slint

  1. Overview of Slint LSP Features

    master

    The Slint Language Server Protocol (LSP) server provides a suite of IDE features specifically for .slint files. Key capabilities include:

    • Code completion: Suggestions for properties, elements, and types.
    • Hover: Displaying type information and documentation.
    • Go-to-definition: Navigating to declarations.
    • Semantic tokens: Providing data for advanced syntax highlighting.
    • Document symbols: Generating an outline view of the document.
    • Rename: Refactoring support for identifiers.
    • Formatting: Automatic code formatting.
    • Live preview: Real-time UI preview with hot reload support.

  2. What is Slint?

    master
    Slint is an open-source declarative GUI toolkit designed for building native user interfaces across embedded systems, desktops, and mobile platforms. It uses a dedicated markup language (.slint) to separate UI design from business logic. This allows designers to work in parallel with developers who implement logic in Rust, C++, JavaScript, or Python.

  4. Explore Slint documentation structure

    master

    The Slint documentation is organized by language bindings and subsystem deep-dives. Depending on your needs, you should navigate to the following sections:

    • Language-specific APIs:
      • cpp/: C++ API documentation.
      • nodejs/: Node.js API documentation.
      • python/: Python API documentation.
    • Core Subsystems: Deep dives into compiler internals, layout, rendering, and the item tree are located in the development/ directory.
    • Platform Specifics:
      • ios.md: Building slint-viewer for iOS / TestFlight.
      • torizon.md: Deploying to Torizon.
      • install_qt.md: Instructions for installing Qt.
    • Getting Started:
      • Use building.md to learn how to build Slint.
      • Use development.md to understand the repository structure and contribution workflow.

  5. Explore Slint documentation and resources

    master

    Slint documentation is organized into several key sections to help you build GUIs for Embedded, Desktop, and Mobile platforms:

    • Guide: Covers Slint development tooling (including Slint Language Server (LSP) IDE integration and Slint Viewer) and explains core Slint language concepts.
    • Reference: Provides the API reference for the Slint language, including elements, properties, functions, callbacks, namespaces, and the std-widgets library (a set of cross-platform components for desktop applications).
    • Tutorial: A step-by-step guide that walks you through creating a simple memory game to teach application structuring.
    • Language Integrations: Detailed API references for using Slint with Rust, C++, JavaScript, and Python.

    If you need support, you can use the following channels:

  6. Use Slint-fmt to format .slint files

    master
    Slint-fmt is a tool designed to format .slint syntax files. Note that this tool is in an early stage of development and may not support all parts of the Slint language. If you encounter unsupported syntax, please report it by opening an issue with the specific code example and your expected output.

  7. Use Material Design 3 components in Slint

    master

    The Material Design 3 component set for Slint provides UI components that adhere to the official Material Design 3 guidelines. These components are designed for a variety of platforms, including Android apps, touch-friendly embedded device interfaces, and desktop applications.

    To use these components in your own project, it is recommended to start with one of the official language-specific templates provided by the community.

  8. Explore Slint feature examples

    master

    The Slint repository contains various examples categorized by use case:

    General UI & Logic

    • Widget Gallery: Shows different Slint widgets.
    • Todo App: Demonstrates the Model-View-Controller (MVC) pattern.
    • Drag-and-Drop Kanban: Demonstrates the drag-and-drop API.
    • Carousel: Custom widget controlled by touch, mouse, and keyboard.

    Advanced Graphics & Integration

    • Image Filter / Plotter: Integrating Rust crates (image, plotters) with Slint.
    • OpenGL Underlay / Texture: Rendering Slint on top of custom OpenGL or rendering OpenGL into a Slint texture.
    • FFmpeg: Rendering video frames within a Slint scene.
    • Bevy Integration: Embedding Slint in the Bevy engine or vice versa.

    Specialized & Embedded

    • Embedded/MCU: Examples for MCU targets, Embassy async runtime, and UEFI environments.
    • Platform Integration: C++ platform APIs (Win32, Qt), Servo integration, and safety-critical UI patterns.

  9. Use the `vtable` crate to create FFI-friendly virtual tables

    master
    The vtable crate provides a macro designed to create virtual tables (vtables) that are compatible with Foreign Function Interface (FFI) requirements. This is useful when you need to implement polymorphism across language boundaries or within low-level Rust code where stable memory layouts are required.

  10. Understand the Slint Input & Event System

    master

    Slint's input system manages mouse, touch, keyboard events, and focus management. Events originate from the platform (e.g., winit, Qt) and flow through the window to the items in the item tree.

    Key capabilities include:

    • Mouse/Touch: Press, release, move, wheel, drag-drop, and gestures (pinch/rotation).
    • Keyboard: Key press/release, text input, and IME composition.
    • Focus Management: Tab navigation, programmatic focus, and focus delegation.
    • Event Filtering: Items can intercept, delay, or forward events to children or parents.