DrawnUI for Rust

Draw your whole UI with Skia, from one Rust source, on every screen. DrawnUI for Rust is a UI engine: layouts, controls you can subclass and paint, gestures, animations, caching, shaders and accessibility, on Windows, macOS, Linux, iOS, Android and in the browser. It shares its controls and rules with DrawnUI for .NET and DrawnUI for React, so one design runs the same in all three.

• Try it in your browser: https://hellorust.drawnui.net (the DrawnUI Hello app, 20 pages)
• Play a game made with it: https://run.drawnui.net (Dungeon Run, a 3D runner drawn with SkMesh)
• Build with AI: a ready AI skill teaches your coding agent DrawnUI for Rust, see AI skills
• Crate: drawnui · API docs: https://docs.rs/drawnui
• Release notes: CHANGELOG.md · Accessibility: ACCESSIBILITY.md · What it shares with DrawnUI for .NET: PARITY.md

use drawnui::prelude::*;

#[derive(Default)]
struct App { count: i32 }

fn build(_app: &mut App) -> Build<SkiaLayout> {
    SkiaLayout::column().spacing(16).padding(24).children((
        SkiaLabel::new("").font_size(24).text_color(Color::WHITE)
            .observe(|me, app: &App| me.set_text(format!("Count {}", app.count))),
        SkiaButton::new("Tap me").on_tapped(|_me, app: &mut App, _cx| app.count += 1),
    ))
}

fn main() {
    drawnui::run("Counter", || Box::new(Ui::new(App::default(), build).font("Default", "assets/OpenSans-Regular.ttf")));
}

Why DrawnUI for Rust

• A complete UI engine, ready to use. Rendering, layouts, gestures, a full set of UI controls and the building blocks to make your own: everything you need to create pixel-perfect apps, out of the box.
• The same pixels everywhere. Every control is drawn by Skia, so your app looks the same on a phone, a desktop and a web page. No native widgets to fight.
• Smooth by design. No garbage collector, so there are no collection pauses in the middle of a scroll or an animation. Caches keep finished parts of the screen as pictures or GPU textures and draw them again instead of repainting them.
• Fast on the web. Your code and Skia live in one WebAssembly module and talk directly, with no JavaScript in between: up to 1.6 times less CPU per frame than CanvasKit driven from JavaScript (see Benchmarks).
• Fluent and familiar. Builders in the style of DrawnUI's C# fluent API: compose, observe your state, handle a tap in one line.
• Accessible. Screen readers on every platform, keyboard navigation with a focus ring, values a screen reader reads and changes.
• AI-ready. A ready-made AI skill teaches Claude Code, Codex, Cursor and other coding agents to build DrawnUI apps the right way, from the first cargo new to the browser and Android builds.
• Nothing to set up. Add one dependency. Skia comes prebuilt for your platform.

Platforms

What's inside

• Layout: Absolute, Column, Row, Wrap, Grid and decorated grids; templated lists with recycling and virtualization; measure / arrange / paint, render transforms, opacity, clipping, z-index.
• Controls: shapes, labels and rich text, buttons, an editor with IME, scroll with scroll bars and pull to refresh, carousels (also with shader transitions), drawer, shell (pages, tabs, popups, modals, toasts), toggles, switch, checkbox, radio buttons, slider, progress, backdrop blur.
• Media: images (decoded off the frame thread), image tiles, SVG, GIF, Lottie, sprites, SkSL shader effects and transitions, SkMesh (your own vertex and fragment programs).
• Caching: every DrawnUI cache type: Operations, OperationsFull, Image, GPU, ImageDoubleBuffered (bitmaps made on background threads on the desktop), ImageComposite. A lost GPU context comes back on its own.
• Input: tap, pan, fling, long press, hover, context menu, mouse wheel and touchpad, keyboard and focus.
• Accessibility: UI Automation on Windows, VoiceOver on macOS and iOS, TalkBack on Android, AT-SPI / Orca on Linux, an ARIA overlay in the browser; selectable text.
• Animation: value, range, spring, ping-pong, pendulum and ripple animators, timers.
• Tested: about 700 headless tests, many of them ports of DrawnUI for .NET's tests with the same numbers.

Crates

An app depends on drawnui only; the Skia crates come with it. Use Skia's API through drawnui::skia (the same as skia_safe, SkMesh included) and do not add skia-safe or skia-bindings to an app: a program links one Skia.

Getting started

The fastest way: copy templates/app, rename myapp, build. It is an empty app with an icon, assets, a web page and build scripts for the desktop, the browser and Android.

Or by hand, in a new project (cargo new myapp), Cargo.toml:

[dependencies]
drawnui = "0.1.0-preview.4"

[profile.release]
lto = "thin"
panic = "abort"

The first build downloads Skia for your platform (11 to 25 MB) from DrawnUi/rust-skia's releases. SKIA_BINARIES_URL points the download at a mirror. Do not set FORCE_SKIA_BINARIES_DOWNLOAD: inside a crate it makes skia-bindings compile Skia from source.

.cargo/config.toml, for the browser's link flags and Android's 16 KB pages:

