Trilium Tagging Toolbar Widget

This script adds a simple and powerful tagging toolbar to the bottom of any Trilium note. It allows you to quickly add or remove tags (implemented as relations) from a pre-defined list. The toolbar also displays all tags currently applied to the note for a quick overview.

It's designed to be flexible and performant, with several ways to configure how it finds your tags. This script was inspired by and borrows heavily from the excellent work done by Trilium Collection Views.

(This is a mock-up, but it shows the idea: a tag button and the applied tags next to it).

Features

• Quick Tagging: Add or remove tags with a single click from a dropdown menu.
• Tag Display: See all of a note's tags at a glance in the toolbar.
• Multiple & Context-Aware Tag Sets: The script automatically finds the nearest #availableTags container by searching up the note hierarchy. This allows you to have different tag sets for different parts of your notebook (e.g., a 'Work' set and a 'Personal' set), and the widget will present the correct one based on the current note's location.
• Performance Optimized:
  • Direct Access Mode: For ultimate speed, you can tell the script exactly where your tags are by providing a specific Note ID in the configuration. This is the fastest method.
  • Hierarchy Root: You can limit the search to a specific branch of your note tree. This is useful for both performance and for ensuring, for example, that notes in your 'Work' section never accidentally find tags from your 'Personal' section.
• Customizable:
  • Works via a template, so you control which notes get the toolbar.
  • Style your tags with custom colors and icons using Trilium labels.

How It Finds Your Tags

The script has a smart lookup system to find the list of available tags. It checks in this order:

1. Direct ID Mode: If you provide a specific Note ID for your tag container in the script's configuration, it will use that directly. This is the fastest and most recommended method.
2. Search Mode with Root: If Direct ID is not used, the script will search "up" the hierarchy from the current note, looking for a note with the #availableTags label. If you've set a "Hierarchy Root" Note ID, the search will stop there.
3. Full Search Mode: If neither of the above is configured, it will search all the way to the top of your note tree.

Warning

Using the TAG_CONTAINER_NOTE_ID is the fastest method, but it makes that tag set global and disables the hierarchy search. You cannot use both methods at the same time.

Setup & Installation

Step 1: Create the Script Note

1. Create a new note in Trilium.
2. Set its Type to JS Frontend.
3. Name it something descriptive, like Tagging Toolbar Widget.
4. Add the label #widget to this note to activate it.
5. Copy the full code from the tagging-toolbar.js file in this repository and paste it into the note's content.

Step 2: Configure the Script

At the top of the script code, you will find the configuration section.

// --- SCRIPT CONFIGURATION ---

// IMPORTANT: Set this to your root note ID, or leave empty ("") to search entire tree
const TAG_HIERARCHY_ROOT_NOTE_ID = ""; // e.g., "j4kRQpetv88A"

// IMPORTANT: Set this to your tag container note ID for direct access
const TAG_CONTAINER_NOTE_ID = ""; // e.g., "8FNBCsPFeKwa"

• (Recommended) TAG_CONTAINER_NOTE_ID: Right-click on your main tag container note and select "Copy Note ID", then paste it here. This provides the best performance.
• (Optional) TAG_HIERARCHY_ROOT_NOTE_ID: If you don't use the direct ID, you can limit the search by providing the Note ID of a top-level notebook here.

Step 3: Create Your Tags and Template

1. Create a Tag Container: Create a note to hold your list of tags (e.g., "Project Tags"). If you are using the search mode, give this note the label #availableTags.

2. Create Tags: Create child notes inside the container note. Each child note will become a clickable tag in the dropdown.

3. Create a Template Note: Create a standard note and name it something like "TaggingTemplate" or "Taggable Note Template". Give it a unique label you will remember, for example, #myTemplateWithTags. (That is the default setup and does not require changing)

4. Link the Script to the Template: In the script code, find the super.isEnabled() function and change "myTemplateWithTags" to match the label you just created. (line 49)

   isEnabled() {
       // IMPORTANT: Change this to the label you chose for your template note!
       return super.isEnabled() && this.note.hasLabel("myTemplateWithTags") && !this.note.hasLabel("archived");
   }

5. Reload your Trilium frontend (Ctrl+R or Cmd+R).

Step 4: Use It!

1. Select any note where you want the toolbar to appear.
2. Add your template to the note. The most direct way is to add a ~template relation pointing to your "Taggable Note Template".
3. The tagging toolbar will now appear at the bottom of the note pane!

(Optional) Styling Your Tags

You can customize the appearance of each tag in the dropdown and toolbar by adding labels to the individual tag notes:

• #iconClass: Sets the icon from the BoxIcons library (e.g., #iconClass=bx-briefcase).
• #badgeBackground: Sets the background color (e.g., #badgeBackground=blue).
• #badgeColor: Sets the text color (e.g., #badgeColor=white).

---

Examples For Structuring Your Notes

The script offers two main ways to find your tags: searching the hierarchy (flexible) or using a direct ID (fastest). Here are examples for both.

Example 1: Context-Aware Tags (Search-Based)

This is the default behavior if you don't set a direct ID. The script finds the nearest #availableTags container in the note's hierarchy, allowing you to have different tag sets for different contexts.

In this setup:

Any note with your template inside the Work branch will automatically get the "Project-A," "Urgent," and "Meeting" tags as options.

Any note inside the Personal branch will get "Family," "Vacation," and "Hobby" as options.

- 📂 My Notebook  <- (Optional) Set this as your 'TAG_HIERARCHY_ROOT_NOTE_ID'
  - 📂 Scripts & Templates
    - 📜 Tagging Toolbar Script (#widget)
    - 📄 My Taggable Template (#myTemplateWithTags)
  - 📂 Work
    - 🏷️ Work Tags (#availableTags)
      - #️⃣ Project-A
      - #️⃣ Urgent
      - #️⃣ Meeting
    - 📂 Project Alpha
      - 🗒️ Q3 Planning Doc  <- This note will use the "Work Tags"
  - 📂 Personal
    - 🏷️ Personal Tags (#availableTags)
      - #️⃣ Family
      - #️⃣ Vacation
      - #️⃣ Hobby
    - 📂 Home Reno Project
      - 🗒️ Contractor Quotes  <- This note will use the "Personal Tags"  

Example 2: Using a Single, Global Tag Set (Direct ID)

This method is the most performant and is recommended if you have one primary set of tags you use everywhere. It overrides the search behavior entirely.

To achieve this:

View "note info" to get "Note ID" (example: "pQrStUvWxYz").

Paste that ID into the script configuration.

// --- SCRIPT CONFIGURATION ---
const TAG_CONTAINER_NOTE_ID = "pQrStUvWxYz"; // ID of "Global Tags" is set here

Now, no matter where a note is located, it will always use this one tag set.

- 📂 My Notebook
  - 📂 Common Resources
    - 🏷️ Global Tags  <- View "note info" to get "Note ID"
      - #️⃣ Important
      - #️⃣ Follow-up
  - 📂 Work
    - 🗒️ Q1 Report      <- This note will use the "Global Tags"
  - 📂 Personal
    - 🗒️ Vacation Ideas <- This note will ALSO use the "Global Tags"

Note

Because the script is configured with a direct Note ID, both the "Q1 Report" and the "Vacation Ideas" notes will use the same "Important" and "Follow-up" tags, ignoring any other tag sets that might be closer in the hierarchy.