Your first Fitz LiveViews component, twice: SSR and WASM from one source

TL;DR — A Fitz LiveViews component is a single .fitzv file. The interesting part: the same file compiles to two different targets with no rewrite. Server-rendered (SSR) — the server holds the state, renders HTML, and patches the browser over a WebSocket; best for shared, DB-driven, multi-user state. Client-WASM — the same component compiles to WebAssembly and runs entirely in the browser; best for offline, zero-round-trip widgets. This post builds a counter and ships it both ways. (Part 2 of the FitzLiveViews series — start here if you missed part 1.) In part 1 I made the pitch: real-time UI in one language, no JavaScript build. Now let's build something and ship it two ways from the same source. The component Here's a counter as a single-file component ( .fitzv ) — state, events, template, style: component Counter { state { count: Int = 0 } event increment() { count = count + 1 } event decrement() { count = count - 1 } event reset() { count = 0 } <template> <div id= "counter-app" > <p> Count: {count} </p> <button @ click= "increment" > +1 </button> <button @ click= "decrement" > -1 </button> <button @ click= "reset" > Reset </button> </div> </template> <style scoped > #counter-app { padding : 1.5rem ; font-family : system-ui ; } button { padding : 0.5rem 1rem ; margin : 0 0.25rem ; } </style> } state is the reactive data. Each event handler mutates it directly — no setState , no reducers. <template> is real markup; {count} interpolates and auto-escapes. @click="increment" binds a DOM event to a handler. <style scoped> is CSS namespaced to this component. If you've written Vue or Svelte, this is familiar — the difference is what happens next. Target 1 — server-rendered (over a WebSocket) The SSR target is the default. The component runs on the server; a tiny main.fitz wires it into an HTTP route (first paint) and a WebSocket route (the live layer): from fitz_liveviews import html_response , live_layout , LiveFrame , diff_html , component , dispatch_component_events