Table of Contents
Frontend API
The frontend api supports two styles, regular scripts that are run with the current app and note context, and widgets that export an object to Trilium to be used in the UI. In both cases, the frontend api of Trilium is available to scripts running in the frontend context as global variable api
. The members and methods of the api can be seen on the Script API page.
Scripts
Scripts don't have any special requirements. They can be run at will using the execute button in the UI or they can be configured to run at certain times using Attributes on the note containing the script.
Global Events
This attribute is called #run
and it can have any of the following values:
frontendStartup
- executes on frontend upon startup.mobileStartup
- executes on mobile frontend upon startup.backendStartup
- executes on backend upon startup.hourly
- executes once an hour on backend.daily
- executes once a day on backend.
Entity Events
These events are triggered by certain relations to other notes. Meaning that the script is triggered only if the note has this script attached to it through relations (or it can inherit it).
runOnNoteCreation
- executes when note is created on backend.runOnNoteTitleChange
- executes when note title is changed (includes note creation as well).runOnNoteContentChange
- executes when note content is changed (includes note creation as well).runOnNoteChange
- executes when note is changed (includes note creation as well).runOnNoteDeletion
- executes when note is being deleted.runOnBranchCreation
- executes when a branch is created. Branch is a link between parent note and child note and is created e.g. when cloning or moving note.runOnBranchDeletion
- executes when a branch is delete. Branch is a link between parent note and child note and is deleted e.g. when moving note (old branch/link is deleted).runOnChildNoteCreation
- executes when new note is created under this note.runOnAttributeCreation
- executes when new attribute is created under this note.runOnAttributeChange
- executes when attribute is changed under this note.
Widgets
Conversely to scripts, widgets do have some specific requirements in order to work. A widget must:
- Extend BasicWidget or one of it's subclasses.
- Create a new instance and assign it to
module.exports
. - Define a
parentWidget
member to determine where it should be displayed. - Define a
position
(integer) that determines the location via sort order. - Have a
#widget
attribute on the containing note. - Create, render, and return your element in the render function.
- For BasicWidget and NoteContextAwareWidget you should create
this.$widget
and render it indoRender()
. - For RightPanelWidget the
this.$widget
anddoRender()
are already handled and you should instead return the value indoRenderBody()
.
- For BasicWidget and NoteContextAwareWidget you should create
parentWidget
left-pane
- This renders the widget on the left side of the screen where the note tree lives.center-pane
- This renders the widget in the center of the layout in the same location that notes and splits appear.note-detail-pane
- This renders the widget with the note in the center pane. This means it can appear multiple times with splits.right-pane
- This renders the widget to the right of any opened notes.
Tutorial
For more information on building widgets, take a look at Widget Basics.
- Screenshot tour
- Basic concepts
- Installation & setup
- Advanced usage
- Developer guides
- FAQ
- Troubleshooting
Back to Overview