Obsidian Core Workflow B: Advanced Plugin Features
Overview
Add production UI to an existing Obsidian plugin: custom sidebar views,
modal dialogs with forms, fuzzy-search suggestion popups, editor commands
that manipulate selections, status bar widgets, context menus, and
programmatic file creation via the Vault API. Every snippet is a complete,
copy-pasteable class.
Prerequisites
- A working plugin built with
obsidian-core-workflow-a (or equivalent)
npm install --save-dev obsidian already done- Familiarity with the Plugin lifecycle (
onload / onunload)
Instructions
Step 1: Custom sidebar view (ItemView)
A custom view registers a new panel type that can live in the left or right sidebar.
import { ItemView, WorkspaceLeaf, TFile } from "obsidian";
export const STATS_VIEW_TYPE = "vault-stats-view";
export class StatsView extends ItemView {
constructor(leaf: WorkspaceLeaf) {
super(leaf);
}
getViewType(): string {
return STATS_VIEW_TYPE;
}
getDisplayText(): string {
return "Vault Stats";
}
getIcon(): string {
return "bar-chart-2";
}
async onOpen() {
const container = this.containerEl.children[1];
container.empty();
container.addClass("stats-view");
container.createEl("h4", { text: "Vault Statistics" });
const listEl = container.createEl("ul");
const files = this.app.vault.getMarkdownFiles();
let totalWords = 0;
for (const file of files) {
const content = await this.app.vault.cachedRead(file);
totalWords += content.split(/\s+/).filter(Boolean).length;
}
listEl.createEl("li", { text: `Notes: ${files.length}` });
listEl.createEl("li", { text: `Total words: ${totalWords.toLocaleString()}` });
listEl.createEl("li", {
text: `Avg words/note: ${files.length ? Math.round(totalWords / files.length) : 0}`,
});
const btn = container.createEl("button", { text: "Refresh" });
btn.addEventListener("click", () => this.onOpen());
}
async onClose() {
}
}
Register and open it from your main plugin:
import { StatsView, STATS_VIEW_TYPE } from "./views/StatsView";
this.registerView(STATS_VIEW_TYPE, (leaf) => new StatsView(leaf));
this.addCommand({
id: "open-stats-view",
name: "Open vault stats",
callback: () => this.activateStatsView(),
});
this.addRibbonIcon("bar-chart-2", "Vault Stats", () => this.activateStatsView());
async activateStatsView() {
const { workspace } = this.app;
let leaf = workspace.getLeavesOfType(STATS_VIEW_TYPE)[0];
if (!leaf) {
const rightLeaf = workspace.getRightLeaf(false);
if (rightLeaf) {
await rightLeaf.setViewState({ type: , : });
leaf = rightLeaf;
}
}
(leaf) workspace.(leaf);
}
...();
Step 2: Modal dialogs
Confirmation modal -- returns a boolean via callback:
import { App, Modal, Setting } from "obsidian";
export class ConfirmModal extends Modal {
private resolved = false;
constructor(
app: App,
private message: string,
private onResult: (confirmed: boolean) => void
) {
super(app);
}
onOpen() {
const { contentEl } = this;
contentEl.createEl("h3", { text: "Confirm" });
contentEl.createEl("p", { text: this.message });
new Setting(contentEl)
.addButton((btn) =>
btn.setButtonText("Cancel").onClick(() => this.close())
)
.addButton(
btn
.()
.()
.( {
. = ;
.();
})
);
}
() {
.(.);
..();
}
}
Text input modal -- collects a single string:
import { App, Modal, Setting } from "obsidian";
export class InputModal extends Modal {
private value = "";
constructor(
app: App,
private title: string,
private placeholder: string,
private onSubmit: (value: string | null) => void
) {
super(app);
}
onOpen() {
const { contentEl } = this;
contentEl.createEl("h3", { text: this.title });
new Setting(contentEl).addText((text) =>
text
.setPlaceholder(this.placeholder)
.onChange((v) => (this.value = v))
);
(contentEl)
.(
btn.().( {
.();
.();
})
)
.(
btn
.()
.()
.( {
.(.);
.();
})
);
}
() {
..();
}
}
Step 3: Fuzzy suggestion modal (SuggestModal)
Opens a searchable list. Users type to filter, then pick an item.
import { App, FuzzySuggestModal, TFile } from "obsidian";
export class NotePicker extends FuzzySuggestModal<TFile> {
constructor(app: App, private onPick: (file: TFile) => void) {
super(app);
}
getItems(): TFile[] {
return this.app.vault.getMarkdownFiles();
}
getItemText(file: TFile): string {
return file.path;
}
onChooseItem(file: TFile): void {
this.onPick(file);
}
}
this.addCommand({
id: "pick-note",
name: "Pick a note",
callback: () => {
new NotePicker(this., {
();
}).();
},
});
Step 4: Editor commands with selection manipulation
editorCallback gives you the CodeMirror Editor and the active MarkdownView.
this.addCommand({
id: "wrap-callout",
name: "Wrap selection in callout",
editorCallback: (editor, view) => {
const selection = editor.getSelection();
if (!selection) {
new Notice("Select text first");
return;
}
const callout = `> [!note]\n> ${selection.split("\n").join("\n> ")}`;
editor.replaceSelection(callout);
},
});
this.addCommand({
id: "insert-timestamp",
name: "Insert timestamp",
editorCallback: (editor) => {
const now = new Date().toISOString().slice(0, 19).replace("T", " ");
editor.replaceSelection(now);
},
});
this.addCommand({
id: "sort-lines",
: ,
: {
selection = editor.();
(!selection) ;
sorted = selection.().( a.(b)).();
editor.(sorted);
},
});
Step 5: Status bar items
Status bar items sit at the bottom of the Obsidian window.
const statusEl = this.addStatusBarItem();
statusEl.setText("Words: --");
this.registerEvent(
this.app.workspace.on("active-leaf-change", async () => {
const view = this.app.workspace.getActiveViewOfType(MarkdownView);
if (view) {
const content = view.editor.getValue();
const count = content.split(/\s+/).filter(Boolean).length;
statusEl.setText(`Words: ${count}`);
} else {
statusEl.setText("Words: --");
}
})
);
Step 6: Context menus
Add items to the file explorer right-click menu and the editor right-click menu.
this.registerEvent(
this.app.workspace.on("file-menu", (menu, file) => {
if (file instanceof TFile && file.extension === "md") {
menu.addItem((item) => {
item
.setTitle("Copy note title")
.setIcon("clipboard-copy")
.onClick(async () => {
await navigator.clipboard.writeText(file.basename);
new Notice(`Copied: ${file.basename}`);
});
});
}
})
);
this.registerEvent(
this.app.workspace.on("editor-menu", (menu, editor) => {
menu.addItem((item) => {
item
.setTitle("Insert today's date")
.setIcon()
.( {
today = ().().(, );
editor.(today);
});
});
})
);
Step 7: File creation and modification via Vault API
Programmatically create, read, and modify notes.
async ensureDailyNote(): Promise<TFile> {
const today = new Date().toISOString().slice(0, 10);
const path = `Daily/${today}.md`;
const existing = this.app.vault.getAbstractFileByPath(path);
if (existing instanceof TFile) return existing;
const folder = this.app.vault.getAbstractFileByPath("Daily");
if (!folder) await this.app.vault.createFolder("Daily");
const content = `# ${today}\n\n## Tasks\n\n- [ ] \n\n## Notes\n\n`;
return this.app.vault.create(path, content);
}
async appendToNote(file: TFile, : ): <> {
current = ...(file);
...(file, current + + text);
}
(: , : ): <> {
files = ...()
.( f..(folder + ));
count = ;
( file files) {
content = ...(file);
(content.()) {
content = content.(
,
);
} {
content = ;
}
...(file, content);
count++;
}
count;
}
Output
After applying these patterns your plugin gains:
- A sidebar panel (ItemView) with live vault statistics
- Confirmation and text-input modal dialogs
- A fuzzy-search note picker
- Editor commands that transform selected text
- A live word-count status bar widget
- Right-click context menu extensions
- Vault API helpers for file creation and batch modification
Error Handling
| Error | Cause | Fix |
|---|
| View not appearing | Forgot registerView in onload | Must register before opening |
getRightLeaf returns null | No sidebar available | Guard with if (leaf) |
| Modal closes without callback | Event order issue | Set result before calling this.close() |
editorCallback greyed out | No active markdown editor | Use callback instead for non-editor commands |
| Context menu item missing | Wrong event name | file-menu for explorer, editor-menu for editor |
vault.create throws | File already exists at path | Check with getAbstractFileByPath first |
Stale cachedRead data | Cache not yet updated | Use vault.read when freshness matters |
Examples
Open a view in a new tab instead of sidebar:
const leaf = this.app.workspace.getLeaf("tab");
await leaf.setViewState({ type: STATS_VIEW_TYPE, active: true });
Promise-based confirm modal:
function confirm(app: App, msg: string): Promise<boolean> {
return new Promise((resolve) => {
new ConfirmModal(app, msg, resolve).open();
});
}
if (await confirm(this.app, "Delete all empty notes?")) {
}
Resources
Next Steps
- Set up hot-reload development: see
obsidian-local-dev-loop
- Apply production safety patterns: see
obsidian-sdk-patterns
- Handle common errors: see
obsidian-common-errors
