DEV Community

Sanjar Afaq
Sanjar Afaq

Posted on

Hot reload setup for Obsidian plugin development

Obsidian is a markdown based note taking tool. It has a rich plugin ecosystem. Most plugins are free and open-source.

This article talks about general development setup of an Obsidian plugin. It's not focused on creating a new plugin from scratch, but for making changes to existing plugins - so you can fix bugs directly, make your life easier and help everyone at the same time.

Vault setup

By vault I mean an Obsidian notebook (folder).

Step 1: Create a new Obsidian vault
Step 2: Install and enable this hot-reload plugin as usual in this new vault.

Note: you can install/develop a plugin in an existing vault too, assuming you have a safe backup of the vault.

Setting up the plugin code

Example plugin - https://github.com/JYC333/obsidian-attachment-name-formatting
Step 1: Clone the plugin repo inside .obsidian/plugins
Step 2: Open the cloned folder in an editor.
Step 3: Change the "name", "id" and "description" in the manifest to some recognizable name. I usually do this in a new git branch.
Step 4: Install dependencies
Step 5: Start the plugin development mode, and make sure that the built files are directly kept in the .obsidian/plugins/cloned-plugin-name folder. You need to look make sure atleast main.js, manifest.json exist.

Install the plugin (from folder)

In Obsidian (inside the vault), go to Settings > Community Plugins > Scroll down until you reach 'Installed Plugins' section.

Press the refresh icon (beside folder) of the section. The "name" (as changed in manifest.json) should appear here. Enable the plugin. If it doesn't appear here, click the folder icon and see if the cloned folder is present or not.

Developing/observing

  • Open the Obsidian developer tools panel. Top app panel > View > Toggle Developer tools.
  • Start editing the app code, and changes will show up in Obsidian. Make sure the development server is running.
  • Most development modes (React/Vue etc) will automatically re-build the code (produce main.js) on change of app code.

Top comments (0)