Obsidian Hello World

Obsidian Hello World

Overview

Build a minimal working Obsidian plugin demonstrating core features: commands, settings, and ribbon icons.

Prerequisites

• Completed obsidian-install-auth setup
• Development vault configured
• Build pipeline working

Instructions

Step 1: Create Main Plugin Class

// src/main.ts
import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian';

interface MyPluginSettings {
  greeting: string;
}

const DEFAULT_SETTINGS: MyPluginSettings = {
  greeting: 'Hello, Obsidian!'
}

export default class MyPlugin extends Plugin {
  settings: MyPluginSettings;

  async onload() {
    await this.loadSettings();

    // Add ribbon icon
    this.addRibbonIcon('dice', 'Greet Me', (evt: MouseEvent) => {
      new Notice(this.settings.greeting);
    });

    // Add command to command palette
    this.addCommand({
      id: 'show-greeting',
      name: 'Show Greeting',
      callback: () => {
        new Notice(this.settings.greeting);
      }
    });

    // Add command with editor context
    this.addCommand({
      id: 'insert-greeting',
      name: 'Insert Greeting at Cursor',
      editorCallback: (editor: Editor, view: MarkdownView) => {
        editor.replaceSelection(this.settings.greeting);
      }
    });

    // Add settings tab
    this.addSettingTab(new MySettingTab(this.app, this));
  }

  onunload() {
    console.log('Goodbye from My Plugin!');
  }

  async loadSettings() {
    this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
  }

  async saveSettings() {
    await this.saveData(this.settings);
  }
}

Step 2: Create Settings Tab

// Add to src/main.ts
class MySettingTab extends PluginSettingTab {
  plugin: MyPlugin;

  constructor(app: App, plugin: MyPlugin) {
    super(app, plugin);
    this.plugin = plugin;
  }

  display(): void {
    const { containerEl } = this;
    containerEl.empty();

    containerEl.createEl('h2', { text: 'My Plugin Settings' });

    new Setting(containerEl)
      .setName('Greeting')
      .setDesc('The message to display when greeting')
      .addText(text => text
        .setPlaceholder('Enter your greeting')
        .setValue(this.plugin.settings.greeting)
        .onChange(async (value) => {
          this.plugin.settings.greeting = value;
          await this.plugin.saveSettings();
        }));
  }
}

Step 3: Create a Modal

// Add to src/main.ts
class GreetingModal extends Modal {
  greeting: string;

  constructor(app: App, greeting: string) {
    super(app);
    this.greeting = greeting;
  }

  onOpen() {
    const { contentEl } = this;
    contentEl.createEl('h1', { text: this.greeting });
    contentEl.createEl('p', { text: 'Click outside or press Escape to close.' });
  }

  onClose() {
    const { contentEl } = this;
    contentEl.empty();
  }
}

// Add to onload():
this.addCommand({
  id: 'show-greeting-modal',
  name: 'Show Greeting Modal',
  callback: () => {
    new GreetingModal(this.app, this.settings.greeting).open();
  }
});

Step 4: Build and Test

set -euo pipefail
# Build the plugin
npm run build

# In Obsidian:
# 1. Open Settings > Community plugins
# 2. Enable "My Plugin"
# 3. Click the dice icon in ribbon
# 4. Open command palette (Ctrl/Cmd+P) and search "Show Greeting"

Output

• Working plugin with:
  • Ribbon icon that shows a notice
  • Commands in command palette
  • Editor command to insert text
  • Settings tab to configure greeting
  • Modal for displaying content

Error Handling

Examples

Available Icon Names

Obsidian uses Lucide icons. Common examples:

• file-text, folder, search, settings
• star, heart, bookmark, tag
• edit, trash, copy, clipboard
• link, external-link, globe
• dice, bot, sparkles, wand

Status Bar Item

// Add to onload():
const statusBarItem = this.addStatusBarItem();
statusBarItem.setText('Plugin Active');

Register Event Listeners

// Listen to file open
this.registerEvent(
  this.app.workspace.on('file-open', (file) => {
    if (file) {
      console.log('Opened:', file.path);
    }
  })
);

Resources

• Obsidian Plugin API
• Lucide Icons
• Obsidian Hub

Next Steps

Proceed to obsidian-local-dev-loop for hot-reload development workflow.