Slint Slint
Get StartedContact 21k

Design. Develop. Iterate.

Speed up development through rapid iterations and AI agents.

Live-Preview

Reloads UI changes automatically while the business logic stays connected, so you can iterate without recompiling or restarting your app.

Set up Live-Preview →

AI Coding Assistants

Skills for AI coding agents, plus an MCP server to allow agents to inspect the UI, simulate input events, and capture screenshots.

Set up your assistant →

Multiple IDE integrations

Syntax highlighting Code completion Diagnostics Jump to definition Refactoring
Set up your editor →

Components

Fluent ships with Slint and Material 3 is an import away, or build your own, as the third tab does. Every panel below is real Slint, compiled to WebAssembly and running now.

std-widgets.slintlive · WASM
A Fluent settings pane: a search field and a style picker above a System page, with a slider for brightness, a checkbox for email notifications, a switch for eco mode and a progress bar for an upload, then primary, standard and disabled buttons.
material.slint.devlive · WASM

The Material 3 gallery is a separate 8 MB app on material.slint.dev.

The Material 3 gallery: a search bar, a bottom app bar with a floating action button, and a navigation bar.
components.slintlive · WASM
A custom component set: primary, secondary, outline and ghost buttons, a switch, a checkbox and a brightness slider.

Figma to Slint

A Figma plugin that exports variables (colours, numbers, strings and booleans) into .slint files, with Figma modes becoming the enum your themes switch on.

Export your tokens →
Figma to Slintdesign-tokens.slint
Figma variables brand/primary brand/accent surface/base radius/card
→
export global colors {
  out property <brush>
    brand-primary: #2379F4;
  out property <brush>
    brand-accent: #2FD39B;
}