ADR-0002 — Frontend framework: Svelte + TypeScript

Status: Accepted
Date: 2026-06-30
Context source: Design doc §"UX and Performance Principles", NFR-RES-1

Context

Tauri (ADR-0001) renders a web frontend. We need light/dark theming, a three-pane layout (meetings list · transcript/notes · summary/participants), live-updating transcript and waveform, and a Markdown editor — all while keeping per-view memory and render cost low.

Options considered

React — largest ecosystem and component availability, but ships a runtime + virtual DOM; heavier than necessary for our footprint goals.
Vue — middle ground; runtime overhead between React and Svelte.
Svelte — compiles components to small imperative JS with no shipped framework runtime; smallest bundles and lowest memory; fine-grained reactivity ideal for high-frequency transcript/waveform updates.
SolidJS — comparably lean, but smaller ecosystem/talent pool than Svelte.

Decision

Use Svelte with TypeScript, bundled by Vite. Best memory/performance profile and a good fit for streaming UI updates, with enough ecosystem maturity for an OSS project.

Consequences

Positive: smallest footprint; simple, fast reactive updates for live transcript; first-class Vite integration with Tauri.
Negative: smaller component ecosystem than React (mitigated: WA's UI is bespoke); team must know Svelte 5 reactivity model.
Theming via CSS custom properties + prefers-color-scheme, with a user override stored in settings (FR-UX-2).

Revisit if

We need a large third-party component (e.g. complex data grid) only available for React/Vue, or hiring constraints favor React.

1.7 KiB Raw Blame History