From 86307b482f6296ceee60aa200ed96bfa3811430f Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Wed, 24 Dec 2025 00:01:13 +0200 Subject: [PATCH] docs(user): change URL for demo notes --- .../Advanced Usage/Database/Demo Notes.html | 18 +- .../User Guide/Note Types/Render Note.html | 43 +-- .../Common concepts/Script bundles.html | 26 +- .../Frontend Basics/Custom Widgets.html | 250 +++++++------- .../Frontend Basics/Custom Widgets/CSS.html | 22 +- .../Note context aware widget.html | 13 +- .../Custom Widgets/Right pane widget.html | 24 +- .../Custom Widgets/Widget Basics.html | 26 +- .../Launch Bar Widgets/Note Title Widget.html | 2 +- .../Scripting/Frontend Basics/Preact.html | 44 ++- .../Preact/Built-in components.html | 24 +- .../Scripting/Frontend Basics/Preact/CSS.html | 13 +- .../Preact/Component libraries.html | 29 +- .../Frontend Basics/Preact/Hooks.html | 32 +- .../Developer Guide/Documentation.md | 2 +- docs/User Guide/!!!meta.json | 312 +++++++++--------- .../Advanced Usage/Database/Demo Notes.md | 2 +- .../User Guide/Note Types/Render Note.md | 2 +- .../Frontend Basics/Custom Widgets.md | 26 +- .../Launch Bar Widgets/Note Title Widget.md | 2 +- .../Scripting/Frontend Basics/Preact.md | 8 +- .../Preact/Built-in components.md | 4 +- .../Scripting/Frontend Basics/Preact/CSS.md | 2 +- 23 files changed, 441 insertions(+), 485 deletions(-) diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Advanced Usage/Database/Demo Notes.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Advanced Usage/Database/Demo Notes.html index 851f267f7..d3f5a7570 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Advanced Usage/Database/Demo Notes.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Advanced Usage/Database/Demo Notes.html @@ -1,15 +1,15 @@

When you run Trilium for the first time, it will generate a new database containing demo notes. These notes showcase its many features, such as:

Restoring Demo Notes

@@ -21,10 +21,10 @@

You can easily restore the demo notes by using Trilium's built-in import feature by importing them:

\ No newline at end of file diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Render Note.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Render Note.html index c65b789d0..f0f720b87 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Render Note.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Render Note.html @@ -7,13 +7,10 @@ via an attribute.

Creating a render note

    -
  1. Create a Code note - with the HTML language, with what needs to be displayed (for example - <p>Hello world.</p>).
    2. -
  2. Create a Render Note.
    3. -
  3. Assign the renderNote relation to +
  4. Create a Code note + with the HTML language, with what needs to be displayed (for example <p>Hello world.</p>).
    5. +
  5. Create a Render Note.
    6. +
  6. Assign the renderNote relation to point at the previously created code note.

Legacy scripting using jQuery

@@ -29,7 +26,7 @@ The current date & time is <span class="date"></span>
const $dateEl = api.$container.find(".date");
 $dateEl.text(new Date());
-

Now create a render note at any place and set its ~renderNote relation +

Now create a render note at any place and set its ~renderNote relation to point to the HTML note. When the render note is accessed it will display:

Current date & time @@ -42,33 +39,37 @@ $dateEl.text(new Date()); need to provide a HTML anymore.

Here are the steps to creating a simple render note:

    -
  1. Create a note of type Render Note.
    2. -
  2. -

    Create a child Code note +

  3. +

    Create a note of type Render Note.

    +
    4. +
  4. +

    Create a child Code note with JSX as the language. -
    As an example, use the following content:

    export default function() {
+      
    As an example, use the following content:
    export default function() {
     return (
         <>
             <p>Hello world.</p>
         </>
     );
 }
    
-
    5. -
  5. In the parent render note, define a ~renderNote relation - pointing to the newly created child.
    6. -
  6. Refresh the render note and it should display a “Hello world” message.
    7. + +
  7. +

    In the parent render note, define a ~renderNote relation pointing + to the newly created child.

    +
    8. +
  8. +

    Refresh the render note and it should display a “Hello world” message.

    +

Refreshing the note

It's possible to refresh the note via:

Examples

\ No newline at end of file diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Common concepts/Script bundles.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Common concepts/Script bundles.html index 2abeaa288..f9d7fab75 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Common concepts/Script bundles.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Common concepts/Script bundles.html @@ -1,22 +1,22 @@ -

For both Render Note and +

For both Render Note and more complicated scripts, it's generally useful to split the code into - multiple Code notes.

+ multiple Code notes.

When a script is run, the sub-children of the script being run (or the  Render Note) are checked for children. If the children are Code notes + class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note) are checked for children. If the children are Code notes of the corresponding type (front-end or backend) as the code being run, they will be evaluated as well.

The collection of a script and its child notes is called a bundle. A child note inside a bundle is called a module.

