Let there be light.

hud.html1<div id="hud">
2  <p id="status">Offline</p>
3  <div class="track">
4    <div id="hp"></div>
5  </div>
6  <button id="save">Save</button>
7</div>
8
9<style>
10  #status.online { color: lime; }
11  #hp { transition: width 0.3s; }
12</style>

hud.cpp1// Runs with JavaScript disabled, too.
2dom::Document document(view.get());
3
4auto status = document.getElementById("status");
5status.textContent = "Connected";
6status.classList.add("online");
7
8auto hp = document.getElementById("hp");
9hp.style.width = dom::StyleValue::Pct(health);
10hp.style.backgroundColor = Color("#ff3366");
11
12document.getElementById("save").addEventListener(
13    "click", [] { SaveGame(); });

hud.html1<div class="hud">
2  <h1>{{player.name}}</h1>
3  <div class="bar" ul-var-hp="player.hp"></div>
4  <p ul-if="player.poisoned">Poisoned!</p>
5  <button ul-on:click="player.heal">Heal</button>
6</div>
7
8<style>
9  .bar {
10    width: calc(var(--hp) * 1%);
11    background: hsl(calc(var(--hp) * 1.2), 70%, 45%);
12  }
13</style>

hud.cpp1struct Player {
2  std::string name = "Ava";
3  int hp = 80;
4  bool poisoned = false;
5};
6
7template <> struct dd::TypeTraits<Player> {
8  static constexpr auto schema = dd::Schema(
9      dd::Reflect<Player>(), dd::Action("heal"));
10};
11
12dd::Binding binding = ctx.Bind("player", player);
13binding.OnAction<"heal">([&] { player.hp = 100; });
14ctx.Sync();  // once per frame

app.html1<script type="module">
2  console.log(app.version);  // "2.1.0"
3
4  // Resolves once a worker thread reads the file.
5  const doc = await app.open("notes.md");
6  document.title = doc.title;
7  editor.value = doc.body;
8
9  app.on("synced", (count) => showBadge(count));
10
11  app.open(42);  // rejects with a TypeError
12</script>

app.cpp1struct Doc { std::string title, body; };
2
3js::API app("app");
4app["version"] = "2.1.0";
5app["open"] = [](std::string path) -> js::Task<Doc> {
6  co_return co_await js::RunOnWorker(
7      [path] { return LoadDoc(path); });
8};
9
10if (app.AttachTo(view.get()))
11  view->LoadURL("file:///app.html");
12
13app.Emit("synced", 3);  // from any thread