Obsidian Plugin React Integration

This skill guides you through embedding React components inside an Obsidian plugin. It assumes you already have a working plugin (see obsidian-plugin-bootstrap if you are starting from zero). The focus is on build configuration, safe mounting and cleanup, bridging Obsidian APIs into React, and common UI patterns.

When to Use This Skill

• Adding a React-based UI to an existing Obsidian plugin
• Converting a vanilla HTML custom view into a React component
• Building complex modals or settings panels that benefit from component state
• Reusing existing React components inside Obsidian
• Managing plugin state that needs to be accessible from React components

Overview

Obsidian plugins are plain TypeScript/JavaScript modules. React is not bundled with Obsidian, so you add it as a dependency and compile .tsx files into your main.js bundle. The integration points are: