Easy and fast UI development with Svelte

Svelte is presented as a practical way to build Obsidian plugin UIs with far less boilerplate than imperative DOM manipulation—by writing mostly HTML templates plus small bits of TypeScript, then letting Svelte compile the updates automatically. The core payoff is reactivity without manual render logic: when a variable used in the template changes, Svelte updates only the necessary parts of the DOM. That approach matters for plugin authors because UIs often need to track fast-changing state (timers, charts, dynamic lists) and imperative updates quickly become cumbersome.

The walkthrough starts by contrasting Svelte with React and Vue. React/Vue rely on a rendering engine that checks state changes and reconciles what should update, while Svelte “surgically” updates the HTML it needs and ships only the JavaScript required for the component—avoiding a heavy runtime footprint. In the Obsidian context, that translates to lighter plugins and a simpler mental model for UI updates.

A demo component is then recreated inside a Svelte file (e.g., a “Svelte demo view” component). Instead of calling Obsidian APIs to create headers, paragraphs, buttons, and styling imperatively, the component is written as a template: standard HTML elements with optional styling. The Obsidian view class becomes simpler too—its job is mainly to mount the Svelte component onto a content element. The result is a UI that can be edited directly in the template file, making the rendered output easier to reason about.

Interactivity is added next with a counter button. A TypeScript script block defines a `counter` variable and an `increment` function. The template binds the button label to `{counter}` and triggers `increment` on click. The “magic” is framed as compilation: Svelte analyzes which variables the template uses and automatically re-renders the affected text when `counter` changes, without explicit render calls.

To show how components can be reused and configured, the demo introduces exported props (like `title`). The exported value can be set from the Obsidian view when mounting the component. For more flexibility, the tutorial shifts from prop-based text to composition using nested content via slots—so the parent can pass arbitrary markup (not just a string) into a child component.

Finally, the session tackles global state with Svelte stores. Instead of threading props through deeply nested components, a `writable` store holds the vault’s file list. The plugin populates the store on load using `this.app.vault.getFiles()` and keeps it in sync by registering Obsidian vault events for create, delete, and rename. In the Svelte template, an `{#each}` block iterates over the reactive store (using the `$` store syntax) to render a live-updating `<ul>` of filenames. Creating, deleting, or renaming notes in Obsidian immediately updates the list, demonstrating how Svelte stores and compiled reactivity reduce both complexity and glue code.