Trilium/docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Note context aware widget.md

Note context aware widget

Note context-aware widgets are a different type of widget which automatically react to changes in the current note.

Important aspects:

• The widget must export a class and not an instance of the class (e.g. no new) because it needs to be multiplied for each note, so that splits work correctly.
• Since the class is exported instead of an instance, the parentWidget getter must be static, otherwise the widget is ignored.

Example displaying the current note title

This is a note context-aware widget that simply displays the name the current note. 

Classic example

class HelloNoteDetail extends api.NoteContextAwareWidget {

    constructor() {
        super();
        this.contentSized();
    }

    doRender() {
        this.$widget = $("<div>");
    }

    async refreshWithNote(note) {
        this.$widget.text("Current note: " + note.title);
    }
    
    static get parentWidget() { return "note-detail-pane" }    
    get position() { return 10 }
    
}

module.exports = HelloNoteDetail;

Preact (v0.101.0+)

import { defineWidget, useNoteContext, useNoteProperty } from "trilium:preact";

export default defineWidget({    
    parent: "note-detail-pane",
    position: 10,
    render: () => {
        const { note } = useNoteContext();
        const title = useNoteProperty(note, "title");
        return <span>Current note JSX: {title}</span>;
    }
});