DRAFT: Slint 1.19 Released

We're happy to announce Slint 1.19. This release lets your project keep its behavior across Slint upgrades, adds glass effects and animated images, and makes TypeScript a first-class way to write Slint apps.

Upgrade Without Surprises

Sometimes we find that the language does something it shouldn't, and fixing it would change how existing code behaves. Until now, we had to choose between keeping the bug and breaking your UI. With editions, we no longer have to.

An edition is the Slint release whose language behavior your project uses. Set it in the new slint-project.json file:

{
    "slint-edition": "1.19",
    "main": "ui/main.slint",
    "experimental-features": ["match"]
}

Newer versions of Slint keep compiling your project the way your edition's release did, until you raise the edition. New features work with any edition. Edition 1.19 fixes two long-standing layout issues: an element created with if or for now counts toward its parent's size (#407), and a property set by only some states keeps its default in the others (#8852). The editions guide shows how to update code that relied on the old behavior.

The project file also collects the main file, include paths, library paths, and experimental features in one place. Pass the project directory instead of a .slint file to slint_build::compile(), slint_target_sources, loadFile(), or slint.load_file(). In the slint! macro, select the edition with #[slint_edition = "1.19"].

Experimental features are now enabled by name, so you only opt into the ones you use. SLINT_ENABLE_EXPERIMENTAL_FEATURES=1 is now an error.

To phase out parts of your own components' API, mark a property, callback, or function with @deprecated. Your users get a warning with your message, and their code keeps compiling:

@deprecated("Use 'new-prop' instead") in-out property <int> old-prop <=> new-prop;

Glass, Motion, and Animated Images

Give your UI a frosted glass look with backdrop-blur on a Rectangle. It blurs whatever is drawn underneath, and the Skia and FemtoVG renderers support it.

Here's the code for the clip above. The card is a translucent Rectangle, and animation-tick() moves the circles behind it:

component Circle inherits Rectangle {
    in property <length> size;
    in property <angle> angle;
    width: size;
    height: size;
    border-radius: size / 2;
    x: 320px - size / 2 + 150px * cos(angle);
    y: 180px - size / 2 + 70px * sin(angle);
}

export component Example inherits Window {
    in-out property <float> t: mod(animation-tick() / 3s, 1);
    width: 640px;
    height: 360px;
    background: #1b1b33;

    Circle { size: 160px; angle: t * 360deg; background: #ff6b6b; }
    Circle { size: 190px; angle: t * 360deg + 120deg; background: #4ecdc4; }
    Circle { size: 110px; angle: t * 360deg + 240deg; background: #ffd93d; }

    Rectangle {
        width: 360px;
        height: 180px;
        border-radius: 24px;
        border-width: 1px;
        border-color: #ffffff70;
        background: #ffffff26;
        backdrop-blur: 18px;
        Text {
            text: "Frosted Glass";
            font-size: 34px;
            font-weight: 700;
            color: white;
        }
    }
}

The Image element now plays animated GIF, PNG, and WebP images. Drop in a loading spinner or an animated illustration without decoding frames yourself.

Respect the users who find motion distracting. When they turn on reduced motion in their operating system, Slint skips animations and flings, with no change to your code. For now, Slint reads this setting on Windows.

Paths gain dashed strokes with stroke-dash-array and stroke-dash-offset, and @radial-gradient supports the ellipse shape.

Scroll Into View

Bring any element into view with the new ensure-visible() function. It scrolls the enclosing Flickable, even when it isn't the direct parent:

search-result.ensure-visible(ScrollBehavior.smooth);

Scroll to a position with Flickable.scroll-to(), or to a row with ListView.ensure-row-visible(). Flicking also follows the platform convention on iOS and Android, and we fixed several input issues, such as a jump when scrolling starts.

JavaScript and TypeScript

Slint for JavaScript keeps getting more ready for real applications. In 1.17 and 1.18, we tied Slint's event loop to Node.js on every desktop platform. An idle app no longer burns CPU. With 1.19, .slint files are ES modules that you import like any other module, and TypeScript knows their types:

import * as slint from "slint-ui";
import { MainWindow, TodoItem } from "./ui/todo.slint";

const app = new MainWindow();
const model = new slint.ArrayModel<TodoItem>([
    { title: "Write some TypeScript code", checked: true },
]);
app.todo_model = model;
app.todo_added = (text: string) => model.push({ title: text, checked: false });
app.run();

Generate the declarations with slint-compiler, which is now published to npm:

npx slint-compiler -f typescript ui/todo.slint -o ui/todo.slint.d.ts

Your editor then completes properties and callbacks, and tsc checks them. The same code runs on Node.js, Deno, and Bun once you load slint-ui/register. When you ship, bundle your app with the new slint-ui/esbuild plugin.

Filter, sort, and map your data with FilterModel, SortModel, ReverseModel, and Model.map(), like in the other language bindings. During development, set SLINT_LIVE_PREVIEW to reload your UI as you edit the .slint files.

Node.js 22.18 or newer is now required. See the GitHub release page for the other breaking changes.

Other Fixes and Improvements

But wait, there's more:

• Better compiler diagnostics: a new "info" level suggests cleanups, such as removing bindings to the default value. Unknown names suggest the closest valid name, and a binding loop is reported once, with a suggestion.
• Selectable styled text: set selectable on StyledText to let your users select and copy text.
• Software renderer: drop shadows, text stroke, and gradients on Path now work on microcontrollers too. Gradients are dithered on RGB565 displays to avoid banding.
• LinuxKMS: scroll with a mouse wheel or touch pad, pick the resolution and refresh rate with SLINT_DRM_MODE, and render on a leased DRM device.
• Android: text selection, its menu, and its handles behave like in native text fields, and physical keyboards follow the keyboard layout.
• C++ on the web and iOS: build your C++ application for the web with Emscripten, or for iOS. Select a backend, renderer, or graphics API with the new slint::select_backend().
• CPU-only Skia: the renderer-skia-software feature builds Skia without GPU support.
• Faster startup: Slint discovers system fonts in the background, and we fixed the default font family on macOS, iOS, and Windows.
• Tooling: the live preview keeps animations running while it reloads, and the Figma plugin has an offline preview and a project export.

For the full picture, see the ChangeLog.

Getting Started with Slint 1.19

• New to Slint? Start here: Get Started
• Upgrading? Follow the steps on our GitHub release page
• Browse the latest docs at https://docs.slint.dev

Don't forget to star us on GitHub, join our Mattermost chat, and share your projects.

Thanks

Big thanks to everyone who contributed code, fixes, or feedback. You help us make Slint better with every release.

@0x6e @0xrariux @almightychang @Aphyra0 @barafael @benbaker76 @bigtree108-dmytro @cetra3 @D0n9 @DataTriny @davidscottpope-gif @dfaure-kdab @fieran100 @gmittone @ikskoder @janekbt @jessolmstead @jfarmer @John-Giskhan @kaixinol @koichiro @lzm-build @MannXo @manushT @maxekman @MCJEModder2026 @Montel @npwoods @Nubuki-all @okhsunrog @pataar @PaulDance @R-Cramer4 @redstrate @sergio-kdab @Sporknife @task-jp @teolines @the-argus @tilladam @tkng