States and Events

Mirrow separates visual state from behavior. Use @hover { ... } for CSS state driven overrides, and on:* blocks for JavaScript events.

CSS State

State blocks compile to hover focused overrides without runtime JS.

rect {
  at: (16, 16) size: (128, 64) rx: 8
  fill: "#4f46e5"

  @hover {
    fill: "#6366f1"
    stroke: "#ffffff"
  }
}

JS Events

Event blocks run JavaScript in response to user actions. The handler runs in the element context. Just as with CSS States all JavaScript events are supported.

g {
  id: "panel"
  class: "closed"

  on:click {
    console.log("Hello World");
  }
}

Other variants: @focus, @active, and events like on:mouseenter, on:mouseleave, on:input.