Give your Rust app a stage.

Masque is a declarative UI language and embeddable runtime. Add beautiful interfaces to your Rust desktop or embedded application with ease.

Get started GitHub

todo.masquehot reload

let rgb = fn (r: int, g: int, b: int) {
  { r: r, g: g, b: b, a: 255 }
};

let ink = rgb(26, 21, 19);
let panel = rgb(38, 32, 29);
let raised = rgb(52, 45, 41);
let chalk = rgb(243, 234, 224);
let dim = rgb(140, 128, 118);
let accent = rgb(240, 96, 63);
let springy = { stiffness: 220, damping: 20 };

let design = { name: "Design", color: rgb(224, 185, 106) };
let code = { name: "Code", color: rgb(92, 170, 150) };
let docs = { name: "Docs", color: rgb(84, 120, 210) };

let ideas = [
  { title: "Sketch stage", tag: design },
  { title: "Spring checks", tag: code },
  { title: "Write guide", tag: docs },
  { title: "Fix scanner", tag: code },
  { title: "Pick palette", tag: design },
  { title: "Ship 0.1", tag: docs },
];

let task = fn (id: int, done: bool) {
  let idea = ideas[id % ideas.length()];
  { id: id, title: idea.title, tag: idea.tag, done: done }
};

let check = fn (on: bool) {
  Flex {
    style: {
      width: 20, height: 20, corner_radius: 10,
      main_alignment: "center", cross_alignment: "center",
      border: { width: 2, color: match on { true => accent, false => dim } },
      background_color: match on { true => accent, false => panel },
      transition: { background_color: springy, border: springy },
    },
    children: [
      Flex {
        style: {
          width: 8, height: 8, corner_radius: 4,
          background_color: ink,
          transform: { scale: match on { true => 1, false => 0 } },
          transition: { transform: springy },
        },
        children: [],
      },
    ],
  }
};

let row = fn (task: map, toggle: function, remove: function) {
  let on = task.done;
  Flex {
    key: "task-" + task.id,
    initial: { opacity: 0, transform: { translate_x: -16 } },
    exit: { opacity: 0, transform: { translate_x: 16 } },
    style: {
      width: "grow", padding: 4, gap: 6, corner_radius: 8,
      cross_alignment: "center",
      background_color: panel,
      transition: { opacity: "spring", transform: springy, background_color: "spring" },
    },
    hover_style: { background_color: raised },
    children: [
      Flex {
        mouse_down: toggle,
        style: { width: "grow", padding: 6, gap: 10, cross_alignment: "center", cursor: "pointer" },
        children: [
          check(on),
          Text {
            text: task.title,
            style: {
              width: "grow", size: 14,
              color: match on { true => dim, false => chalk },
              transition: { color: "spring" },
            },
          },
          Flex {
            style: { padding: { top: 2, right: 6, bottom: 2, left: 6 }, corner_radius: 6, background_color: task.tag.color },
            children: [ Text { text: task.tag.name, style: { size: 11, weight: "bold", color: ink } } ],
          },
        ],
      },
      Flex {
        mouse_down: remove,
        style: {
          width: 26, height: 26, corner_radius: 6,
          main_alignment: "center", cross_alignment: "center", cursor: "pointer",
          transition: { background_color: springy },
        },
        hover_style: { background_color: accent },
        children: [ Text { text: "×", style: { size: 18, color: dim }, hover_style: { color: ink }, hover_with_parent: true } ],
      },
    ],
  }
};

let tab = fn (label: String, current: String, pick: function) {
  let active = label == current;
  Flex {
    mouse_down: fn () { pick(label); },
    style: {
      width: "grow", padding: 6, corner_radius: 6,
      main_alignment: "center", cursor: "pointer",
      background_color: match active { true => raised, false => panel },
      transition: { background_color: springy },
    },
    children: [
      Text { text: label, style: { size: 13, color: match active { true => chalk, false => dim } } },
    ],
  }
};