As a basic example of dependencies, consider the following note structure:

    -
  • +

  • Script with dependency - 

    api.log(MyMath.sum(2, 2));
    + 

    api.log(MyMath.sum(2, 2));
      -
    • +

    • MyMath - 

      module.exports = {
+        
      module.exports = {
     sum(a, b) {
         return a + b;
     }
@@ -26,21 +26,21 @@

    When Script with dependency is run, it will detect MyMath as - a submodule and provide the result of its module.exports object + a submodule and provide the result of its module.exports object into a global object with the same name as the note.

    Alternative syntax

    -

    Instead of providing an object to module.exports, - it's also possible to add fields individually:

    module.exports.sum = (a, b) => a + b;
+
    Instead of providing an object to module.exports, it's also
+  possible to add fields individually:
    module.exports.sum = (a, b) => a + b;
 module.exports.subtract = (a, b) => a - b;
    
 
    Ignoring a code script from a bundle
    
 
    To ignore a script from being included in a bundle (e.g. if it's unrelated
-  to the parent script note), apply the #disableInclusion label.
    
+  to the parent script note), apply the #disableInclusion label.
    
 
    Sharing a module across multiple bundles
    
 
    Modules can be reused across multiple scripts by simply cloning the shared
-  module between two modules (see Cloning Notes).
    
+  module between two modules (see Cloning Notes).
    
 
    Optionally, a separate note can be used to contain all the different reusable
   modules for an easy way to discover them.
    
\ No newline at end of file
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.html
index 6c1830f8f..c6983e5d7 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.html	
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.html	
@@ -4,164 +4,150 @@
 
    Preact with JSX vs. vanilla jQuery
    
 
    In older versions of Trilium, custom widgets were exclusively written
   in a combination of jQuery with Trilium's internal widget architecture
-  (e.g., BasicWidget, NoteContextAwareWidget).
    
+  (e.g., BasicWidget, NoteContextAwareWidget).
    
 
    Starting with v0.101.0, custom widgets can also be written in JSX using
-  the Preact framework.
+  the Preact framework.
   Both legacy and Preact widgets have the same capabilities, with a single
   difference:
    
 
      
-  
    • Preact widgets are content-sized by default whereas legacy widgets need
-    this.contentSized()applied in the constructor. For more information,
-      see the corresponding section in Troubleshooting.
      • 
+  
    • Preact widgets are content-sized by default whereas legacy widgets need this.contentSized() applied
+    in the constructor. For more information, see the corresponding section
+    in Troubleshooting.
      • 
 
    
 
    Wherever possible, widget examples will be both in the legacy and Preact
   format.
    
 
    Creating a custom widget
    
 
      
-  
    1. Create a Code note.
      2. 
-  
    2. Set the language to:
+  
    3. Create a Code note.
      4. 
+  
    4. Set the language to:
     
        
-      
      1. JavaScript (frontend) for legacy widgets using jQuery.
        2. 
-      
      2. JSX for Preact widgets. You might need to go to Options → Code to enable
+      
      3. JavaScript (frontend) for legacy widgets using jQuery.
        4. 
+      
      4. JSX for Preact widgets. You might need to go to Options → Code to enable
         the language first.
        5. 
     
      
-    
      5. 
-    
    5. Apply the #widget  label.
      6. 
+  
+  
    6. Apply the #widget  label.
      7. 
 
    
 
    Getting started with a simple example
    
 
    Let's start by creating a widget that shows a message near the content
   area. Follow the previous section to create a code note, and use the following
   content.
    
-
    
-  
-    
-      
-        
-        
-      
-    
-    
-      
-        
+    
+  
+
    LegacyPreact (v0.101.0+)
    class HelloNoteDetail extends api.BasicWidget {
+
+  
+    
+      
+      
+    
+  
+  
+    
+      
-        
+      
-      
-    
-  
    LegacyPreact (v0.101.0+)
    class HelloNoteDetail extends api.BasicWidget {
 
-    constructor() {
-        super();
-        this.contentSized();
-    }
-
-    get parentWidget() { return "center-pane" }
-
-    doRender() {
-        this.$widget = $("<span>Center pane</span>");
-    }
-    
+
    constructor() {
+    super();
+    this.contentSized();
 }
 
-module.exports = new HelloNoteDetail();
    
-        
    import { defineWidget } from "trilium:preact";
+get parentWidget() { return "center-pane" }
 
-export default defineWidget({
+doRender() {
+    this.<!--FORMULA_INLINE_1766526977514_0-->("&lt;span&gt;Center pane&lt;/span&gt;");
+}
    
+        
    }
    
+        
    module.exports = new HelloNoteDetail();
    
+        
+        
+      
    import { defineWidget } from "trilium:preact";
    export default defineWidget({
     parent: "center-pane",
     render: () => <span>Center pane from Preact.</span>
-});
    
-        
    
-
-
    Refresh the application and
-  the widget should appear underneath the content area.
    
+});
    
+      
    
+
    
+
    Refresh the application and the widget
+  should appear underneath the content area.
    
 
    Widget location (parent widget)
    
 
    A widget can be placed in one of the following sections of the applications:
    
-
    
-  
-    -      -        -          -            -    
-    
-      
-        
-        
-        
-        
-      
-    
-    
-      
-        
-        
-        
-        
-      
-      
-        
-        
-        
-        
-      
-      
-        
-        
-        
-        
-      
-      
-        
-        
-        
-        
-      
-    
+
    





    Value for parentWidget
-        DescriptionSample widgetSpecial requirements
    left-pane
-        Appears within the same pane that holds the Note Tree.Same as above, with only a different parentWidget.None.
    center-pane
-        In the content area. If a split is open, the widget will span all of the
-          splits.See example above.None.
    note-detail-pane
-        
-          
    In the content area, inside the note detail area. If a split is open,
-            the widget will be contained inside the split.
    
-          
    This is ideal if the widget is note-specific.
    
-            		Note context aware widget
-        
-          
      
-            
    • The widget must export a class and not an
-              instance of the class (e.g. no new) because
-              it needs to be multiplied for each note, so that splits work correctly.
      • 
-            
    • Since the class is exported instead of an
-              instance, the parentWidget getter must be
-              static, otherwise the widget is ignored.
      • 
-          
    
-        
    right-pane
-        In the Right Sidebar,
-          as a dedicated section.Right pane widget
-        
-          
      
-            
    • Although not mandatory, it's best to use a RightPanelWidget instead
-              of a BasicWidget or a NoteContextAwareWidget.
      • 
-          
    
-        
    
+  +    +      +        +          +  
+  
+    
+      
+      
+      
+      
+    
+  
+  
+    
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+    
+  
    





    Value for parentWidget
+      DescriptionSample widgetSpecial requirements
    left-pane
+      Appears within the same pane that holds the Note Tree.Same as above, with only a different parentWidget.None.
    center-pane
+      In the content area. If a split is open, the widget will span all of the
+        splits.See example above.None.
    note-detail-pane
+      
+        
    In the content area, inside the note detail area. If a split is open,
+          the widget will be contained inside the split.
    
+        
    This is ideal if the widget is note-specific.
    
+          		Note context aware widget
+      
+        
      
+          
    • The widget must export a class and not an instance of the class
+            (e.g. no new) because it needs to be multiplied for each note,
+            so that splits work correctly.
      • 
+          
    • Since the class is exported instead of an instance, the parentWidget getter
+            must be static, otherwise the widget is ignored.
      • 
+        
    
+      
    right-pane
+      In the Right Sidebar,
+        as a dedicated section.Right pane widget
+      
+        
      
+          
    • Although not mandatory, it's best to use a RightPanelWidget instead
+            of a BasicWidget or a NoteContextAwareWidget.
      • 
+        
    
+      
    
   
    
-  
    
-  
    To position the widget somewhere else, just change the value passed to
-    get parentWidget()for legacy widgets or the parent field
-      for Preact. Do note that some positions such as note-detail-pane and
-      right-panehave special requirements that need to be accounted for
-        (see the table above).
    
+  
    To position the widget somewhere else, just change the value passed to get parentWidget() for
+    legacy widgets or the parent field for Preact. Do note that
+    some positions such as note-detail-pane and right-pane have
+    special requirements that need to be accounted for (see the table above).
    
   
    Launch bar widgets
    
   
    Launch bar widgets are similar to Custom widgets but are specific
-    to the Launch Bar.
-    See Launch Bar Widgets for
+    to the Launch Bar.
+    See Launch Bar Widgets for
     more information.
    
-  
    Custom position
    
-  
     
    
\ No newline at end of file
+  
    Custom position
    
\ No newline at end of file
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/CSS.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/CSS.html
index 5de2258eb..481a6d62b 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/CSS.html	
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/CSS.html	
@@ -1,7 +1,5 @@
 
    Classic widgets
    
-
    In doRender():[1]
+
    In doRender():[1]
 
    this.cssBlock(`#my-widget {
 	position: absolute;
     bottom: 40px;
@@ -9,14 +7,12 @@
     z-index: 1;
 }`);
    
 
    Preact widgets
    
-
    See the dedicated page: CSS.
    
-
      
-  
    1. ^
-    
      
-      
      Reference: https://trilium.rocks/X7pxYpiu0lgU 
      
-      
      
+
      See the dedicated page: CSS.
      
+
        
+  
      1. 
+    
        ^
+    
        
+    
        Reference: https://trilium.rocks/X7pxYpiu0lgU
+    
        
   
        2. 
-  
      
\ No newline at end of file
+
    
\ No newline at end of file
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Note context aware widget.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Note context aware widget.html
index 7f3ed50a7..d0da3c335 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Note context aware widget.html	
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Note context aware widget.html	
@@ -2,14 +2,11 @@
   react to changes in the current note.
    
 
    Important aspects:
    
 
      
-  
    • The widget must export a class and not an
-    instance of the class (e.g. no new) because
-    it needs to be multiplied for each note, so that splits work correctly.
      • 
-  
    • Since the class is exported instead of an
-    instance, the parentWidget getter must be
-    static, otherwise the widget is ignored.
      • 
+  
    • The widget must export a class and not an instance of the class
+    (e.g. no new) because it needs to be multiplied for each note,
+    so that splits work correctly.
      • 
+  
    • Since the class is exported instead of an instance, the parentWidget getter
+    must be static, otherwise the widget is ignored.
      • 
 
    
 
    Example displaying the current note title
    
 
    This is a note context-aware widget that simply displays the name the
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Right pane widget.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Right pane widget.html
index 94127a539..31bf6d40d 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Right pane widget.html	
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Right pane widget.html	
@@ -1,16 +1,14 @@
 
    Key highlights
    
 
      
-  
    • doRender must not be overridden, instead
-    doRenderBody()has to be overridden.
-      
        
-        
      • doRenderBody can optionally be async.
        • 
-      
      
+  
    • doRender must not be overridden, instead doRenderBody() has
+    to be overridden.
+    
        
+      
      • doRenderBody can optionally be async.
        • 
+    
      
   
      • 
-  
    • parentWidget() must be set to “rightPane”.
      • 
-  
    • widgetTitle() getter can optionally be
-    overriden, otherwise the widget will be displayed as “Untitled widget”.
      • 
+  
    • parentWidget() must be set to “rightPane”.
      • 
+  
    • widgetTitle() getter can optionally be overriden, otherwise
+    the widget will be displayed as “Untitled widget”.
      • 
 
    
 
    Example for new layout

    Conditionally changing visibility

    -

    In refreshWithNote:

    const visible = true;	// replace with your own visibility logic
+
    In refreshWithNote:
    const visible = true;	// replace with your own visibility logic
 this.toggleInt(visible);
 this.triggerCommand("reEvaluateRightPaneVisibility");
    
 
    Altering the position within the sidebar
    
 
    By default, the sidebar items are displayed in the order they are found
-  by the application when searching for #widget notes.
    
+  by the application when searching for #widget notes.
    
 
    It is possible to make a widget appear higher or lower up, by adjusting
-  its position property:
    class MyWidget extends api.RightPanelWidget {
+  its position property:
    class MyWidget extends api.RightPanelWidget {
 
 +    get position() { return 20 };
         
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Widget Basics.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Widget Basics.html
index 5d548bb39..57bf28d96 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Widget Basics.html	
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Widget Basics.html	
@@ -16,17 +16,17 @@
 module.exports = new MyWidget();
    
 
    To implement this widget:
    
 
      
-  
    1. Create a new JS Frontend note in Trilium
-    and paste in the code above.
      2. 
-  
    2. Assign the #widget  attribute to
+  
    3. Create a new JS Frontend note in Trilium and paste in the code
+    above.
      4. 
+  
    4. Assign the #widget  attribute to
     the note.
      5. 
-  
    5. Restart Trilium or reload the window.
      6. 
+  
    6. Restart Trilium or reload the window.
      7. 
 
    
 
    To verify that the widget is working, open the developer tools (Ctrl + Shift + I)
-  and run document.querySelector("#my-widget").
-  If the element is found, the widget is functioning correctly. If undefined is
+  and run document.querySelector("#my-widget"). If the element
+  is found, the widget is functioning correctly. If undefined is
   returned, double-check that the note has
-  the #widget  attribute.
    
+  the #widget  attribute.
    
 
    Step 2: Adding an UI Element
    
 
    Next, let's improve the widget by adding a button to it.
    const template = `<div id="my-widget"><button>Click Me!</button></div>`;
 
@@ -46,9 +46,7 @@ module.exports = new MyWidget();
    
 
    Step 3: Styling the Widget
    
 
    To make the button more visually appealing and position it correctly,
   we'll apply some custom styling. Trilium includes Box Icons,
-  which we'll use to replace the button text with an icon. For example the
-  bx bxs-magic-wandicon.
    
+  which we'll use to replace the button text with an icon. For example the bx bxs-magic-wand icon.
    
 
    Here's the updated template:
    const template = `<div id="my-widget"><button class="tree-floating-button bx bxs-magic-wand tree-settings-button"></button></div>`;
    
 
    Next, we'll adjust the button's position using CSS:
    class MyWidget extends api.BasicWidget {
     get position() { return 1; }
@@ -71,8 +69,7 @@ module.exports = new MyWidget();
    
   of the left pane, alongside other action buttons.
    
 
    Step 4: Adding User Interaction
    
 
    Let’s make the button interactive by showing a message when it’s clicked.
-  We'll use the api.showMessage method from
-  the Script API.
    class MyWidget extends api.BasicWidget {
+  We'll use the api.showMessage method from the Script API.
    class MyWidget extends api.BasicWidget {
     get position() { return 1; }
     get parentWidget() { return "left-pane"; }
     
@@ -90,8 +87,9 @@ module.exports = new MyWidget();
    
 }
 
 module.exports = new MyWidget();
    
-
    For the list of possible values for parentWidget(),
-  see Custom Widgets. 
    
+
    For the list of possible values for parentWidget(), see 
+  Custom Widgets. 
    
 
    Reload the application one last time.
   When you click the button, a "Hello World!" message should appear, confirming
   that your widget is fully functional.
    
\ No newline at end of file
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.html
index 5386d0052..70ab3f1ac 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.html	
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.html	
@@ -30,7 +30,7 @@ class NoteTitleWidget extends api.NoteContextAwareWidget {
 }
 
 module.exports = new NoteTitleWidget();
    
-
    Preact widget (v0.101.0+)
    import { defineLauncherWidget, useActiveNoteContext } from "trilium:preact";
+
    Preact widget (v0.101.0+)
    import { defineLauncherWidget, useActiveNoteContext } from "trilium:preact";
 
 export default defineLauncherWidget({
     render: () => {
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact.html
index 1f99be5c5..82c823548 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact.html	
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact.html	
@@ -2,16 +2,16 @@
   support for JSX.
    
 
    Preact can be used for:
    
 
 
    To get started, the first step is to enable JSX in the list of Code languages.
   Go to Options → Code Notes and check the “JSX” language. Afterwards, proceed
-  with the documentation in either Render Note or 
+  with the documentation in either Render Note or 
   Custom Widgets, which will both have a section on how to use the new
+  class="reference-link" href="#root/_help_MgibgPcfeuGz">Custom Widgets, which will both have a section on how to use the new
     Preact integration.
    
 
 
    Import/exports
    
 
    When using Preact with JSX, there is a special syntax which provides ES-like
-  imports. This import syntax makes way for
-  a more intuitive that doesn't make use of global objects and paves the
-  way for better auto-completion support that might be introduced in the
-  future. 
    
+  imports. This import syntax makes way for a more intuitive that
+  doesn't make use of global objects and paves the way for better auto-completion
+  support that might be introduced in the future. 
    
 
    API imports
    
-
    Instead of:
    api.showMessage("Hello");
    
-
    the JSX version looks like this:
    import { showMessage } from "trilium:api";
+
    Instead of:
    api.showMessage("Hello");
    
+
    the JSX version looks like this:
    import { showMessage } from "trilium:api";
 showMessage("hello");
    
 
    Preact API imports (hooks, components)
    
-
    There's a new Script API dedicated
+
    There's a new Script API dedicated
   to Preact, which provides shared components that are also used by Trilium
-  internally as well as hooks, for example.
    import { useState } from "trilium:preact";
+  internally as well as hooks, for example.
    import { useState } from "trilium:preact";
 const [ myState, setMyState ] = useState("Hi");
    
 
    Exporting
    
 
    JSX notes can export a component for use in Render Note or
-  for Component libraries: 
    export default function() {
+  href="#root/_help_HcABDtFCkbFN">Render Note or for Component libraries: 
    export default function() {
     return (
         <>
             <p>Hello world.</p>
@@ -44,15 +43,13 @@ const [ myState, setMyState ] = useState("Hi");
    
     );
 }
    
 
    Import/export are not required
    
-
    These imports are syntactic sugar meant to replace the usage for the
-  apiglobal object (see Script API). 
    
+
    These imports are syntactic sugar meant to replace the usage for the api global
+  object (see Script API). 
    
 
   
    Under the hood
    
   
    Unlike JavaScript, JSX requires pre-processing to turn it into JavaScript
@@ -60,5 +57,4 @@ class="admonition note">
     a JavaScript library which processes the JSX to pure JavaScript. The processing
     is done each time a script is run (for widgets this happens at every program
     startup). If you notice any performance degradation due to long compilation,
-    consider reporting the issue to
-    us.
    
\ No newline at end of file
+    consider reporting the issue to us.
    
\ No newline at end of file
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.html
index a4c6faa6f..27aa57582 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.html	
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.html	
@@ -4,11 +4,11 @@
   
    A partial screenshot from the Widget showcase example (see below).
    
 
 
    Trilium comes with its own set of Preact components, some of which are
-  also available to Custom Widgets and 
+  also available to Custom Widgets and 
   Render Note.
    
-
    To use these components, simply import them from trilium:preact:
    import { ActionButton, Button, LinkButton } from "trilium:preact";
    
-
    and then use them:
    export default function MyRenderNote() {
+  class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note.
    
+
    To use these components, simply import them from trilium:preact:
    import { ActionButton, Button, LinkButton } from "trilium:preact";
    
+
    and then use them:
    export default function MyRenderNote() {
     const onClick = () => showMessage("A button was pressed");
     
     return (
@@ -26,19 +26,19 @@
 
-
    This is a Render Note example
+
    This is a Render Note example
   with JSX that shows most of the built-in components that are accessible
   to custom widgets and JSX render notes.
    
 
    To use it, simply:
    
 
      
-  
    1. Create a render note.
      2. 
-  
    2. Create a child code note of JSX type with the content of this file: 
+  
    3. Create a render note.
      4. 
+  
    4. Create a child code note of JSX type with the content of this file: 
     Widget showcase
+    class="reference-link" href="#root/_help_i9B4IW7b6V6z">Widget showcase
   
      5. 
-  
    5. Set the ~renderNote relation of the parent
-    note to the child note.
      6. 
-  
    6. Refresh the render note to see the results.
      7. 
+  
    7. Set the ~renderNote relation of the parent note to the child
+    note.
      8. 
+  
    8. Refresh the render note to see the results.
      9. 
 
    
\ No newline at end of file
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.html
index d11c1e1d8..2cdec3295 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.html	
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.html	
@@ -1,19 +1,12 @@
-
    Inline styles
    <div style={{
-
+
    Inline styles
    <div style={{
     display: "flex",
-
     height: "53px",
-
     width: "fit-content",
-
     fontSize: "0.75em",
-
     alignItems: "center",
-
     flexShrink: 0            
-
 }}>/* [...] */</div>
    
 
    Custom CSS file
    
-
    Simply create a Custom app-wide CSS.
+
    Simply create a Custom app-wide CSS.
   Make sure the class names are unique enough to not intersect with other
-  UI elements, consider adding a prefix (e.g. x-mywidget-).
    
\ No newline at end of file
+  UI elements, consider adding a prefix (e.g. x-mywidget-).
    
\ No newline at end of file
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Component libraries.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Component libraries.html
index 8b0ffb3bb..08c797737 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Component libraries.html	
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Component libraries.html	
@@ -1,26 +1,26 @@
-
    Using the concept of Script bundles,
+
    Using the concept of Script bundles,
   it's possible to create components that are shared for multiple widgets
-  or Render Note.
    
+  or Render Note.
    
 
    Exporting a single component
    
 
    This is generally useful for big components.
    
 
    Here's an example child hierarchy using Render Note: 
    
+  href="#root/_help_HcABDtFCkbFN">Render Note: 
    
 
      
-  
    • My render note
+  
    • My render note
     
      Note type: Render Note
-    
      Link ~renderNote to the child note (Render note with subcomponents)
+    
      Link ~renderNote to the child note (Render note with subcomponents)
     
        
-      
      • 
+      
      • 
         
        Render note with subcomponents
-          
        Type: JSX
        export default function() {
+          
        Type: JSX
        export default function() {
     return (
         <MyComponent />        
     );
 }
        
         
          
-          
        • 
+          
        • 
             
          MyComponent
-              
          Type: Code / JSX
          export default function MyComponent() {
+              
          Type: Code / JSX
          export default function MyComponent() {
     return <p>Hi</p>;
 }
          
           
          • 
@@ -30,17 +30,16 @@
   
 
        
 
        Multiple components per note
        
-
        To export multiple components, use the export keyword
-  next to each of the function components.
        
-
        Here's how a sub-note called MyComponents would
-  look like:
        export function MyFirstComponent() {
+
        To export multiple components, use the export keyword next
+  to each of the function components.
        
+
        Here's how a sub-note called MyComponents would look like:
        export function MyFirstComponent() {
     return <p>First</p>;
 }
 
 export function MySecondComponent() {
     return <p>Bar</p>;
 }
        
-
        Then in its parent note:
        const { MyFirstComponent, MySecondComponent } = MyComponents;
+
        Then in its parent note:
        const { MyFirstComponent, MySecondComponent } = MyComponents;
 
 export default function() {
     return (
@@ -51,5 +50,5 @@ export default function() {
     );
 }
        
 
        Alternatively, it's also possible to use the components directly without
-  assigning them to a const first:
        <MyComponents.MyFirstComponent />
+  assigning them to a const first:
        <MyComponents.MyFirstComponent />
 <MyComponents.MySecondComponent />
        
\ No newline at end of file
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Hooks.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Hooks.html
index 5dadda792..45255b1d7 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Hooks.html	
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Hooks.html	
@@ -1,14 +1,14 @@
 
        Standard Preact hooks
        
-
        All standard Preact hooks are available as an import in trilium:api.
        
+
        All standard Preact hooks are available as an import in trilium:api.
        
 
        For example:
        import { useState } from "trilium:preact";
 const [ myState, setMyState ] = useState("Hi");
        
 
        Custom hooks
        
 
        Trilium comes with a large set of custom hooks for Preact, all of which
   are also available to custom widgets and Render Note.
        
-
        useNoteContext
        
-
        As a replacement to Note context aware widget,
-  Preact exposes the current note context in the useNoteContext hook:
        import { defineWidget, useNoteContext, useNoteProperty } from "trilium:preact";
+  href="#root/_help_HcABDtFCkbFN">Render Note.
        
+
        useNoteContext
        
+
        As a replacement to Note context aware widget,
+  Preact exposes the current note context in the useNoteContext hook:
        import { defineWidget, useNoteContext, useNoteProperty } from "trilium:preact";
 
 export default defineWidget({    
     parent: "note-detail-pane",
@@ -21,15 +21,13 @@ export default defineWidget({
 });
        
 
        Note that the custom widget must be inside the content area (so note detail
   widget) for this to work properly, especially when dealing with splits.
        
-
        useActiveNoteContext
        
-
        useActiveNoteContext is an alternative
-  to useNoteContext which works even if the
-  widget is not within the note detail section and it automatically switches
-  the note context as the user is navigating around between tabs and splits.
        
-
        useNoteProperty
        
-
        This hook allows “listening” for changes to a particular property of a
-  FNote, such as the title or
-    typeof a note. The benefit from using the hook is that it actually
-      reacts to changes, for example if the note title or type is changed.
        
\ No newline at end of file
+
        useActiveNoteContext
        
+
        useActiveNoteContext is an alternative to useNoteContext which
+  works even if the widget is not within the note detail section and it automatically
+  switches the note context as the user is navigating around between tabs
+  and splits.
        
+
        useNoteProperty
        
+
        This hook allows “listening” for changes to a particular property of a FNote,
+  such as the title or type of a note. The benefit
+  from using the hook is that it actually reacts to changes, for example
+  if the note title or type is changed.
        
\ No newline at end of file
diff --git a/docs/Developer Guide/Developer Guide/Documentation.md b/docs/Developer Guide/Developer Guide/Documentation.md
index 52e727229..c4c3cfb06 100644
--- a/docs/Developer Guide/Developer Guide/Documentation.md	
+++ b/docs/Developer Guide/Developer Guide/Documentation.md	
@@ -1,5 +1,5 @@
 # Documentation
-There are multiple types of documentation for Trilium:
+There are multiple types of documentation for Trilium:
 
 *   The _User Guide_ represents the user-facing documentation. This documentation can be browsed by users directly from within Trilium, by pressing F1.
 *   The _Developer's Guide_ represents a set of Markdown documents that present the internals of Trilium, for developers.
diff --git a/docs/User Guide/!!!meta.json b/docs/User Guide/!!!meta.json
index cdb0b0ffd..670896d48 100644
--- a/docs/User Guide/!!!meta.json	
+++ b/docs/User Guide/!!!meta.json	
@@ -15618,6 +15618,83 @@
                                     "type": "text",
                                     "mime": "text/markdown",
                                     "attributes": [
+                                        {
+                                            "type": "relation",
+                                            "name": "internalLink",
+                                            "value": "KLsqhjaqh1QW",
+                                            "isInheritable": false,
+                                            "position": 10
+                                        },
+                                        {
+                                            "type": "relation",
+                                            "name": "internalLink",
+                                            "value": "gMkgcLJ6jBkg",
+                                            "isInheritable": false,
+                                            "position": 20
+                                        },
+                                        {
+                                            "type": "relation",
+                                            "name": "internalLink",
+                                            "value": "6f9hih2hXXZk",
+                                            "isInheritable": false,
+                                            "position": 30
+                                        },
+                                        {
+                                            "type": "relation",
+                                            "name": "internalLink",
+                                            "value": "HI6GBBIduIgv",
+                                            "isInheritable": false,
+                                            "position": 40
+                                        },
+                                        {
+                                            "type": "relation",
+                                            "name": "internalLink",
+                                            "value": "s8alTXmpFR61",
+                                            "isInheritable": false,
+                                            "position": 50
+                                        },
+                                        {
+                                            "type": "relation",
+                                            "name": "internalLink",
+                                            "value": "oPVyFC7WL2Lp",
+                                            "isInheritable": false,
+                                            "position": 60
+                                        },
+                                        {
+                                            "type": "relation",
+                                            "name": "internalLink",
+                                            "value": "GhurYZjh8e1V",
+                                            "isInheritable": false,
+                                            "position": 70
+                                        },
+                                        {
+                                            "type": "relation",
+                                            "name": "internalLink",
+                                            "value": "RnaPdbciOfeq",
+                                            "isInheritable": false,
+                                            "position": 80
+                                        },
+                                        {
+                                            "type": "relation",
+                                            "name": "internalLink",
+                                            "value": "M8IppdwVHSjG",
+                                            "isInheritable": false,
+                                            "position": 90
+                                        },
+                                        {
+                                            "type": "relation",
+                                            "name": "internalLink",
+                                            "value": "xYmIYSP6wE3F",
+                                            "isInheritable": false,
+                                            "position": 100
+                                        },
+                                        {
+                                            "type": "relation",
+                                            "name": "internalLink",
+                                            "value": "4Gn3psZKsfSm",
+                                            "isInheritable": false,
+                                            "position": 110
+                                        },
                                         {
                                             "type": "label",
                                             "name": "shareAlias",
@@ -15631,83 +15708,6 @@
                                             "value": "bx bxs-widget",
                                             "isInheritable": false,
                                             "position": 30
-                                        },
-                                        {
-                                            "type": "relation",
-                                            "name": "internalLink",
-                                            "value": "oPVyFC7WL2Lp",
-                                            "isInheritable": false,
-                                            "position": 40
-                                        },
-                                        {
-                                            "type": "relation",
-                                            "name": "internalLink",
-                                            "value": "RnaPdbciOfeq",
-                                            "isInheritable": false,
-                                            "position": 50
-                                        },
-                                        {
-                                            "type": "relation",
-                                            "name": "internalLink",
-                                            "value": "xYmIYSP6wE3F",
-                                            "isInheritable": false,
-                                            "position": 60
-                                        },
-                                        {
-                                            "type": "relation",
-                                            "name": "internalLink",
-                                            "value": "4Gn3psZKsfSm",
-                                            "isInheritable": false,
-                                            "position": 70
-                                        },
-                                        {
-                                            "type": "relation",
-                                            "name": "internalLink",
-                                            "value": "KLsqhjaqh1QW",
-                                            "isInheritable": false,
-                                            "position": 80
-                                        },
-                                        {
-                                            "type": "relation",
-                                            "name": "internalLink",
-                                            "value": "6f9hih2hXXZk",
-                                            "isInheritable": false,
-                                            "position": 90
-                                        },
-                                        {
-                                            "type": "relation",
-                                            "name": "internalLink",
-                                            "value": "HI6GBBIduIgv",
-                                            "isInheritable": false,
-                                            "position": 100
-                                        },
-                                        {
-                                            "type": "relation",
-                                            "name": "internalLink",
-                                            "value": "s8alTXmpFR61",
-                                            "isInheritable": false,
-                                            "position": 110
-                                        },
-                                        {
-                                            "type": "relation",
-                                            "name": "internalLink",
-                                            "value": "GhurYZjh8e1V",
-                                            "isInheritable": false,
-                                            "position": 120
-                                        },
-                                        {
-                                            "type": "relation",
-                                            "name": "internalLink",
-                                            "value": "M8IppdwVHSjG",
-                                            "isInheritable": false,
-                                            "position": 130
-                                        },
-                                        {
-                                            "type": "relation",
-                                            "name": "internalLink",
-                                            "value": "gMkgcLJ6jBkg",
-                                            "isInheritable": false,
-                                            "position": 140
                                         }
                                     ],
                                     "format": "markdown",
@@ -15756,23 +15756,23 @@
                                                 {
                                                     "type": "relation",
                                                     "name": "internalLink",
-                                                    "value": "s8alTXmpFR61",
+                                                    "value": "MgibgPcfeuGz",
                                                     "isInheritable": false,
                                                     "position": 40
                                                 },
+                                                {
+                                                    "type": "relation",
+                                                    "name": "internalLink",
+                                                    "value": "s8alTXmpFR61",
+                                                    "isInheritable": false,
+                                                    "position": 50
+                                                },
                                                 {
                                                     "type": "label",
                                                     "name": "shareAlias",
                                                     "value": "widget-basics",
                                                     "isInheritable": false,
                                                     "position": 20
-                                                },
-                                                {
-                                                    "type": "relation",
-                                                    "name": "internalLink",
-                                                    "value": "MgibgPcfeuGz",
-                                                    "isInheritable": false,
-                                                    "position": 50
                                                 }
                                             ],
                                             "format": "markdown",
@@ -15912,19 +15912,19 @@
                                             "type": "text",
                                             "mime": "text/html",
                                             "attributes": [
+                                                {
+                                                    "type": "relation",
+                                                    "name": "internalLink",
+                                                    "value": "Sg9GrCtyftZf",
+                                                    "isInheritable": false,
+                                                    "position": 10
+                                                },
                                                 {
                                                     "type": "label",
                                                     "name": "shareAlias",
                                                     "value": "css",
                                                     "isInheritable": false,
                                                     "position": 20
-                                                },
-                                                {
-                                                    "type": "relation",
-                                                    "name": "internalLink",
-                                                    "value": "Sg9GrCtyftZf",
-                                                    "isInheritable": false,
-                                                    "position": 30
                                                 }
                                             ],
                                             "format": "markdown",
@@ -16347,46 +16347,46 @@
                                     "mime": "text/html",
                                     "attributes": [
                                         {
-                                            "type": "label",
-                                            "name": "iconClass",
-                                            "value": "bx bxl-react",
+                                            "type": "relation",
+                                            "name": "internalLink",
+                                            "value": "HcABDtFCkbFN",
                                             "isInheritable": false,
-                                            "position": 30
+                                            "position": 10
                                         },
                                         {
                                             "type": "relation",
                                             "name": "internalLink",
                                             "value": "MgibgPcfeuGz",
                                             "isInheritable": false,
-                                            "position": 40
-                                        },
-                                        {
-                                            "type": "relation",
-                                            "name": "internalLink",
-                                            "value": "HcABDtFCkbFN",
-                                            "isInheritable": false,
-                                            "position": 50
-                                        },
-                                        {
-                                            "type": "relation",
-                                            "name": "internalLink",
-                                            "value": "wy8So3yZZlH9",
-                                            "isInheritable": false,
-                                            "position": 60
+                                            "position": 20
                                         },
                                         {
                                             "type": "relation",
                                             "name": "internalLink",
                                             "value": "GLks18SNjxmC",
                                             "isInheritable": false,
-                                            "position": 70
+                                            "position": 30
                                         },
                                         {
                                             "type": "relation",
                                             "name": "internalLink",
                                             "value": "Bqde6BvPo05g",
                                             "isInheritable": false,
-                                            "position": 80
+                                            "position": 40
+                                        },
+                                        {
+                                            "type": "relation",
+                                            "name": "internalLink",
+                                            "value": "wy8So3yZZlH9",
+                                            "isInheritable": false,
+                                            "position": 50
+                                        },
+                                        {
+                                            "type": "label",
+                                            "name": "iconClass",
+                                            "value": "bx bxl-react",
+                                            "isInheritable": false,
+                                            "position": 30
                                         }
                                     ],
                                     "format": "markdown",
@@ -16416,14 +16416,14 @@
                                                     "name": "internalLink",
                                                     "value": "hA834UaHhSNn",
                                                     "isInheritable": false,
-                                                    "position": 30
+                                                    "position": 10
                                                 },
                                                 {
                                                     "type": "relation",
                                                     "name": "internalLink",
                                                     "value": "HcABDtFCkbFN",
                                                     "isInheritable": false,
-                                                    "position": 40
+                                                    "position": 20
                                                 },
                                                 {
                                                     "type": "label",
@@ -16459,14 +16459,14 @@
                                                     "name": "internalLink",
                                                     "value": "HcABDtFCkbFN",
                                                     "isInheritable": false,
-                                                    "position": 40
+                                                    "position": 10
                                                 },
                                                 {
                                                     "type": "relation",
                                                     "name": "internalLink",
                                                     "value": "GhurYZjh8e1V",
                                                     "isInheritable": false,
-                                                    "position": 50
+                                                    "position": 20
                                                 },
                                                 {
                                                     "type": "label",
@@ -16502,7 +16502,7 @@
                                                     "name": "internalLink",
                                                     "value": "AlhDUqhENtH7",
                                                     "isInheritable": false,
-                                                    "position": 30
+                                                    "position": 10
                                                 },
                                                 {
                                                     "type": "label",
@@ -16533,40 +16533,40 @@
                                             "type": "text",
                                             "mime": "text/html",
                                             "attributes": [
-                                                {
-                                                    "type": "label",
-                                                    "name": "iconClass",
-                                                    "value": "bx bxs-component",
-                                                    "isInheritable": false,
-                                                    "position": 30
-                                                },
                                                 {
                                                     "type": "relation",
                                                     "name": "internalLink",
                                                     "value": "MgibgPcfeuGz",
                                                     "isInheritable": false,
-                                                    "position": 40
+                                                    "position": 10
                                                 },
                                                 {
                                                     "type": "relation",
                                                     "name": "internalLink",
                                                     "value": "HcABDtFCkbFN",
                                                     "isInheritable": false,
-                                                    "position": 50
-                                                },
-                                                {
-                                                    "type": "relation",
-                                                    "name": "internalLink",
-                                                    "value": "i9B4IW7b6V6z",
-                                                    "isInheritable": false,
-                                                    "position": 60
+                                                    "position": 20
                                                 },
                                                 {
                                                     "type": "relation",
                                                     "name": "internalLink",
                                                     "value": "6tZeKvSHEUiB",
                                                     "isInheritable": false,
-                                                    "position": 70
+                                                    "position": 30
+                                                },
+                                                {
+                                                    "type": "relation",
+                                                    "name": "internalLink",
+                                                    "value": "i9B4IW7b6V6z",
+                                                    "isInheritable": false,
+                                                    "position": 40
+                                                },
+                                                {
+                                                    "type": "label",
+                                                    "name": "iconClass",
+                                                    "value": "bx bxs-component",
+                                                    "isInheritable": false,
+                                                    "position": 30
                                                 }
                                             ],
                                             "format": "markdown",
@@ -16788,6 +16788,27 @@
                                     "type": "text",
                                     "mime": "text/html",
                                     "attributes": [
+                                        {
+                                            "type": "relation",
+                                            "name": "internalLink",
+                                            "value": "HcABDtFCkbFN",
+                                            "isInheritable": false,
+                                            "position": 10
+                                        },
+                                        {
+                                            "type": "relation",
+                                            "name": "internalLink",
+                                            "value": "6f9hih2hXXZk",
+                                            "isInheritable": false,
+                                            "position": 20
+                                        },
+                                        {
+                                            "type": "relation",
+                                            "name": "internalLink",
+                                            "value": "IakOLONlIfGI",
+                                            "isInheritable": false,
+                                            "position": 30
+                                        },
                                         {
                                             "type": "label",
                                             "name": "iconClass",
@@ -16795,33 +16816,12 @@
                                             "isInheritable": false,
                                             "position": 30
                                         },
-                                        {
-                                            "type": "relation",
-                                            "name": "internalLink",
-                                            "value": "HcABDtFCkbFN",
-                                            "isInheritable": false,
-                                            "position": 40
-                                        },
-                                        {
-                                            "type": "relation",
-                                            "name": "internalLink",
-                                            "value": "6f9hih2hXXZk",
-                                            "isInheritable": false,
-                                            "position": 50
-                                        },
                                         {
                                             "type": "label",
                                             "name": "shareAlias",
                                             "value": "bundles",
                                             "isInheritable": false,
                                             "position": 60
-                                        },
-                                        {
-                                            "type": "relation",
-                                            "name": "internalLink",
-                                            "value": "IakOLONlIfGI",
-                                            "isInheritable": false,
-                                            "position": 70
                                         }
                                     ],
                                     "format": "markdown",
diff --git a/docs/User Guide/User Guide/Advanced Usage/Database/Demo Notes.md b/docs/User Guide/User Guide/Advanced Usage/Database/Demo Notes.md
index a8e74fe53..df8af0f6f 100644
--- a/docs/User Guide/User Guide/Advanced Usage/Database/Demo Notes.md	
+++ b/docs/User Guide/User Guide/Advanced Usage/Database/Demo Notes.md	
@@ -13,7 +13,7 @@ There are some cases in which you may want to restore the original demo notes. F
 
 You can easily restore the demo notes by using Trilium's built-in import feature by importing them:
 
-*   Download [this .zip archive](https://github.com/TriliumNext/Trilium/raw/develop/db/demo.zip) with the latest version of the demo notes
+*   Download [the .zip archive](https://github.com/TriliumNext/Trilium/raw/refs/heads/main/apps/server/src/assets/db/demo.zip) with the latest version of the demo notes
 *   Right click on any note in your tree under which you would like the demo notes to be imported
 *   Click "Import into note"
 *   Select the .zip archive to import it
\ No newline at end of file
diff --git a/docs/User Guide/User Guide/Note Types/Render Note.md b/docs/User Guide/User Guide/Note Types/Render Note.md
index b05591c63..828d7dfef 100644
--- a/docs/User Guide/User Guide/Note Types/Render Note.md	
+++ b/docs/User Guide/User Guide/Note Types/Render Note.md	
@@ -44,7 +44,7 @@ Here are the steps to creating a simple render note:
 2.  Create a child Code note with JSX as the language.  
     As an example, use the following content:
     
-    ```jsx
+    ```
     export default function() {
         return (
             <>
diff --git a/docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.md b/docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.md
index 8eb2cb145..cc011c514 100644
--- a/docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.md	
+++ b/docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.md	
@@ -23,27 +23,21 @@ Wherever possible, widget examples will be both in the legacy and Preact format.
 
 Let's start by creating a widget that shows a message near the content area. Follow the previous section to create a code note, and use the following content.
 
-
        LegacyPreact (v0.101.0+)
        class HelloNoteDetail extends api.BasicWidget {
+
        LegacyPreact (v0.101.0+)
        class HelloNoteDetail extends api.BasicWidget {
 
-    constructor() {
-        super();
-        this.contentSized();
-    }
-
-    get parentWidget() { return "center-pane" }
-
-    doRender() {
-        this.$widget = $("<span>Center pane</span>");
-    }
-    
+
        constructor() {
+    super();
+    this.contentSized();
 }
 
-module.exports = new HelloNoteDetail();
        import { defineWidget } from "trilium:preact";
+get parentWidget() { return "center-pane" }
 
-export default defineWidget({
+doRender() {
+    this.<!--FORMULA_INLINE_1766526977514_0-->("&lt;span&gt;Center pane&lt;/span&gt;");
+}
        }
        module.exports = new HelloNoteDetail();
        import { defineWidget } from "trilium:preact";
        export default defineWidget({
     parent: "center-pane",
     render: () => <span>Center pane from Preact.</span>
-});
        
+});
        
 
 [Refresh the application](../../Troubleshooting/Refreshing%20the%20application.md) and the widget should appear underneath the content area.
 
@@ -51,7 +45,7 @@ export default defineWidget({
 
 A widget can be placed in one of the following sections of the applications:
 
-
        Value for parentWidgetDescriptionSample widgetSpecial requirements
        left-paneAppears within the same pane that holds the Note Tree.Same as above, with only a different parentWidget.None.
        center-paneIn the content area. If a split is open, the widget will span all of the splits.See example above.None.
        note-detail-pane
        In the content area, inside the note detail area. If a split is open, the widget will be contained inside the split.
        This is ideal if the widget is note-specific.
        		Note context aware widget
        • The widget must export a class and not an instance of the class (e.g. no new) because it needs to be multiplied for each note, so that splits work correctly.
        • Since the class is exported instead of an instance, the parentWidget getter must be static, otherwise the widget is ignored.
        right-paneIn the Right Sidebar, as a dedicated section.Right pane widget
        • Although not mandatory, it's best to use a RightPanelWidget instead of a BasicWidget or a NoteContextAwareWidget.
        
+
        Value for parentWidgetDescriptionSample widgetSpecial requirements
        left-paneAppears within the same pane that holds the Note Tree.Same as above, with only a different parentWidget.None.
        center-paneIn the content area. If a split is open, the widget will span all of the splits.See example above.None.
        note-detail-pane
        In the content area, inside the note detail area. If a split is open, the widget will be contained inside the split.
        This is ideal if the widget is note-specific.
        		Note context aware widget
        • The widget must export a class and not an instance of the class (e.g. no new) because it needs to be multiplied for each note, so that splits work correctly.
        • Since the class is exported instead of an instance, the parentWidget getter must be static, otherwise the widget is ignored.
        right-paneIn the Right Sidebar, as a dedicated section.Right pane widget
        • Although not mandatory, it's best to use a RightPanelWidget instead of a BasicWidget or a NoteContextAwareWidget.
        
 
 To position the widget somewhere else, just change the value passed to `get parentWidget()` for legacy widgets or the `parent` field for Preact. Do note that some positions such as `note-detail-pane` and `right-pane` have special requirements that need to be accounted for (see the table above).
 
diff --git a/docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.md b/docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.md
index c892e3365..78a69eb8a 100644
--- a/docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.md	
+++ b/docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.md	
@@ -35,7 +35,7 @@ module.exports = new NoteTitleWidget();
 
 ## Preact widget (v0.101.0+)
 
-```jsx
+```
 import { defineLauncherWidget, useActiveNoteContext } from "trilium:preact";
 
 export default defineLauncherWidget({
diff --git a/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact.md b/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact.md
index 6f05765fc..db3811479 100644
--- a/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact.md	
+++ b/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact.md	
@@ -19,13 +19,13 @@ When using Preact with JSX, there is a special syntax which provides ES-like imp
 
 Instead of:
 
-```jsx
+```
 api.showMessage("Hello");
 ```
 
 the JSX version looks like this:
 
-```jsx
+```
 import { showMessage } from "trilium:api";
 showMessage("hello");
 ```
@@ -34,7 +34,7 @@ showMessage("hello");
 
 There's a new Script API dedicated to Preact, which provides shared components that are also used by Trilium internally as well as hooks, for example.
 
-```jsx
+```
 import { useState } from "trilium:preact";
 const [ myState, setMyState ] = useState("Hi");
 ```
@@ -43,7 +43,7 @@ const [ myState, setMyState ] = useState("Hi");
 
 JSX notes can export a component for use in Render Note or for Component libraries: 
 
-```jsx
+```
 export default function() {
     return (
         <>
diff --git a/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.md b/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.md
index db05c9255..8d3c86e4f 100644
--- a/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.md	
+++ b/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.md	
@@ -5,13 +5,13 @@ Trilium comes with its own set of Preact components, some of which are also avai
 
 To use these components, simply import them from `trilium:preact`:
 
-```jsx
+```
 import { ActionButton, Button, LinkButton } from "trilium:preact";
 ```
 
 and then use them:
 
-```jsx
+```
 export default function MyRenderNote() {
     const onClick = () => showMessage("A button was pressed");
     
diff --git a/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.md b/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.md
index 3b959261f..bda9f195a 100644
--- a/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.md	
+++ b/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.md	
@@ -1,7 +1,7 @@
 # CSS
 ## Inline styles
 
-```jsx
+```