Skip to content

Web

Slint applications run on desktop, embedded, and mobile platforms. Slint applications written with Rust can also be cross-compiled to WebAssembly (Wasm) and run in the web browser.

Slint renders your UI into a HTML <canvas> element using WebGL, without using the DOM or CSS. This results in a consistent look across platforms, but also introduces some limitations:

  • Slint renders text directly, instead of benefitting from the browser’s text rendering.
  • Accessibility features (such as screen readers) are not available.
  • The UI does not behave like a typical web application, since it doesn’t use standard HTML elements.

Because of these trade-offs, running Slint in the browser is currently not recommended for building general-purpose web applications. Instead, it is best suited for:

  • Demos and examples that can run directly in the browser without requiring installation.
  • Applications where the web is not the primary platform, but a consistent UI is still needed.
  • Tools or dashboards where native-style rendering is more important than web integration.

For a step-by-step walkthrough, check out the last chapter of the quickstart.

Below is a summary of the main steps:

In your Cargo.toml, set the crate type to "cdylib" and add wasm-bindgen as a dependency for the “wasm” target:

[lib]
#...
crate-type = ["cdylib"]
[target.'cfg(target_family = "wasm")'.dependencies]
wasm-bindgen = { version = "0.2" }
toml

Use the wasm-bindgen(start) attribute to mark the application’s entry point. The UI is created and run as usual:

#[cfg(target_family = "wasm")]
use wasm_bindgen::prelude::*;
slint::include_modules!(); // or slint!(...)
#[cfg_attr(target_family = "wasm", wasm_bindgen(start))]
pub fn main() {
// Usual application code
let main_window = MainWindow::new().unwrap();
main_window.run().unwrap();
}
rust

Build the application using wasm-pack.

Terminal window
wasm-pack build --release --target web
bash

This creates a pkg/ directory with .wasm and .js files, including a JavaScript file named after your package.

Import the wasm binary in your HTML file. Slint expects a <canvas> HTML element with id = "canvas".

<canvas id="canvas"></canvas>
<script type="module">
import init from "./pkg/YOUR_APPLICATION.js";
init();
</script>
html

Replace YOUR_APPLICATION with the name of your crate.


© 2026 SixtyFPS GmbH