let main = fn () {
  state items = [task(0, false), task(1, true), task(2, false), task(3, false)];
  state next = 4;
  state filter = "All";

  let total = items.length();
  let finished = 0;
  for (i in 0..total) {
    if items[i].done { finished = finished + 1; }
  }
  let progress = match total { 0 => 0, _ => finished / total };
  let visible = fn (t: map) {
    match filter { "Open" => !t.done, "Done" => t.done, _ => true }
  };
  let listed = 0;
  for (i in 0..total) {
    if visible(items[i]) { listed = listed + 1; }
  }

  let add = fn () {
    let grown = items.length() + 1;
    let fresh = task(next, false);
    items = for (j in 0..grown) {
      match j < grown - 1 { true => items[j], false => fresh }
    };
    next = next + 1;
  };
  let toggle = fn (i: int) {
    let flipped = task(items[i].id, !items[i].done);
    items = for (j in 0..items.length()) {
      match j == i { true => flipped, false => items[j] }
    };
  };
  let remove = fn (i: int) {
    let shrunk = items.length() - 1;
    items = for (j in 0..shrunk) {
      match j < i { true => items[j], false => items[j + 1] }
    };
  };

  Flex {
    style: {
      width: "grow", height: "grow", padding: 16, gap: 12,
      direction: "column",
      background_color: ink,
    },
    children: [
      Flex {
        style: { width: "grow", cross_alignment: "end" },
        children: [
          Text { text: "Today", style: { width: "grow", size: 22, weight: "bold", color: chalk } },
          Text { text: finished + " of " + total + " done", style: { size: 13, color: dim } },
        ],
      },
      Flex {
        style: { width: "grow", height: 4, corner_radius: 2, background_color: panel },
        children: [
          Flex {
            style: {
              width: "grow", height: 4, corner_radius: 2,
              background_color: accent,
              transform_origin: "left",
              transform: { scale_x: progress },
              transition: { transform: springy },
            },
            children: [],
          },
        ],
      },
      Flex {
        style: { width: "grow", padding: 3, gap: 3, corner_radius: 8, background_color: panel },
        children: [
          tab("All", filter, fn (f: String) { filter = f; }),
          tab("Open", filter, fn (f: String) { filter = f; }),
          tab("Done", filter, fn (f: String) { filter = f; }),
        ],
      },
      Flex {
        style: {
          width: "grow", height: "grow", gap: 6,
          direction: "column",
          overflow: "scroll", scroll_follow_end: true,
          stagger: { step: 0.04 },
        },
        children: [
          ...for (i in 0..total) {
            match visible(items[i]) {
              true => row(items[i], fn () { toggle(i); }, fn () { remove(i); }),
              false => {},
            }
          },
          match listed {
            0 => Text {
              text: match filter {
                "Open" => "Nothing open. Well done.",
                "Done" => "Nothing finished yet.",
                _ => "Nothing to do. Add a task below.",
              },
              style: { width: "grow", align: "center", size: 13, color: dim },
            },
            _ => {},
          },
        ],
      },
      Flex {
        mouse_down: add,
        style: {
          width: "grow", padding: 10, corner_radius: 8,
          main_alignment: "center", cursor: "pointer",
          border: { width: 1, color: raised, style: "dashed" },
        },
        hover_style: { background_color: panel },
        children: [ Text { text: "+ Add task", style: { size: 13, color: dim } } ],
      },
    ],
  }
};

let rgb = fn (r: int, g: int, b: int) {
  { r: r, g: g, b: b, a: 255 }
};

let ink = rgb(26, 21, 19);
let panel = rgb(38, 32, 29);
let raised = rgb(52, 45, 41);
let chalk = rgb(243, 234, 224);
let dim = rgb(140, 128, 118);
let accent = rgb(240, 96, 63);
let springy = { stiffness: 220, damping: 20 };

let design = { name: "Design", color: rgb(224, 185, 106) };
let code = { name: "Code", color: rgb(92, 170, 150) };
let docs = { name: "Docs", color: rgb(84, 120, 210) };

let ideas = [
  { title: "Sketch stage", tag: design },
  { title: "Spring checks", tag: code },
  { title: "Write guide", tag: docs },
  { title: "Fix scanner", tag: code },
  { title: "Pick palette", tag: design },
  { title: "Ship 0.1", tag: docs },
];

let task = fn (id: int, done: bool) {
  let idea = ideas[id % ideas.length()];
  { id: id, title: idea.title, tag: idea.tag, done: done }
};

let check = fn (on: bool) {
  Flex {
    style: {
      width: 20, height: 20, corner_radius: 10,
      main_alignment: "center", cross_alignment: "center",
      border: { width: 2, color: match on { true => accent, false => dim } },
      background_color: match on { true => accent, false => panel },
      transition: { background_color: springy, border: springy },
    },
    children: [
      Flex {
        style: {
          width: 8, height: 8, corner_radius: 4,
          background_color: ink,
          transform: { scale: match on { true => 1, false => 0 } },
          transition: { transform: springy },
        },
        children: [],
      },
    ],
  }
};

let row = fn (task: map, toggle: function, remove: function) {
  let on = task.done;
  Flex {
    key: "task-" + task.id,
    initial: { opacity: 0, transform: { translate_x: -16 } },
    exit: { opacity: 0, transform: { translate_x: 16 } },
    style: {
      width: "grow", padding: 4, gap: 6, corner_radius: 8,
      cross_alignment: "center",
      background_color: panel,
      transition: { opacity: "spring", transform: springy, background_color: "spring" },
    },
    hover_style: { background_color: raised },
    children: [
      Flex {
        mouse_down: toggle,
        style: { width: "grow", padding: 6, gap: 10, cross_alignment: "center", cursor: "pointer" },
        children: [
          check(on),
          Text {
            text: task.title,
            style: {
              width: "grow", size: 14,
              color: match on { true => dim, false => chalk },
              transition: { color: "spring" },
            },
          },
          Flex {
            style: { padding: { top: 2, right: 6, bottom: 2, left: 6 }, corner_radius: 6, background_color: task.tag.color },
            children: [ Text { text: task.tag.name, style: { size: 11, weight: "bold", color: ink } } ],
          },
        ],
      },
      Flex {
        mouse_down: remove,
        style: {
          width: 26, height: 26, corner_radius: 6,
          main_alignment: "center", cross_alignment: "center", cursor: "pointer",
          transition: { background_color: springy },
        },
        hover_style: { background_color: accent },
        children: [ Text { text: "×", style: { size: 18, color: dim }, hover_style: { color: ink }, hover_with_parent: true } ],
      },
    ],
  }
};