[target.wasm32-unknown-emscripten]
linker = "em++"
rustflags = [
    "-C", "link-arg=-sMAX_WEBGL_VERSION=2",
    "-C", "link-arg=-sMODULARIZE=1",
    "-C", "link-arg=-sEXPORT_NAME=createDrawnUi",
    "-C", "link-arg=-sEXPORTED_RUNTIME_METHODS=GL,HEAPU8,UTF8ToString",
    "-C", "link-arg=-sALLOW_MEMORY_GROWTH=1",
    # A 1 MB stack with the overflow check: layout and paint walk the tree recursively.
    "-C", "link-arg=-sSTACK_SIZE=1048576",
    "-C", "link-arg=-sSTACK_OVERFLOW_CHECK=1",
    "-C", "link-arg=-sERROR_ON_UNDEFINED_SYMBOLS=0",
]

[target.'cfg(target_os = "android")']
rustflags = ["-C", "link-arg=-Wl,-z,max-page-size=16384"]

The web page loads your build and drawnui_host.js from the same drawnui version (the template's web.ps1 / web.sh copy it for you):

<canvas id="canvas" style="width:100vw;height:100dvh;display:block;touch-action:none"></canvas>
<script src="myapp.js"></script>
<script src="drawnui_host.js"></script>
<script>DrawnUi.start({ canvas: document.getElementById("canvas"), create: createDrawnUi });</script>

Per platform:

• Windows, Linux, macOS: cargo run --release. Assets go next to the executable (the template's build.rs), icon.ico becomes the window and taskbar icon. Linux needs the X11 / Wayland and GL development packages.

• Browser: rustup target add wasm32-unknown-emscripten, emsdk 6 with its tools on PATH, then the template's web.ps1 / web.sh; serve dist/ over http.

• Android: cargo-ndk and NDK 26; cargo ndk ... rustc --lib --release --crate-type cdylib makes the activity's library (android_main in the template's src/lib.rs), packed by Gradle with a GameActivity (templates/fiddle has the Gradle project and build scripts). Add the winit and android-activity fixes to your Cargo.toml:

  [patch.crates-io]
  winit = { git = "https://github.com/DrawnUi/winit", rev = "f1603c5c70f39e93e95839136d1d70c37fbd71f6" }
  android-activity = { git = "https://github.com/DrawnUi/android-activity", rev = "d45520c015edc340c16770c2266d711327ce01f1" }
  

• iOS: dev/ios builds an .app bundle for the simulator, or a signed one for a device.

AI skills

Building with an AI coding agent? Give it the DrawnUI for Rust skill and it writes DrawnUI code the way the engine expects: adding drawnui, fluent builders, controls and layouts, caching, the browser build with its link flags and web page, Android, icons, accessibility.

• Skill file: skills/drawnui-rust/SKILL.md, also at https://hellorust.drawnui.net/skills/drawnui-rust/SKILL.md
• Install for Claude Code: save it as ~/.claude/skills/drawnui-rust/SKILL.md (or in your agent's skill or rules folder).
• For any LLM: https://hellorust.drawnui.net/llms.txt and https://hellorust.drawnui.net/llms-full.txt (every skill in one file).
• The DrawnUI framework skill (controls, layouts, caching across all DrawnUI engines): https://drawnui.net/llms.txt

Benchmarks

The same draw list, N rounded rectangles per frame, 1609x1163 canvas, Chrome on Windows, WebGL2:

Windows desktop (OpenGL): 20,000 draw calls at 60 FPS, 10 to 12 ms CPU. MacBook Air M1 (Metal): 20,000 draw calls at a steady 60 FPS, 10.3 ms CPU. SkMesh: 2,000 animated waves (a vertex program each, one draw call each) in 6.1 ms CPU on the M1, and at 60 FPS in 6.4 ms on a Windows desktop.

The web build links only the Skia code it uses:

Android: Vulkan by default

A phone with a Mali-G57 MC2, 1080x2408, a 90 Hz panel, the same release build on each API. On heavy scenes Vulkan draws 21 to 35 % more frames; where both keep up with the panel, it needs 26 to 59 % less CPU per frame.

OpenGL ES stays available as the fallback and as an option (Ui::gpu_backend).

Building this repository

cargo test -p drawnui -p hellorust                   # headless tests, no window
cargo run --release -p hellorust                     # the demo
cd examples/bench && cargo run --release -- 20000 g0  # 20,000 draw calls
cd examples/bench && cargo run --release -- 2000 mesh # 2,000 animated SkMesh waves
dev/build.ps1 -Example hellorust -WebOnly            # the browser build into target/web/hellorust

The workspace builds against three checkouts next to this repository:

• ../rust-skia: DrawnUi/rust-skia, branch drawnui-crates (git clone -b drawnui-crates https://github.com/DrawnUi/rust-skia.git). Skia downloads prebuilt, as it does for apps.
• ../winit and ../android-activity: upstream plus one fix each; the commands are in dev/winit-android and dev/android-activity-null-text.

To work on Skia itself, dev/skia-binaries.ps1 builds it from source once per target and exports the archive every later build unpacks. Our notes on each platform, for anyone bringing a Rust + Skia library to it: solved-win.md, solved-wasm.md, solved-mac.md, solved-ios.md, solved-android.md, solved-linux.md.

Repository layout

• drawnui/: the engine crate; drawnui/web/drawnui_host.js is the browser host.
• examples/hello/: a counter. examples/hellorust/: the DrawnUI Hello app. examples/bench/: the benchmark scene. examples/images/: a photo feed. examples/dungeon/: Dungeon Run.
• templates/app/: the starter app.
• dev/: build, release and platform scripts.

License

MIT, see LICENSE.