Widgets vs custom render notes

[saitatter]

What is the difference between widgets and writing backend+frontend Js in conjunction with render notes?

[dosubot[bot]]

The main difference is that widgets are reusable UI components that live in specific areas of the Trilium interface (like the left pane, center pane, or right pane) and are designed to react automatically to note activation or switching. They are implemented as JS frontend notes that extend BasicWidget or NoteContextAwareWidget and are labeled with #widget. Widgets are best for features that need to run automatically or provide interactive UI elements tied to notes, such as math rendering, diagram rendering, or dynamic word counts. They are tightly integrated into the UI and event system, making them ideal for event-driven or always-on behaviors example & explanation overview.

Custom render notes, on the other hand, use the renderNote relation to specify which JS or HTML note should be executed/rendered for a particular note. This approach is more about customizing the rendering and scripting within the content of a specific note. You can use both backend and frontend JS here: frontend JS for UI logic and backend JS for manipulating note content via the scripting API. Render notes are great for embedding custom webapps, interactive widgets, or specialized rendering inside a note. They support modular code (child JS notes are auto-imported), and a common pattern is to use a child note (like JSON) for data persistence discussion & example.

In short: use widgets for UI components that need to be always present or react to navigation, and use render notes with backend+frontend JS for custom rendering or scripting inside individual notes. Both can use backend+frontend JS, but their integration points and use cases are different.

To reply, just mention @dosu.

---

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