flyt

17 — Rendering

Rendered on the host, run in the browser, exported as files.

In Go// html/template on the server
home/pages/home.flyt
page home {
  state: Int<min: 0, max: 1000>
  event: Clicked

  apply(state, event) {
    Stay { state: int.min(state + 1, other: 1000) }
  }

  view(state) {
    let label = html.text("Clicked {state}")
    html.main([:], children: [
      html.h1([:], children: [html.text("Hello")])
      html.on_click(html.button([:], children: [label]), event: Clicked)
    ])
  }
  …
}
GET /
<head>
  <script src="/_flyt/assets/2b02…/_flyt.js" type="module"></script>
  <link href="/_flyt/assets/ca02…/_client.wasm" rel="preload" …>
</head>
<div id="flyt" data-flyt-state="020000000000000000" …>
  <main>
    <h1>Hello</h1>
    <button data-flyt-click="10c60000000000">Clicked 0</button>
  </main>
</div>