Frontend Basics

Front-end scripts are custom JavaScript notes that are run on the client (browser environment)

There are four flavors of front-end scripts:
Regular scripts These are run with the current app and note context. These can be run either manually or automatically on start-up.
Custom Widgets These can introduce new UI elements in various positions, such as near the Note Tree, content area or even the Right Sidebar.
Launch Bar Widgets Similar to Custom Widgets, but dedicated to the Launch Bar. These can simply introduce new buttons or graphical elements to the bar.
Render Note This allows rendering custom content inside a note, using either HTML or Preact JSX.

For more advanced behaviors that do not require a user interface (e.g. batch modifying notes), see Backend scripts.

Scripts#

Scripts don't have any special requirements. They can be run manually using the Execute button on the code note or they can be run automatically; to do so, set the run label to either:

  • frontendStartup - when Trilium frontend starts up (or is refreshed), but not on mobile.
  • mobileStartup - when Trilium frontend starts up (or is refreshed), on mobile.

Widgets#

Widgets require a certain format in order for Trilium to be able to integrate them into the UI.

  • For legacy widgets, the script note must export a BasicWidget or a derived one (see Note context aware widget or Right pane widget).
  • For Preact widgets, a built-in helper called defineWidget needs to be used.

For more information, see Custom Widgets.

Script API#

The front-end API of Trilium is available to all scripts running in the front-end context as global variable api. For a reference of the API, see Frontend API.

Tutorial#

For more information on building widgets, take a look at Widget Basics.