improving my first widget

[bl4ck5un]

I built this widget that reads #dueDate attributes from children notes, and adds to the parent note a countdown of all due dates. It's useful to get a quick glance at all my deadlines. (repo)

Two questions for the community

• Are custom widgets supported in the mobile frontend? It doesn't seem to load on mobile version.
• Is there a better way for placing custom UI near the top of child-note list? Right now my widget searches the DOM for .note-list-wrapper and places a new div there. Because that area is not always present immediately, Codex suggested using a MutationObserver to wait for the wrapper to appear. This works, but it feels fragile.

[dosubot[bot]]

Hi @bl4ck5un! I'm Dosu and I’m helping the Trilium team.

Nice widget idea! I can offer some input on both questions:

Mobile support: Custom widgets are not supported on the mobile frontend. The mobile initialization code skips widget bundle loading entirely [1] — desktop calls bundleService.getWidgetBundlesByParent() to load custom widgets [2], but mobile never does. The mobile layout is a fixed, hardcoded structure with no provision for custom widget positioning [3]. Note that #mobileStartup scripts do run on mobile [4], but they can't modify the layout structure to add widgets.

Placing UI near the child-note list: A couple of alternatives to DOM searching + MutationObserver:

1. Use parentWidget positioning — the widget API lets you declare where your widget lives structurally, e.g. parentWidget = 'note-detail-pane' with a position number to control ordering [[5]](https://github.com/TriliumNext/Trilium/blob/0d805a01c1b5ba3d77b6d5929df28d5aa501b0a2/docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.md#L62-L68). This avoids manual DOM injection entirely.

2. Hook into contentElRefreshed instead of MutationObserver — this event fires when note content is fully rendered and ready for DOM manipulation [6]:

   async eventReceived(name, data) {
       if (name === 'contentElRefreshed') {
           const $noteList = $('.note-list-wrapper');
           if ($noteList.length) {
               $noteList.prepend(this.$customElement);
           }
       }
   }

3. CSS positioning via cssBlock() is the most resilient option if you just need visual placement, since it avoids conflicts with React re-rendering [7].

The parentWidget approach is the cleanest if it gives you the placement you want. If you specifically need to inject inside the note-list-wrapper, contentElRefreshed is a much more stable hook than a MutationObserver. Just make sure your DOM manipulation is idempotent since React can re-render at any time.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.