Obsidian Dev Utils is a collection of essential functions and CLI tools designed to streamline your Obsidian plugin development process. Whether you're building a plugin from scratch or enhancing an existing one, these utilities are here to simplify your workflow.
Obsidian is a powerful knowledge base that works on top of a local folder of plain text Markdown files. It's a tool that lets you take notes and organize them, and it supports a rich plugin ecosystem that allows for extensive customization.
This package is ideal for developers who are building or maintaining plugins for Obsidian. It provides a range of tools to make the development process easier, including automated builds, linting, spellchecking, and more.
There is a Obsidian Plugin Yeoman Generator that sets up a new Obsidian plugin project with a basic structure and some useful scripts from this library.
To install the package, run the following command:
npm install obsidian-dev-utilsThe package offers several CLI commands to facilitate common development tasks:
npx obsidian-dev-utils buildCompiles the production version of your plugin into the dist/build folder.
npx obsidian-dev-utils build:cleanCleans dist folder.
npx obsidian-dev-utils build:compileChecks if code compiles.
npx obsidian-dev-utils build:compile:svelteChecks if Svelte code compiles.
npx obsidian-dev-utils build:compile:typeScriptChecks if TypeScript code compiles.
npx obsidian-dev-utils build:staticCopies static folder to dist folder.
npx obsidian-dev-utils devCompiles the development version of your plugin into the dist/dev folder. The OBSIDIAN_CONFIG_DIR can be set either as an environment variable or specified in a .env file (e.g., path/to/my/vault/.obsidian). The command automatically copies the compiled plugin to the specified Obsidian configuration directory and triggers the Hot Reload plugin, if it is enabled. If the Hot Reload plugin is not installed, it will be installed automatically, and you will need to enable it manually.
npx obsidian-dev-utils formatFormats your code using dprint.
npx obsidian-dev-utils format:checkChecks formatting of your code using dprint.
npx obsidian-dev-utils lintThis command is looking for eslint.config.mjs file in the root of your project and if it's not found, it creates it referencing the default configuration.
Lints your code, enforcing a code convention to minimize common errors.
npx obsidian-dev-utils lint:fixLints your code and automatically applies fixes where possible.
This command is looking for eslint.config.mjs file in the root of your project and if it's not found, it creates it referencing the default configuration.
npx obsidian-dev-utils publishPublishes the package to NPM. Usually not applicable for plugins.
To bypass manual verification, consider setting NPM_TOKEN to the environment variable or in your .env file.
npx obsidian-dev-utils spellcheckChecks your code for spelling errors.
npx obsidian-dev-utils version <versionUpdateType>Runs build checks before updating the version and releases if all checks pass. The <versionUpdateType> can be major, minor, patch, beta, or a specific version like x.y.z[-suffix].
If you use beta as <versionUpdateType> for your Obsidian plugin, the plugin will be deployed compatible to install with BRAT.
To simplify the usage of these commands, you can add them to your package.json:
{
"scripts": {
"build": "obsidian-dev-utils build",
"build:clean": "obsidian-dev-utils build:clean",
"build:static": "obsidian-dev-utils build:static",
"dev": "obsidian-dev-utils dev",
"lint": "obsidian-dev-utils lint",
"lint:fix": "obsidian-dev-utils lint:fix",
"spellcheck": "obsidian-dev-utils spellcheck",
"version": "obsidian-dev-utils version"
},
"...": "..."
}This setup allows you to run the commands using npm run, like npm run build.
Obsidian Dev Utils also provides a range of general-purpose and Obsidian-specific helper functions.
The functions are grouped by files and folders and you have multiple ways to import them:
import { prompt } from 'obsidian-dev-utils/obsidian/Modal/Prompt';
await prompt({ app, title: 'Enter your name' });
import { Prompt } from 'obsidian-dev-utils/obsidian/Modal';
await Prompt.prompt({ app, title: 'Enter your name' });
import { Modal } from 'obsidian-dev-utils/obsidian';
await Modal.Prompt.prompt({ app, title: 'Enter your name' });
import { obsidian } from 'obsidian-dev-utils';
await obsidian.Modal.Prompt.prompt({ app, title: 'Enter your name' });
import * as obsidianDevUtils from 'obsidian-dev-utils';
await obsidianDevUtils.obsidian.Modal.Prompt.prompt({
app,
title: 'Enter your name'
});The library provides some extensible styles that you can use to style your plugin UI controls.
In order to use those styles in your plugin, you have to initialize the plugin context:
import {
initPluginContext
} from 'obsidian-dev-utils/obsidian/Plugin/PluginContext';
class MyPlugin extends Plugin {
public override onload(): void {
initPluginContext(this.app, this.manifest.id);
// ...
}
}Default styles are defined in main.scss.
The list of css classes is defined in CssClass.ts.
You can override those styles in your plugin's styles.css file via adding your plugin's id to the selector, e.g. for plugin foo-bar:
.foo-bar.obsidian-dev-utils :invalid {
box-shadow: 0 0 0 2px var(--text-error);
}The library provides some components that you can use in your plugin.
See all available components in the Components folder.
In order for components to look properly, their styles has to be initialized. See Styling for more details.
Example of all settings components: built-in and custom:
The library provides some modals that you can use in your plugin.
See all available modals in the Modals folder.
In order for models to look properly, their styles has to be initialized. See Styling for more details.
Example of all modals:
By default, console debug messages are not shown. To enable them you have to enable Verbose mode in the console settings.
When you enable Verbose mode, you will see debug messages in the console sent via console.debug() calls.
obsidian-dev-utils library uses debug library to enable conditional logging.
By default, none of the debug messages are shown. You have to enable the debug namespace explicitly.
To see debug messages for your plugin foo-bar, you have to enable them:
window.DEBUG.enable('foo-bar'); // show all debug messages from the `foo-bar` plugin
window.DEBUG.enable('foo-bar:obsidian-dev-utils:*'); // show all debug messages from the `obsidian-dev-utils` library within the `foo-bar` plugin
window.DEBUG.enable('foo-bar:*'); // show all debug messages from the `foo-bar` plugin and its submodules
window.DEBUG.enable('*:obsidian-dev-utils:*'); // show all debug messages for the `obsidian-dev-utils` library within any plugin
window.DEBUG.enable('*'); // show all debug messagesSee full documentation of window.DEBUG.
Note
You will see StackTraceFakeError in the debug messages. They are not actual errors. It's just a workaround to make stack trace links clickable.
