Obsidian Plugin Svelte Integration

This skill guides you through adding Svelte components to an Obsidian plugin. It covers build system configuration, mounting components inside Obsidian's UI surfaces, bridging reactive state between the plugin and Svelte, and cleaning up on unload to prevent memory leaks.

When to Use This Skill

• Adding Svelte UI components to an existing Obsidian plugin
• Configuring esbuild (or Rollup) to compile .svelte files
• Mounting Svelte inside an ItemView, Modal, or PluginSettingTab
• Bridging Obsidian plugin state / events into Svelte props or stores
• Converting vanilla DOM manipulation to reactive Svelte components
• Troubleshooting Svelte TypeScript or build issues in an Obsidian plugin

Overview

Svelte compiles components to vanilla JavaScript at build time, so plugins incur minimal runtime overhead. In an Obsidian plugin, the typical flow is: