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