trilium/docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.md

Note Title Widget

This is an example of a note context-aware widget, which reacts to the currently opened note and refreshes automatically as the user navigates through the notes.

Legacy widget

In this example, the title of the note is displayed. It works best on the horizontal layout.

const TPL = `\
<div style="
    display: flex;
    height: 53px;
    width: fit-content;
    font-size: 0.75em;
    contain: none;
    align-items: center;
    flex-shrink: 0;
    padding: 0 1em;
"></div>`;

class NoteTitleWidget extends api.NoteContextAwareWidget {
    doRender() {
        this.$widget = $(TPL);
    }

    async refreshWithNote(note) {
        this.$widget.text(note.title);
    }
}

module.exports = new NoteTitleWidget();

Preact widget (v0.101.0+)

import { defineLauncherWidget, useActiveNoteContext } from "trilium:preact";

export default defineLauncherWidget({
    render: () => {
        const { note } = useActiveNoteContext();
        return <div style={{
            display: "flex",
            height: "53px",
            width: "fit-content",
            fontSize: "0.75em",
            alignItems: "center",
            flexShrink: 0            
        }}>{note?.title}</div>;
    }
});