Beginner 5 min

Install Argui

Create a Rust project, select only the features you use, and prepare desktop and WebAssembly targets.

What you need

Argui 0.3.2 requires Rust 1.89 or newer. The repository itself currently recommends a newer toolchain for contributors, while the workspace manifest remains the source of truth for the minimum supported Rust version.

Rust and Cargo
A GPU and driver supported by WGPU
wasm32-unknown-unknown plus wasm-pack for browser builds

Add the dependency

The facade has no default feature bundle. Enable the smallest widget set that your application needs; this keeps optional integrations and their dependencies out of the build.

Cargo.toml

[dependencies]
argui = { version = "0.3.2", features = ["widget-button"] }

Prepare the browser target

Desktop targets are selected by Cargo. WebAssembly uses the same retained UI and renderer through WebGPU.

Terminal

rustup target add wasm32-unknown-unknown
cargo check --target wasm32-unknown-unknown

Reference files

These are the implementation and guide files used for this chapter.

Cargo.tomlcrates/argui/Cargo.tomlREADME.md

Compiled example

Your first compiled Argui control

The Rust file below is imported verbatim by this page and compiled into the WebAssembly application running underneath it.

Open exact source

app_examples/docs-examples/src/examples/installation.rs

use argui::{
    paint::{Border, CornerRadii},
    runtime::{Context, Render},
    text::TextStyle,
    ui::{AlignItems, Element, JustifyContent, Sides, length, percent},
    widgets::default_theme,
};

pub struct Example;

impl Render for Example {
    fn render(&mut self, cx: &mut Context<Self>) -> Element {
        let themes = default_theme(cx.environment());
        let theme = themes.resolve(cx.environment().color_scheme);
        let text = |value, size, weight| {
            Element::text(value).text_style(TextStyle {
                font_size: size,
                line_height: size * 1.35,
                color: theme.foreground,
                weight,
                ..TextStyle::default()
            })
        };
        let card = Element::column([
            text("Argui is ready", 30.0, 700),
            text("Rust + WebAssembly + WebGPU", 16.0, 450),
        ])
        .width(length(460.0))
        .max_width(percent(1.0))
        .padding(Sides::length(28.0))
        .gap(10.0)
        .background(theme.card)
        .border(Border::all(1.0, theme.border))
        .radius(CornerRadii::all(14.0));
        Element::container([card])
            .width(percent(1.0))
            .height(percent(1.0))
            .padding(Sides::length(20.0))
            .align_items(AlignItems::CENTER)
            .justify_content(JustifyContent::CENTER)
            .background(theme.background)
    }
}

Starting this lesson’s WebAssembly module…