obsidian

Develop Obsidian plugins and themes using Vault, Workspace, and CodeMirror 6 APIs.

1|Updated Oct 11, 2023

Search Tags:#typescript #obsidian #css-variables #plugin-development #codemirror #vault-api #workspace-api

Ready to run

npx skills add https://github.com/yankeeinlondon/obsidian-kind-model --skill obsidian-yankeeinlondon

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: obsidian
Source: https://github.com/yankeeinlondon/obsidian-kind-model/tree/main/.claude/skills/obsidian
Command: npx skills add https://github.com/yankeeinlondon/obsidian-kind-model --skill obsidian-yankeeinlondon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developing robust Obsidian plugins and themes can be challenging due to the breadth of APIs and theming patterns; this skill consolidates expert guidance to accelerate learning and implementation.

Core Features & Use Cases

Lifecycle guidance: from onload to unload, with Vault and Workspace API integration.
Editor extensions & theming: techniques for CodeMirror 6, CSS variables, and UI styling.
Practical patterns: practical examples for plugins and themes in real projects.

Quick Start

Install Obsidian plugin/theme development knowledge to start creating your own plugin.

Frequently Asked Questions about obsidian

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I develop an Obsidian plugin using the Vault and Workspace APIs?▼

Obsidian plugin development integrates Vault and Workspace APIs to manage data and UI state. You implement lifecycle hooks from onload to unload, connecting workspace events to vault file operations for reactive plugin behavior.

How do I create CodeMirror 6 editor extensions for Obsidian plugins?▼

CodeMirror 6 editor extensions in Obsidian plugins modify the markdown editor's behavior. You implement custom decorations, keybindings, and state fields using CodeMirror's extension API to enhance text editing and syntax highlighting.

How do I style an Obsidian theme using CSS variables?▼

Obsidian theme styling uses CSS variables to control UI appearance across the application. You override default Obsidian CSS variables in your theme stylesheet to customize colors, spacing, and typography for consistent visual integration.

Do I need TypeScript to build Obsidian plugins and themes?▼

TypeScript is the primary language for robust Obsidian plugin development, enabling type-checking for Vault and Workspace APIs. While themes rely on CSS, using TypeScript for plugins ensures safer API interactions and better code maintainability.

What is the Obsidian plugin lifecycle from onload to unload?▼

The Obsidian plugin lifecycle manages resource initialization and cleanup through onload and unload functions. You register workspace event listeners and vault modifications in onload, then remove them in unload to prevent memory leaks and ensure stable operation.

Why is my Obsidian plugin not interacting correctly with the Workspace API?▼

Obsidian Workspace API interactions often fail when event listeners are not properly registered or unregistered during the plugin lifecycle. Debugging requires verifying that workspace leaf references and active view states are accessed correctly within onload.