One of the most attractive things about Obsidian is its extensibility; Obsidian can be tailored to suit nearly every need. The creators have provided us with a playground for customization, allowing us to enhance our workflow by seamlessly integrating personalized features into Obsidian's interface. In this article, I will demonstrate how to add these features in a way that makes them appear as if they are an integral part of Obsidian.

That Built-In Look

When I mention adding features that look 'built-in to Obsidian,' I'm referring to designing informative, useful panels that can be pinned to the right and left sidebars. These panels should sport their own custom icons that match Obsidian's native style or complement the theme you are using. In my case, I employ Kepano's Minimal theme in dark mode, and the examples I will present today are tailored to seamlessly integrate into my custom environment. If you wish to customize these examples to suit your needs, please feel free to send me a message.

A Starting Point

To begin, create a note that presents the information you want to display in the format you desire. In my case, I want to add two distinct features:

  1. A panel that summarizes dangling links (links that don't have an associated page) from my vault.
  2. A panel that summarizes and lets me interact with unfinished tasks, grouping them by due date and sorting them by priority.

We will use these examples to illustrate the process later in the article. For now, focus on creating a new note that presents your information in a user-friendly manner.

Icons and such

To achieve the 'built-in' appearance, custom icons are essential. Obsidian simplifies this process as all its native icons originate from Lucide. After creating your note, select a meaningful icon from Lucide that will seamlessly blend into Obsidian's user interface.

Example 1: Dangling Links

Although it's currently inactive, there used to be an Obsidian plugin for displaying dangling links. We can recreate this functionality by installing the Dataview plugin, which offers a rich query language for gathering and presenting information from your vault. The plugin's extensive documentation includes a vault with numerous examples, showcasing the versatile ways it can be employed. I've even had success in asking ChatGPT to generate Obsidian Dataview queries.

The note

While the query to find dangling links (particularly the faster one) is rather intricate, I won't delve into it here. However, I'll provide a link to the note containing the query.

The icon

To represent our dangling link query, we'll select the unlink icon from Lucide. We'll insert it into the Obsidian interface using CSS, so we need to convert it into a data URI, which looks like a URL but resolves to data.

  • Download the SVG file from Lucide.
  • Use an online app to convert the SVG to BASE 64. In this case, we will use this SVG to Data URI encoder. The converted data URI looks like this:
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23879a09' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71'%3E%3C/path%3E%3Cpath d='m5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71'%3E%3C/path%3E%3Cline x1='8' y1='2' x2='8' y2='5'%3E%3C/line%3E%3Cline x1='2' y1='8' x2='5' y2='8'%3E%3C/line%3E%3Cline x1='16' y1='19' x2='16' y2='22'%3E%3C/line%3E%3Cline x1='19' y1='16' x2='22' y2='16'%3E%3C/line%3E%3C/svg%3E

Putting it all together

To finalize this added feature, follow these steps:

  1. In Obsidian, view the note in 'Reading' mode.
  2. Drag the note's tab to the sidebar where you would like it to appear permanently.
  3. Right-click the tab and 'Pin' the note.
  4. Add a CSS snippet to style the note, remove the pin icon from its tab, and add your custom icon.

The note and CSS snippet for this example are available for download. You can use it as is, but the real value is digging into the code and learning what it does. Don't let the code intimidate you! 😜

In my vault, this is the result:

Example 2: Interactive Task List

In my vault, I manage my tasks using the impressive Tasks plugin, which, like Dataview, boasts a well-documented, powerful query language. For this feature, I'll choose Lucide's "clipboard-list" icon.

Follow the same steps as above. You can download the completed note and snippet.

The result appears like this:

Final Notes

I trust that this article has broadened your horizons regarding the possibilities of enhancing Obsidian's features. While it may require some effort, the benefits it brings to your workflow will undoubtedly be worth it.