programmati.ca Open Studio

Developer Tooling · Interactive Runtime Explorer

AppSPEC Developer Companion

An interactive workbench for exploring declarative XML application specs. Switch presets, inspect reactive wires, and test live DOM binding directly in the browser.

kanban.appspec
<APP ID="kanban" TITLE="Launch board" THEME="notion">
  <DATA ID="cards" SRC="cards.json" />
  <STATE ID="board">
    <HEADER>
      <TEXT STYLE="h1" TEXT="Launch board" />
      <BUTTON ACTION="new" LABEL="New card" STYLE="primary" />
    </HEADER>
    <FORM ACTION="add-card" SUBMIT-LABEL="Add card">
      <FIELD NAME="title" REQUIRED="true" PLACEHOLDER="Card title..." />
      <FIELD NAME="tag" OPTIONS="Planning,Design,Engineering" TYPE="select" />
    </FORM>
    <BOARD SRC="cards" COLUMNS="todo:To do,doing:In progress,done:Done" TITLE="title" GROUP="status" />
  </STATE>
  <WIRE LABEL="add-card" SAVE="cards" SET="status=todo" />
  <WIRE LABEL="move-card" UPDATE="cards" />
</APP>
Live Reactive DOM Mount
โ— Engine Ready
โšก Reactive <WIRE> Event Stream (Deterministic Telemetry)
[READY] Reactive event stream listening...