Web

Every page of the Slint documentation has a Markdown version, ~10x smaller. Replace a link's trailing slash with .md: this page is /master/docs/slint/guide/platforms/web.md. /master/docs/slint/llms.txt lists all pages.

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

Note

Rust applications use the Winit backend with the FemtoVG renderer. C++ applications are built with Emscripten ↗ and use Slint’s Emscripten backend, with the FemtoVG renderer or the software renderer.

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.

Building for Wasm

Rust

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 ↗.

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.

Note

Many web browser load .wasm files only in trusted contexts. If during development you observe the browser producing permission errors, then you may need to serve files through a web server, instead of the file system directly.

C++

A Slint C++ application for the web is a standard CMake project (see the getting started tutorial), built with the Emscripten ↗ toolchain.

Install the prerequisites:

• The Emscripten SDK ↗.
• The Rust Emscripten toolchain: run rustup target add wasm32-unknown-emscripten.
• CMake ↗ 3.21 or newer, and optionally Ninja ↗.

When you configure Slint with Emscripten’s toolchain, its CMakeLists.txt automatically:

• Builds Slint for the wasm32-unknown-emscripten Rust target as a static library.
• Enables the FemtoVG renderer on WebGL 2 and the software renderer.
• Embeds images and fonts in the binary, since the page can’t read files from the build machine.
• Adds the link options that Slint needs to Slint::Slint.

Your main() function works as it is. run() hands control to the browser and doesn’t return, so code after it doesn’t run.

Caution

Compile your C++ code without exception support, which is Emscripten’s default: don’t pass -fexceptions or -fwasm-exceptions to the compiler. When run() hands control to the browser, it leaves main() with a JavaScript exception. Code compiled with exceptions runs the destructors in main() on the way out, which destroys your window.

1. Let Emscripten write an HTML page next to the .js and .wasm files:

add_executable(my_app main.cpp)
if(EMSCRIPTEN)
    set_target_properties(my_app PROPERTIES SUFFIX ".html")
endif()

cmake

2. Configure and build with emcmake:

emcmake cmake -S . -B build-web -GNinja -DCMAKE_BUILD_TYPE=Release
cmake --build build-web

bash

3. Serve the output directory through a web server and open my_app.html, for example:

python3 -m http.server -d build-web

bash

To use your own page instead, add a <canvas id="canvas"> and load my_app.js. Slint sizes the canvas to fit the window. To lay out the canvas with the page instead, give it a width and height in its style attribute, for example <canvas id="canvas" style="width: 100%; height: 100vh">.

Slint renders with FemtoVG on WebGL 2. To use the software renderer, set SLINT_BACKEND before the application starts:

var Module = {
    preRun: [() => { ENV.SLINT_BACKEND = "emscripten-software"; }],
};

js

To leave FemtoVG out of the build, configure with -DSLINT_FEATURE_RENDERER_FEMTOVG=OFF.

The Emscripten backend has these limits for now:

• It supports one window, which renders into the canvas.
• The Slint interpreter isn’t available.
• Copy and paste and input method editors (IME) aren’t supported yet.