Trilium Frontend API updating labels/attributes

[lzinga]

I have been getting familiar with the js frontend scripting, specifically with the word count as a testing ground. I want to update an attribute to have the word count so it can be included in any potential API calls. I can update the front end, but would the best way to update the backend is something similar to this? I know you could add some debouncing so it only updates after a set interval ect.

I am mostly wondering if there is something I am missing. I would imagine since we are on the front end couldn't we update the attributes locally and whenever the note itself gets saved or changed it properly saves it? I could totally be misunderstanding something here too.

async refreshWithNote(note) {
    if (note.type !== 'text' || !note.hasLabel('wordCount') || note.hasLabel('template')) { 
        this.toggleInt(false);
        return;
    }
    
    this.toggleInt(true);
    
    // Calculate word count
    const {content} = await note.getNoteComplement();
    const text = $(content).text();
    const chunks = text.split(/[\s-+:,/\\]+/).filter(c => c !== '');
    const words = chunks.length === 1 && chunks[0] === '' ? 0 : chunks.length;
    const characters = chunks.join('').length;
    
    this.$wordCount.text(words);
    this.$characterCount.text(characters);
    
    await api.runOnBackend((noteId, wordCount) => {
        const note = api.getNote(noteId);
        note.setLabel('wordCount', wordCount);
    }, [note.noteId, words.toString()]);
}

[dosubot[bot]]

You're on the right track—updating attributes (like word count) so they're available to API calls requires an explicit backend update. Local/frontend changes alone aren't persisted or exposed via the API; you must send the update to the backend, which your use of api.runOnBackend does correctly. This is the recommended approach for persisting attribute changes from frontend scripts in Trilium [source].

Debouncing is not built into Trilium's attribute update flow, but it's a good idea to add it yourself if updates could happen frequently (e.g., on every keystroke). Trilium provides a general-purpose debounce utility in the frontend (debounce.ts), which you can use to wrap your backend update call and limit how often it runs [source].

Here's a quick example of how you might integrate debouncing into your code:

import debounce from 'services/debounce';

// Wrap your backend update in a debounced function
const debouncedUpdateWordCount = debounce(async (noteId, words) => {
    await api.runOnBackend((noteId, wordCount) => {
        const note = api.getNote(noteId);
        note.setLabel('wordCount', wordCount);
    }, [noteId, words.toString()]);
}, 1000); // 1000ms debounce interval

// Then call this in your refreshWithNote logic
debouncedUpdateWordCount(note.noteId, words);

This way, rapid changes will only trigger a backend update after things settle, reducing unnecessary API calls. Once the backend receives the update, the attribute is immediately persisted and available for API access—no further action is needed [source].

Let me know if you want a more detailed example or have other questions!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}