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>;
    }
});
```