obsidian-svelte-ui

Svelte 5 components and utilities for building Obsidian plugins.

Often times when building Obsidian plugins with Svelte, I find myself having to choose between the ease of building UI in Svelte and the desire to leverage the UI components provided by the Obsidian plugin API. This package aims to eliminate this choice by providing Svelte components that bridge this gap, allowing the Obsidian components to be rendered easily in Svelte. These aren't components built to look like the ones provided by Svelte; these are the Obsidian components, exposed through a Svelte-friendly API.

Installation

npm install obsidian-svelte-ui
# or
pnpm add obsidian-svelte-ui

Requires obsidian ^1.12.3 and svelte ^5.0.0 as peer dependencies.

Additionally, you will need to add the svelte condition to your Obsidian plugin's esbuild config file in order to allow the external Svelte components within this package to be correctly resolved.

Uaage

Components

| Component | Description | | -------------------------------------------------------------------- | ---------------------------------------- | | Button | Wraps Obsidian's ButtonComponent | | Color | Wraps Obsidian's ColorComponent | | Dropdown | Wraps Obsidian's DropdownComponent | | ExtraButton | Wraps Obsidian's ExtraButtonComponent | | Modal | Wraps Obsidian's Modal | | MomentFormat | Wraps Obsidian's MomentFormatComponent | | ProgressBar | Wraps Obsidian's ProgressBarComponent | | Search | Wraps Obsidian's SearchComponent | | Secret | Wraps Obsidian's SecretComponent | | Setting | Wraps Obsidian's Setting | | SettingGroup | Wraps Obsidian's SettingGroup | | Slider | Wraps Obsidian's SliderComponent | | Text | Wraps Obsidian's TextComponent | | TextArea | Wraps Obsidian's TextAreaComponent | | Toggle | Wraps Obsidian's ToggleComponent |

Attachments

Svelte 5 attachments are functions that can be applied to elements using the {@attach ...} directive.

| Attachment | Description | | ---------------------------------------------------------------------- | ------------------------------------------------------------------- | | setTooltip | Attaches an Obsidian tooltip to an element | | inputSuggest | Wires up an AbstractInputSuggest instance to a text input element |

SvelteComponent

A class for rendering a Svelte component inside an Obsidian view, compatible with Obsidian's child lifecycle. See the full documentation.

Example Plugins

The following repositories my be useful as references for how this package can be used:

• demo-plugin
  • Provides an example for all of the behavior provided by obsidian-svelte-ui
• obsidian-mdbase
  • Rendering an ExtraButton
  • Managing a Svelte child view
  • esbuild config to resolve .svelte files

AI Disclaimer

This package makes use of AI as part of it's development. I would not call it vibe-coded, but Claude has been used to automate the process of generating the Svelte component wrappers once a good pattern for doing so was discovered.