# Quick start

> From an empty Cargo project to a window that changes when you save.

This guide puts a Masque document on screen and edits it live. It assumes you have finished [Installation](/docs/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`:

```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

```rust
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

```rust
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](/docs/embedding/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](/docs/language/basics).
- Pass your app's data in and receive events in [Typed bindings](/docs/embedding/typed-bindings).