Examples
Commands, behavior, and source locations for the reference applications.
Run these commands from the repository root.
| Example | Command | Source |
|---|---|---|
| Basic controls and panel interaction | cargo run --example demo | demo.rs |
| Long settings and nested scrolling | cargo run --example scroll_area | scroll_area.rs |
| Pan/zoom camera, SVG and ordinary local controls | cargo run --release --example pan_zoom (-- --smoke-test) | pan_zoom.rs |
| Nested popups: editor with combo box, key box and child panel, in a dialog and at an edge | cargo run --release --example nested_popups (-- --smoke-test) | nested_popups.rs |
| Searchable dropdown and popup layers | cargo run --example combo_box | combo_box.rs |
| Actions, keymap and shortcut rebinding | cargo run --release --example actions (-- --smoke-test) | actions.rs |
| Settings application | cargo run --example settings | settings.rs |
| Custom winit host | cargo run --example integration | integration.rs |
| zaxis inside a host's own wgpu device, 3D scene, MSAA and depth | cargo run --release --example embed (-- --pass to record into the scene's pass) | embed.rs |
| Every built-in animation, by tab | cargo run --example animations | animations.rs |
| Application value and physical spring | cargo run --example custom_animation | custom_animation.rs |
| In-window drag and drop | cargo run --release --example drag_and_drop | drag_and_drop.rs |
| A widget written outside the crate | cargo run --example custom_widget | custom_widget.rs |
| Lucide icon gallery | cargo run --example icons --features bundled-icons | icons.rs |
| Landing page in a window and in the browser | cargo run --example web_landing --features bundled-icons; browser: cd examples/web_landing && trunk serve (Web) | web_landing.rs |
| Several native windows, shared resources | cargo run --example multi_window | multi_window.rs |
| Custom WGSL materials: gradient, image, frosted glass, error handling | cargo run --example materials | materials.rs |
Parallax pixel cards: one material on a grid of Cards | cargo run --example pixel_cards | pixel_cards.rs |
| Menu bar with cascading submenus | cargo run --example menu_bar | menu_bar.rs |
| Source, diff and file table in the code font | cargo run --example code_view | code_view.rs |
| Form for screen readers: roles, names and requests | cargo run --example accessibility | accessibility.rs |
| Validated form | cargo run --example validation | validation.rs |
All three select PresentationMode::Immediate unless passed --vsync:
cargo run --example settings -- --vsyncCustom widget and validation
custom_widget implements a rotary knob and a colour swatch with Widget, Ui::interact,
Ui::keys and Ui::paint and uses the knob in a Grid, a ScrollArea and a disabled group; drag
turns it, arrows step (Shift: fine, Home and End: the ends), double click resets, right click
opens a menu. Below, a FocusGroup panel of a Button, the swatch, a TextEdit and a Slider
edits the application's model: Tab enters and leaves it once, the arrows move between its
controls, and the text field and slider keep their own keys.
cargo run --example custom_widget -- --smoke-test sends those keys through
Context::on_input without a window and checks the resulting values. validation is a sign-up form built from
Field, Validation and the field-like controls; errors appear after a field is left
or after submit. Both toggle the debug overlay with F3.
Demo
Uses App and the built-in runner. Contains a counter button, checkbox, labels,
and separators. The panel can be dragged and resized.
Settings
Uses App and the same runner. Contains General, Appearance, and Notifications
sections, with stable ID scopes for each section.
The model stores separate draft and applied values:
- Apply copies the draft into applied settings.
- Cancel restores the applied values into the draft.
- Restore defaults changes the draft; Apply commits it.
Autosave, notifications, and sound enable their dependent controls. Disabled controls
retain their values. The appearance preview uses Ui::allocate_space and Ui::paint.
Its color is editable through ColorPicker; Internal Color Picker switches between
an inline palette and an independent floating panel.
For a direct preview, run cargo run --example settings -- --open-color-picker;
append --internal-color-picker to start with the inline mode selected.
Settings live in memory; the example writes no configuration files or OS preferences.
Integration
Implements winit's ApplicationHandler with an Arc<NativeWindow>, Context, and
Renderer. Handles input, viewport changes, occlusion, repaint deadlines, transient
surface failures, and device loss. Unlike the built-in runner, this example stores
its model in the native state and drops that model on suspend.
For a host that must preserve state across suspend/resume, keep the model and
Context outside the disposable window/renderer state. The full host contract is
in Custom host.
The example also wires an AccessKit adapter through zaxis::accesskit_winit, so it
needs the accesskit feature (on by default; with --no-default-features add
--features accesskit).
Accessibility
accessibility is a form a screen reader can operate: a menu bar, tabs, named fields
with validation, a text area, a checkbox, a radio group, a slider, a combo box, an
icon button named with .accessible_label(..), an image with alt, a list, a tree, a
table, a dialog and a toast. Run it with a screen reader turned on. It needs the
accesskit feature, which is on by default. --smoke-test first builds the form
without a window, validates every tree update with accesskit_consumer and sends a
series of requests the way assistive technology does, then presents a few frames and
exits. See Accessibility.
Smoke tests
The animations example shows every built-in animation on its own tab: easing
curves (including CSS beziers, steps, back, elastic and bounce), tweens and retargeted transitions, a scrubbable timeline (pause, reverse,
rate, seek), springs, decay and smooth retargeting, path following and Oklab colors, compositions (with offsets and marks), skeleton loaders, effects, layout presence and reorder. The
header toggles reduced motion and a global time scale.
The animation examples use the default Vsync runner. Both have --smoke-test
modes; the custom spring asserts a single completion event.
cargo run --example demo -- --smoke-test
cargo run --example settings -- --smoke-test
cargo run --example integration -- --smoke-test
cargo run --release --example embed -- --smoke-test
cargo run --example accessibility -- --smoke-test
cargo run --example animations -- --smoke-test
cargo run --example custom_animation -- --smoke-testThe demo closes after its first presented frame. Settings renders all three sections before closing. Integration presents seven frames and checks cache reuse, checkbox geometry updates, surface reconfiguration, and presentation mode changes. A desktop display and working GPU are required.
For profiling commands and counters, use Performance.