Quick start

This guide puts a Masque document on screen and edits it live. It assumes you have finished Installation.

TODO: this page needs a minimal host (a window, a Skia surface and a frame loop) that lives in the Masque repo. Today the reference previewer lives in a separate workspace. Until the standalone host exists, the window-creation step below is a sketch.

1. Write a document

Create ui/hello.masque:

let main = fn () {
  state clicks = 0;
  Flex {
    mouse_down: fn () { clicks = clicks + 1; },
    style: {
      width: "grow",
      height: "grow",
      main_alignment: "center",
      cross_alignment: "center",
      background_color: { r: 30, g: 30, b: 30, a: 255 },
    },
    children: [
      Text {
        text: "Clicked " + clicks + " times",
        style: { size: 24, color: { r: 255, g: 255, b: 255, a: 255 } },
      },
    ],
  }
};

main is the entry point. state declares a value that survives re-renders.

2. Load it

use masque::runtime::config::RuntimeConfig;
use masque::Masque;

let mut ui = Masque::watch("ui/hello.masque".into(), RuntimeConfig::new())?;

Masque::watch loads the file and watches it, along with everything it imports. Use Masque::from_source to load from a string with no watcher.

3. Drive it each frame

if ui.check_for_changes() {
    if let Err(err) = ui.reload() {
        eprintln!("reload failed: {err}");   // the last good tree stays on screen
    }
}
ui.update()?;
ui.get_ui_mut().tick_animations(dt.min(0.033));
ui.get_ui_mut().layout(width, height);
surface.draw(ui.get_ui_mut());

Forward pointer input with call_event, as described in The frame loop.

4. Change it

Run your app, edit the text or a colour in hello.masque, and save. The window updates, and the click count survives because the widget tree still matches.

Next

• Learn the language, starting with Values, state and functions.
• Pass your app's data in and receive events in Typed bindings.