let main = fn () {
  state items = [task(0, false), task(1, true), task(2, false), task(3, false)];
  state next = 4;
  state filter = "All";

Flex {
    style: {
      width: "grow", height: "grow", padding: 16, gap: 12,
      direction: "column",
      background_color: ink,
    },
    children: [
      Flex {
        style: { width: "grow", cross_alignment: "end" },
        children: [
          Text { text: "Today", style: { width: "grow", size: 22, weight: "bold", color: chalk } },
          Text { text: finished + " of " + total + " done", style: { size: 13, color: dim } },
        ],
      },
      Flex {
        style: { width: "grow", height: 4, corner_radius: 2, background_color: panel },
        children: [
          Flex {
            style: {
              width: "grow", height: 4, corner_radius: 2,
              background_color: accent,
              transform_origin: "left",
              transform: { scale_x: progress },
              transition: { transform: springy },
            },
            children: [],
          },
        ],
      },
      Flex {
        style: { width: "grow", padding: 3, gap: 3, corner_radius: 8, background_color: panel },
        children: [
          tab("All", filter, fn (f: String) { filter = f; }),
          tab("Open", filter, fn (f: String) { filter = f; }),
          tab("Done", filter, fn (f: String) { filter = f; }),
        ],
      },
      Flex {
        style: {
          width: "grow", height: "grow", gap: 6,
          direction: "column",
          overflow: "scroll", scroll_follow_end: true,
          stagger: { step: 0.04 },
        },
        children: [
          ...for (i in 0..total) {
            match visible(items[i]) {
              true => row(items[i], fn () { toggle(i); }, fn () { remove(i); }),
              false => {},
            }
          },
          match listed {
            0 => Text {
              text: match filter {
                "Open" => "Nothing open. Well done.",
                "Done" => "Nothing finished yet.",
                _ => "Nothing to do. Add a task below.",
              },
              style: { width: "grow", align: "center", size: 13, color: dim },
            },
            _ => {},
          },
        ],
      },
      Flex {
        mouse_down: add,
        style: {
          width: "grow", padding: 10, corner_radius: 8,
          main_alignment: "center", cursor: "pointer",
          border: { width: 1, color: raised, style: "dashed" },
        },
        hover_style: { background_color: panel },
        children: [ Text { text: "+ Add task", style: { size: 13, color: dim } } ],
      },
    ],
  }
};

Today1 of 4 done

Drawn by the Masque runtime, compiled to WebAssembly.

Your app holds the state. Masque sets the scene.

Masque is a library, not a framework you move into. It runs inside your frame loop, reads the state you hand it, and gives back events. Your app’s data never leaves Rust.

Your Rust app

Data, logic, I/O and threads. It stays plain Rust, with no UI code mixed in.

Owns the state
Handles the events
Runs the frame loop it already has

Your .masque document

Layout, styling, animation and state that only the UI cares about, in a language made for it.

Reads the state it declares
Raises the events it declares
Changes without touching Rust

The document declares both sides of the contract, and Masque checks them when it loads.

Every screen in its place.

Carte is a state-based router for Rust applications that pairs natively with Masque.

Explore Carte

Everything an interface needs, in the language.

Flexbox layout

Rows, columns, gaps, alignment, and boxes that grow or shrink to fill space, plus grids and scrolling containers.

Components are functions

Give them parameters, pass callbacks as props, put lists and match branches right where the children go, and import across files.

Local state

Declare state inside a component, the way you would with useState. Whether a menu is open never has to round-trip through Rust.

A contract with your Rust app

The document declares the state it reads and the events it sends. A typo or a wrong argument count is an error that says what you meant, not a blank screen.

Springs on any style change

Name the properties that should move, and colour, opacity, padding and transforms spring to their new values, hover states included.

Entry and exit animations

Give a widget a starting style and an exit style. Removed content stays on stage until it has left, and Presence swaps whole pages the same way.

Portals and popovers

Tooltips, menus, modals and toasts sit above the tree, anchored to their parent, with hover-to-open, click-outside dismiss and focus trapping.

Native drag and drop

Give anything a payload and a drag preview, mark the targets that accept it, and get start, move and end events. Built for editors, inventories and reorderable lists.

Raise the curtain.

Add the crate and put your first screen on stage.

Quick start