feat(docs): reorganize script notes & document render note

docs/User Guide/User Guide/Advanced Usage/Advanced Showcases.md

@@ -1,5 +1,5 @@
 # Advanced Showcases
-Trilium offers advanced functionality through [Scripts](../Note%20Types/Code/Scripting.md) and [Promoted Attributes](Attributes/Promoted%20Attributes.md). To illustrate these features, we've prepared several showcases available in the [demo notes](Database.md):
+Trilium offers advanced functionality through [Scripts](../Scripting.md) and [Promoted Attributes](Attributes/Promoted%20Attributes.md). To illustrate these features, we've prepared several showcases available in the [demo notes](Database.md):
 
 *   [Relation Map](../Note%20Types/Relation%20Map.md)
 *   [Day Notes](Advanced%20Showcases/Day%20Notes.md)

docs/User Guide/User Guide/Advanced Usage/Advanced Showcases/Task Manager.md

@@ -1,5 +1,5 @@
 # Task Manager
-Task Manager is a [promoted attributes](../Attributes/Promoted%20Attributes.md) and [scripts](../../Note%20Types/Code/Scripting.md)showcase present in the [demo notes](../Database.md).
+Task Manager is a [promoted attributes](../Attributes/Promoted%20Attributes.md) and [scripts](../../Scripting.md)showcase present in the [demo notes](../Database.md).
 
 ## Demo
 
@@ -15,7 +15,7 @@ New tasks are created in the TODO note which has `~child:template` [relation](..
 
 ### Attributes
 
-Task template defines several [promoted attributes](../Attributes/Promoted%20Attributes.md) - todoDate, doneDate, tags, location. Importantly it also defines `~runOnAttributeChange` relation - [event](../../Note%20Types/Code/Events.md) handler which is run on attribute change. This [script](../../Note%20Types/Code/Scripting.md) handles when e.g. we fill out the doneDate attribute - meaning the task is done and should be moved to "Done" note and removed from TODO, locations and tags.
+Task template defines several [promoted attributes](../Attributes/Promoted%20Attributes.md) - todoDate, doneDate, tags, location. Importantly it also defines `~runOnAttributeChange` relation - [event](../../Note%20Types/Code/Events.md) handler which is run on attribute change. This [script](../../Scripting.md) handles when e.g. we fill out the doneDate attribute - meaning the task is done and should be moved to "Done" note and removed from TODO, locations and tags.
 
 ### New task button
 

docs/User Guide/User Guide/Advanced Usage/Advanced Showcases/Weight Tracker.md

@@ -7,7 +7,7 @@ By adding `weight` as a [promoted attribute](../Attributes/Promoted%20Attributes
 
 ## Implementation
 
-The `Weight Tracker` note in the screenshot above is of the type `Render Note`. That type of note doesn't have any useful content itself. Instead it is a placeholder where a [script](../../Note%20Types/Code/Scripting.md) can render its output.
+The `Weight Tracker` note in the screenshot above is of the type `Render Note`. That type of note doesn't have any useful content itself. Instead it is a placeholder where a [script](../../Scripting.md) can render its output.
 
 Scripts for `Render Notes` are defined in a [relation](../Attributes.md) called `~renderNote`. In this example, it's the `Weight Tracker`'s child `Implementation`. The Implementation consists of two [code notes](../../Note%20Types/Code.md) that contain some HTML and JavaScript respectively, which load all the notes with a `weight` attribute and display their values in a chart.
 

docs/User Guide/User Guide/Advanced Usage/Custom Request Handler.md

@@ -1,5 +1,5 @@
 # Custom Request Handler
-Trilium provides a mechanism for [scripts](../Note%20Types/Code/Scripting.md) to open a public REST endpoint. This opens a way for various integrations with other services - a simple example would be creating new note from Slack by issuing a slash command (e.g. `/trilium buy milk`).
+Trilium provides a mechanism for [scripts](../Scripting.md) to open a public REST endpoint. This opens a way for various integrations with other services - a simple example would be creating new note from Slack by issuing a slash command (e.g. `/trilium buy milk`).
 
 ## Create note from outside Trilium
 

docs/User Guide/User Guide/Advanced Usage/Database.md

@@ -3,24 +3,9 @@ Your Trilium data is stored in a [SQLite](https://www.sqlite.org) database which
 
 ## Demo Notes
 
-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:
+When first starting Trilium, it will provide a set of notes to showcase various features of the application.
 
-*   [Relation Map](../Note%20Types/Relation%20Map.md)
+For more information see <a class="reference-link" href="Database/Demo%20Notes.md">Demo Notes</a>.
-*   [Day Notes](Advanced%20Showcases/Day%20Notes.md)
-*   [Weight Tracker](Advanced%20Showcases/Weight%20Tracker.md)
-*   [Task Manager](Advanced%20Showcases/Task%20Manager.md)
-*   [Custom CSS Themes](../Basic%20Concepts%20and%20Features/Themes.md)
-
-### Restoring Demo Notes
-
-There are some cases in which you may want to restore the original demo notes. For example, if you experimented with some of the more advanced features and want to see the original reference, or if you simply want to explore the latest version of the demo notes, which might showcase new features.
-
-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/Notes/raw/develop/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
 
 ## Manually Modifying the Database
 

docs/User Guide/User Guide/Advanced Usage/Database/Demo Notes.md

@@ -0,0 +1,19 @@
+# Demo Notes
+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:
+
+*   <a class="reference-link" href="../../Note%20Types/Relation%20Map.md">Relation Map</a>
+*   <a class="reference-link" href="../Advanced%20Showcases/Day%20Notes.md">Day Notes</a>
+*   <a class="reference-link" href="../Advanced%20Showcases/Weight%20Tracker.md">Weight Tracker</a>
+*   <a class="reference-link" href="../Advanced%20Showcases/Task%20Manager.md">Task Manager</a>
+*   <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/Themes.md">Themes</a>
+
+### Restoring Demo Notes
+
+There are some cases in which you may want to restore the original demo notes. For example, if you experimented with some of the more advanced features and want to see the original reference, or if you simply want to explore the latest version of the demo notes, which might showcase new features.
+
+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/Notes/raw/develop/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

docs/User Guide/User Guide/Advanced Usage/Database/Manually altering the database.md

@@ -7,7 +7,7 @@ If you are doing any advanced development or troubleshooting where you manually
 
 The SQL Console is Trilium's built-in database editor.
 
-See [SQL Console](Manually%20altering%20the%20database/SQL%20Console.md).
+See <a class="reference-link" href="Manually%20altering%20the%20database/SQL%20Console.md">SQL Console</a>.
 
 ## Externally modifying the database
 

docs/User Guide/User Guide/Basic Concepts and Features/Notes.md

@@ -5,7 +5,7 @@ Note is a central entity in Trilium. Main attributes of note are title and conte
 
 The main note type is a rich-text note type called <a class="reference-link" href="../Note%20Types/Text.md">Text</a>. For diagrams and drawing there is <a class="reference-link" href="../Note%20Types/Canvas.md">Canvas</a> and <a class="reference-link" href="../Note%20Types/Mermaid%20Diagrams.md">Mermaid Diagrams</a>.
 
-There are also more complex note types such as <a class="reference-link" href="../Note%20Types/Saved%20Search.md">Saved Search</a>, <a class="reference-link" href="../Note%20Types/Render%20Note.md">Render Note</a> that usually go hand-in-hand with <a class="reference-link" href="../Note%20Types/Code/Scripting.md">Scripting</a>.
+There are also more complex note types such as <a class="reference-link" href="../Note%20Types/Saved%20Search.md">Saved Search</a>, <a class="reference-link" href="../Note%20Types/Render%20Note.md">Render Note</a> that usually go hand-in-hand with <a class="reference-link" href="../Scripting.md">Scripting</a>.
 
 In Trilium there's no specific "folder" note type. Any note can have children and thus be a folder.
 

docs/User Guide/User Guide/Basic Concepts and Features/Notes/Attachments.md

@@ -1,7 +1,7 @@
 # Attachments
 A [note](../Notes.md) in Trilium can _own_ one or more attachments, which can be either images or files. These attachments can be displayed or linked within the note that owns them.
 
-This can be especially useful to include dependencies for your [scripts](../../Note%20Types/Code/Scripting.md). The <a class="reference-link" href="../../Advanced%20Usage/Advanced%20Showcases/Weight%20Tracker.md">Weight Tracker</a> shows how to use [chartjs](https://chartjs.org/) which is attached to the script note.
+This can be especially useful to include dependencies for your [scripts](../../Scripting.md). The <a class="reference-link" href="../../Advanced%20Usage/Advanced%20Showcases/Weight%20Tracker.md">Weight Tracker</a> shows how to use [chartjs](https://chartjs.org/) which is attached to the script note.
 
 Each note exclusively owns its attachments, meaning attachments cannot be shared or linked from one note to another. If an attachment link is copied to a different note, the attachment itself is duplicated, and the copies are managed independently thereafter.
 

docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/Launch Bar.md

@@ -50,13 +50,13 @@ Right click either the _Available launchers_ or _Visible launchers_ sections and
     2.  Optionally, set `hoistedNote` to hoist a particular note. See [Note Hoisting](../Navigation/Note%20Hoisting.md) for more information.
     3.  Optionally, set a `keyboardShortcut` to trigger the launcher.
 2.  **Script Launcher**  
-    An advanced launcher which will run a script upon pressing. See [Scripts](../../Note%20Types/Code/Scripting.md) for more information.
+    An advanced launcher which will run a script upon pressing. See [Scripts](../../Scripting.md) for more information.
     
     1.  Set `script` to point to the desired script to run.
     2.  Optionally, set a `keyboardShortcut` to trigger the launcher.
 3.  **Custom Widget**
     
-    Allows defining a custom widget to be rendered inside the launcher. See [Widget Basics](../../Developer%20Guides/Widget%20Basics.md) for more information.
+    Allows defining a custom widget to be rendered inside the launcher. See [Widget Basics](../../Scripting/Widget%20Basics.md) for more information.
     
 4.  **Spacers**  
     Launchers that create some distance between other launchers for better visual distinction.

docs/User Guide/User Guide/FAQ.md

@@ -17,7 +17,7 @@ Common request is to allow multiple users collaborate, share notes etc. So far I
 
 *   it's a huge feature, or rather a Pandora's box of collaboration features like user management, permissions, conflict resolution, real-time editing of a note by multiple people etc. This would be a huge amount of work. Trilium Notes is project made mostly by one person in free time and that's unlikely to change in the future.
 *   given its size it would probably pivot the attention away from my main focus which is a personal note-taking
-*   the assumption that only single person has access to the app simplifies many things, or just outright makes them possible. In multi-user app, our [scripting](Note%20Types/Code/Scripting.md)support would be a XSS security hole, while with the single user assumption it's an endless customizable tool.
+*   the assumption that only single person has access to the app simplifies many things, or just outright makes them possible. In multi-user app, our [scripting](Scripting.md)support would be a XSS security hole, while with the single user assumption it's an endless customizable tool.
 
 ## How to open multiple documents in one Trilium instance
 

docs/User Guide/User Guide/Installation & Setup/Mobile Frontend.md

@@ -31,4 +31,4 @@ Trilium decides automatically whether to use mobile or desktop frontend. If this
 
 ## Scripting
 
-You can alter the behavior with [scripts](../Note%20Types/Code/Scripting.md) just like for normal frontend. For script notes to be executed, they need to have labeled `#run=mobileStartup`.
+You can alter the behavior with [scripts](../Scripting.md) just like for normal frontend. For script notes to be executed, they need to have labeled `#run=mobileStartup`.

docs/User Guide/User Guide/Note Types.md

@@ -25,4 +25,4 @@ It is possible to change the type of a note after it has been created via the _B
 
 The following note types are supported by Trilium:
 
-<figure class="table" style="width:100%;"><table class="ck-table-resized"><colgroup><col style="width:29.42%;"><col style="width:70.58%;"></colgroup><thead><tr><th>Note Type</th><th>Description</th></tr></thead><tbody><tr><td><a class="reference-link" href="Note%20Types/Text.md">Text</a></td><td>The default note type, which allows for rich text formatting, images, admonitions and right-to-left support.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Code.md">Code</a></td><td>Uses a mono-space font and can be used to store larger chunks of code or plain text than a text note, and has better syntax highlighting.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Saved%20Search.md">Saved Search</a></td><td>Stores the information about a search (the search text, criteria, etc.) for later use. Can be used for quick filtering of a large amount of notes, for example. The search can easily be triggered.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Relation%20Map.md">Relation Map</a></td><td>Allows easy creation of notes and relations between them. Can be used for mainly relational data such as a family tree.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Note%20Map.md">Note Map</a></td><td>Displays the relationships between the notes, whether via relations or their hierarchical structure.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Render%20Note.md">Render Note</a></td><td>Used in&nbsp;<a class="reference-link" href="Note%20Types/Code/Scripting.md">Scripting</a>, it displays the HTML content of another note. This allows displaying any kind of content, provided there is a script behind it to generate it.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Book.md">Book</a></td><td><p>Displays the children of the note either as a grid, a list, or for a more specialized case: a calendar.</p><p>Generally useful for easy reading of short notes.</p></td></tr><tr><td><a class="reference-link" href="Note%20Types/Mermaid%20Diagrams.md">Mermaid Diagrams</a></td><td>Displays diagrams such as bar charts, flow charts, state diagrams, etc. Requires a bit of technical knowledge since the diagrams are written in a specialized format.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Canvas.md">Canvas</a></td><td>Allows easy drawing of sketches, diagrams, handwritten content. Uses the same technology behind <a href="https://excalidraw.com">excalidraw.com</a>.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Web%20View.md">Web View</a></td><td>Displays the content of an external web page, similar to a browser.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Mind%20Map.md">Mind Map</a></td><td>Easy for brainstorming ideas, by placing them in a hierarchical layout.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Geo%20Map.md">Geo Map</a></td><td>Displays the children of the note as a geographical map, one use-case would be to plan vacations. It even has basic support for tracks. Notes can also be created from it.</td></tr><tr><td><a class="reference-link" href="Note%20Types/File.md">File</a></td><td>Represents an uploaded file such as PDFs, images, video or audio files.</td></tr></tbody></table></figure>
+<figure class="table" style="width:100%;"><table class="ck-table-resized"><colgroup><col style="width:29.42%;"><col style="width:70.58%;"></colgroup><thead><tr><th>Note Type</th><th>Description</th></tr></thead><tbody><tr><td><a class="reference-link" href="Note%20Types/Text.md">Text</a></td><td>The default note type, which allows for rich text formatting, images, admonitions and right-to-left support.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Code.md">Code</a></td><td>Uses a mono-space font and can be used to store larger chunks of code or plain text than a text note, and has better syntax highlighting.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Saved%20Search.md">Saved Search</a></td><td>Stores the information about a search (the search text, criteria, etc.) for later use. Can be used for quick filtering of a large amount of notes, for example. The search can easily be triggered.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Relation%20Map.md">Relation Map</a></td><td>Allows easy creation of notes and relations between them. Can be used for mainly relational data such as a family tree.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Note%20Map.md">Note Map</a></td><td>Displays the relationships between the notes, whether via relations or their hierarchical structure.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Render%20Note.md">Render Note</a></td><td>Used in&nbsp;<a class="reference-link" href="Scripting.md">Scripting</a>, it displays the HTML content of another note. This allows displaying any kind of content, provided there is a script behind it to generate it.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Book.md">Book</a></td><td><p>Displays the children of the note either as a grid, a list, or for a more specialized case: a calendar.</p><p>Generally useful for easy reading of short notes.</p></td></tr><tr><td><a class="reference-link" href="Note%20Types/Mermaid%20Diagrams.md">Mermaid Diagrams</a></td><td>Displays diagrams such as bar charts, flow charts, state diagrams, etc. Requires a bit of technical knowledge since the diagrams are written in a specialized format.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Canvas.md">Canvas</a></td><td>Allows easy drawing of sketches, diagrams, handwritten content. Uses the same technology behind <a href="https://excalidraw.com">excalidraw.com</a>.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Web%20View.md">Web View</a></td><td>Displays the content of an external web page, similar to a browser.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Mind%20Map.md">Mind Map</a></td><td>Easy for brainstorming ideas, by placing them in a hierarchical layout.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Geo%20Map.md">Geo Map</a></td><td>Displays the children of the note as a geographical map, one use-case would be to plan vacations. It even has basic support for tracks. Notes can also be created from it.</td></tr><tr><td><a class="reference-link" href="Note%20Types/File.md">File</a></td><td>Represents an uploaded file such as PDFs, images, video or audio files.</td></tr></tbody></table></figure>

docs/User Guide/User Guide/Note Types/Code.md

@@ -5,7 +5,7 @@ This can be useful for a few things:
 
 *   computer programmers can store code snippets as notes with syntax highlighting
 *   JavaScript code notes can be executed inside Trilium for some extra functionality
-    *   we call such JavaScript code notes "scripts" - see [Scripts](Code/Scripting.md)
+    *   we call such JavaScript code notes "scripts" - see <a class="reference-link" href="../Scripting.md">Scripting</a>
 *   JSON, XML etc. can be used as storage for structured data (typically used in conjunction with scripting)
 
 For shorter snippets of code that can be embedded in [Text](Text.md) notes, see [Code blocks](Text/Developer-specific%20formatting/Code%20blocks.md).

docs/User Guide/User Guide/Note Types/Code/Events.md

@@ -1,5 +1,5 @@
 # Events
-[Script](Scripting.md) notes can be triggered by events. Note that these are backend events and thus relation need to point to the "JS backend" code note.
+[Script](../../Scripting.md) notes can be triggered by events. Note that these are backend events and thus relation need to point to the "JS backend" code note.
 
 ## Global events
 

docs/User Guide/User Guide/Note Types/Code/Scripting/New Task launcher button.md

@@ -1,47 +0,0 @@
-# "New Task" launcher button
-In this example we are going to extend the functionality of <a class="reference-link" href="../../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.md">Task Manager</a> showcase (which comes by default with Trilium) by adding a button in the <a class="reference-link" href="../../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.md">Launch Bar</a>  (![](New%20Task%20launcher%20button_i.png)) to create a new task automatically and open it.
-
-## Creating the note
-
-1.  First, create a new <a class="reference-link" href="../../Code.md">Code</a> note type with the _JS frontend_ language.
-2.  Define the `#run=frontendStartup` label in <a class="reference-link" href="../../../Advanced%20Usage/Attributes.md">Attributes</a>.
-
-## Content of the script
-
-Copy-paste the following script:
-
-```javascript
-api.addButtonToToolbar({
-	title: "New task",
-    icon: "task",
-    shortcut: "alt+n",
-    action: async () => {
-    	const taskNoteId = await api.runOnBackend(() => {
-        	const todoRootNote = api.getNoteWithLabel("taskTodoRoot");
-            const resp = api.createTextNote(todoRootNote.noteId, "New task", "")           
-            return resp.note.noteId;
-        });
-        
-        await api.waitUntilSynced();
-        await api.activateNewNote(taskNoteId);
-    }
-});
-```
-
-## Testing the functionality
-
-Since we set the script to be run on start-up, all we need to do is to [refresh the application](../../../Troubleshooting/Refreshing%20the%20application.md).
-
-## Understanding how the script works
-
-<table class="ck-table-resized"><colgroup><col><col></colgroup><tbody><tr><td><pre><code class="language-application-javascript-env-frontend">api.addButtonToToolbar({
-	title: "New task",
-    icon: "task",
-    shortcut: "alt+n",
-    action: async () =&gt; {
-    	// [...]
-    }
-});</code></pre></td><td><p>This uses the <a href="../../../Developer%20Guides/Frontend%20Basics.md">Front-end API</a> to create a icon in the&nbsp;<a class="reference-link" href="../../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.md">Launch Bar</a>, by specifying:</p><ul><li>A title</li><li>A corresponding boxicons icon (without the <code>bx-</code> prefix).</li><li>Optionally, a keyboard shortcut to assign to it.</li><li>The action, which will be executed when the button is pressed.</li></ul></td></tr><tr><td><pre><code class="language-application-javascript-env-frontend">const taskNoteId = await api.runOnBackend(() =&gt; {
-    // Shown below.           
-    return resp.note.noteId;
-});</code></pre></td><td><ul><li>This portion of code is actually executed on the server (backend) and not on the client (i.e. browser).<ul><li>The reason is that the creating notes is the responsibility of the server.</li></ul></li><li>Here we can also see that it is possible to return results from the server execution and read them in the client (<code>taskNoteId</code>).</li></ul></td></tr><tr><td><pre><code class="language-application-javascript-env-frontend">const todoRootNote = api.getNoteWithLabel("taskTodoRoot");</code></pre></td><td><ul><li>Here we identify a note with the <a href="../../../Advanced%20Usage/Attributes.md">label</a> <code>#taskTodoRoot</code>. This is how the&nbsp;<a class="reference-link" href="../../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.md">Task Manager</a>&nbsp;showcase knows where to place all the different tasks.</li><li>Normally this might return a <code>null</code> value if no such note could be identified, but error handling is outside the scope of this example.&nbsp;</li></ul></td></tr><tr><td><pre><code class="language-application-javascript-env-frontend">const resp = api.createTextNote(todoRootNote.noteId, "New task", "")</code></pre></td><td><ul><li>We create a new child note within the to-do root note (first argument) with the title “New task" (second argument) and no content by default (third argument).</li></ul></td></tr><tr><td><pre><code class="language-application-javascript-env-frontend">await api.waitUntilSynced();</code></pre></td><td><ul><li>Back on the client, since we created a new note on the server, we now need to wait for the change to be reflected in the client.</li></ul></td></tr><tr><td><pre><code class="language-application-javascript-env-frontend">await api.activateNewNote(taskNoteId);</code></pre></td><td><ul><li>Since we know the <a href="../../../Advanced%20Usage/Note%20ID.md">ID</a> of the newly created note, all we have to do now is to show this note to the user.</li></ul></td></tr></tbody></table>

docs/User Guide/User Guide/Note Types/Render Note.md

@@ -0,0 +1,39 @@
+# Render Note
+<figure class="image"><img style="aspect-ratio:601/216;" src="Render Note_image.png" width="601" height="216"></figure>
+
+Render Note is used in <a class="reference-link" href="../Scripting.md">Scripting</a>. It works by displaying the HTML of a <a class="reference-link" href="Code.md">Code</a> note, via an attribute.
+
+## Creating a render note
+
+1.  Create a <a class="reference-link" href="Code.md">Code</a> note with the HTML language, with what needs to be displayed (for example `<p>Hello world.</p>`).
+2.  Create a <a class="reference-link" href="Render%20Note.md">Render Note</a>.
+3.  Assign the `renderNote` [relation](../Advanced%20Usage/Attributes.md) to point at the previously created code note.
+
+## Dynamic content
+
+A static HTML is generally not enough for <a class="reference-link" href="../Scripting.md">Scripting</a>. The next step is to automatically change parts of the note using JavaScript.
+
+For a simple example, we are going to create a render note that displays the current date in a field.
+
+To do so, first create an HTML code note with the following content:
+
+```
+<h1>Current date & time</h1>
+The current date & time is <span class="date"></span>
+```
+
+Now we need to add the script. Create another <a class="reference-link" href="Code.md">Code</a>, but this time of JavaScript (frontend) language. Make sure the newly created note is a direct child of the HTML note created previously; with the following content:
+
+```
+const $dateEl = api.$container.find(".date");
+$dateEl.text(new Date());
+```
+
+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**  
+> The current date & time is Sun Apr 06 2025 15:26:29 GMT+0300 (Eastern European Summer Time)
+
+## Examples
+
+*   <a class="reference-link" href="../Advanced%20Usage/Advanced%20Showcases/Weight%20Tracker.md">Weight Tracker</a> which is present in the <a class="reference-link" href="../Advanced%20Usage/Database/Demo%20Notes.md">Demo Notes</a>.

docs/User Guide/User Guide/Scripting.md

@@ -1,5 +1,5 @@
 # Scripting
-Trilium supports creating <a class="reference-link" href="../Code.md">Code</a> notes, i.e. notes which allow you to store some programming code and highlight it. Special case is JavaScript code notes which can also be executed inside Trilium which can in conjunction with <a class="reference-link" href="Script%20API.md">Script API</a> provide extra functionality.
+Trilium supports creating <a class="reference-link" href="Note%20Types/Code.md">Code</a> notes, i.e. notes which allow you to store some programming code and highlight it. Special case is JavaScript code notes which can also be executed inside Trilium which can in conjunction with <a class="reference-link" href="Note%20Types/Code/Script%20API.md">Script API</a> provide extra functionality.
 
 ## Scripting
 
@@ -12,7 +12,7 @@ So we have frontend and backend, each with their own set of responsibilities, bu
 
 ## Use cases
 
-*   <a class="reference-link" href="Scripting/New%20Task%20launcher%20button.md">"New Task" launcher button</a>
+*   <a class="reference-link" href="Scripting/Examples/New%20Task%20launcher%20button.md">"New Task" launcher button</a>
 
 ## Action handler
 
@@ -24,18 +24,18 @@ So we have a script which will add the button to the toolbar. But how can we exe
 
 We need to execute it every time Trilium starts up, but we probably don't want to have to manually click on play button on every start up.
 
-The solution is marked by red circle at the bottom - this note has [label](../../Advanced%20Usage/Attributes.md) `#run=frontendStartup` - this is one of the "system" labels which Trilium understands. As you might guess, this will cause all such labeled script notes to be executed once Trilium frontend starts up.
+The solution is marked by red circle at the bottom - this note has [label](Advanced%20Usage/Attributes.md) `#run=frontendStartup` - this is one of the "system" labels which Trilium understands. As you might guess, this will cause all such labeled script notes to be executed once Trilium frontend starts up.
 
-(`#run=frontendStartup` does not work for [Mobile frontend](../../Installation%20%26%20Setup/Mobile%20Frontend.md) - if you want to have scripts running there, give the script `#run=mobileStartup` label)
+(`#run=frontendStartup` does not work for [Mobile frontend](Installation%20%26%20Setup/Mobile%20Frontend.md) - if you want to have scripts running there, give the script `#run=mobileStartup` label)
 
 ## More showcases
 
-You can see more scripting with explanation in <a class="reference-link" href="../../Advanced%20Usage/Advanced%20Showcases.md">Advanced Showcases</a>.
+You can see more scripting with explanation in <a class="reference-link" href="Advanced%20Usage/Advanced%20Showcases.md">Advanced Showcases</a>.
 
 ## Events
 
-See <a class="reference-link" href="Events.md">Events</a>.
+See <a class="reference-link" href="Note%20Types/Code/Events.md">Events</a>.
 
 ## Script API
 
-See <a class="reference-link" href="Script%20API.md">Script API</a>.
+See <a class="reference-link" href="Note%20Types/Code/Script%20API.md">Script API</a>.

docs/User Guide/User Guide/Scripting/Examples/New Task launcher button.md

@@ -0,0 +1,47 @@
+# "New Task" launcher button
+In this example we are going to extend the functionality of <a class="reference-link" href="../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.md">Task Manager</a> showcase (which comes by default with Trilium) by adding a button in the <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.md">Launch Bar</a>  (![](New%20Task%20launcher%20button_i.png)) to create a new task automatically and open it.
+
+## Creating the note
+
+1.  First, create a new <a class="reference-link" href="../../Note%20Types/Code.md">Code</a> note type with the _JS frontend_ language.
+2.  Define the `#run=frontendStartup` label in <a class="reference-link" href="../../Advanced%20Usage/Attributes.md">Attributes</a>.
+
+## Content of the script
+
+Copy-paste the following script:
+
+```javascript
+api.addButtonToToolbar({
+	title: "New task",
+    icon: "task",
+    shortcut: "alt+n",
+    action: async () => {
+    	const taskNoteId = await api.runOnBackend(() => {
+        	const todoRootNote = api.getNoteWithLabel("taskTodoRoot");
+            const resp = api.createTextNote(todoRootNote.noteId, "New task", "")           
+            return resp.note.noteId;
+        });
+        
+        await api.waitUntilSynced();
+        await api.activateNewNote(taskNoteId);
+    }
+});
+```
+
+## Testing the functionality
+
+Since we set the script to be run on start-up, all we need to do is to [refresh the application](../../Troubleshooting/Refreshing%20the%20application.md).
+
+## Understanding how the script works
+
+<table class="ck-table-resized"><colgroup><col><col></colgroup><tbody><tr><td><pre><code class="language-application-javascript-env-frontend">api.addButtonToToolbar({
+	title: "New task",
+    icon: "task",
+    shortcut: "alt+n",
+    action: async () =&gt; {
+    	// [...]
+    }
+});</code></pre></td><td><p>This uses the <a href="../Frontend%20Basics.md">Front-end API</a> to create a icon in the&nbsp;<a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.md">Launch Bar</a>, by specifying:</p><ul><li>A title</li><li>A corresponding boxicons icon (without the <code>bx-</code> prefix).</li><li>Optionally, a keyboard shortcut to assign to it.</li><li>The action, which will be executed when the button is pressed.</li></ul></td></tr><tr><td><pre><code class="language-application-javascript-env-frontend">const taskNoteId = await api.runOnBackend(() =&gt; {
+    // Shown below.           
+    return resp.note.noteId;
+});</code></pre></td><td><ul><li>This portion of code is actually executed on the server (backend) and not on the client (i.e. browser).<ul><li>The reason is that the creating notes is the responsibility of the server.</li></ul></li><li>Here we can also see that it is possible to return results from the server execution and read them in the client (<code>taskNoteId</code>).</li></ul></td></tr><tr><td><pre><code class="language-application-javascript-env-frontend">const todoRootNote = api.getNoteWithLabel("taskTodoRoot");</code></pre></td><td><ul><li>Here we identify a note with the <a href="../../Advanced%20Usage/Attributes.md">label</a> <code>#taskTodoRoot</code>. This is how the&nbsp;<a class="reference-link" href="../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.md">Task Manager</a>&nbsp;showcase knows where to place all the different tasks.</li><li>Normally this might return a <code>null</code> value if no such note could be identified, but error handling is outside the scope of this example.&nbsp;</li></ul></td></tr><tr><td><pre><code class="language-application-javascript-env-frontend">const resp = api.createTextNote(todoRootNote.noteId, "New task", "")</code></pre></td><td><ul><li>We create a new child note within the to-do root note (first argument) with the title “New task" (second argument) and no content by default (third argument).</li></ul></td></tr><tr><td><pre><code class="language-application-javascript-env-frontend">await api.waitUntilSynced();</code></pre></td><td><ul><li>Back on the client, since we created a new note on the server, we now need to wait for the change to be reflected in the client.</li></ul></td></tr><tr><td><pre><code class="language-application-javascript-env-frontend">await api.activateNewNote(taskNoteId);</code></pre></td><td><ul><li>Since we know the <a href="../../Advanced%20Usage/Note%20ID.md">ID</a> of the newly created note, all we have to do now is to show this note to the user.</li></ul></td></tr></tbody></table>

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Advanced Showcases.html

@@ -13,7 +13,7 @@
        <h1 data-trilium-h1>Advanced Showcases</h1>
 
       <div class="ck-content">
-        <p>Trilium offers advanced functionality through <a href="../Note%20Types/Code/Scripting.html">Scripts</a> and
+        <p>Trilium offers advanced functionality through <a href="../Scripting.html">Scripts</a> and
           <a
           href="Attributes/Promoted%20Attributes.html">Promoted Attributes</a>. To illustrate these features, we've prepared
             several showcases available in the <a href="Database.html">demo notes</a>:</p>

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Advanced Showcases/Task Manager.html

@@ -15,7 +15,7 @@
       <div class="ck-content">
         <p>Task Manager is a <a href="../Attributes/Promoted%20Attributes.html">promoted attributes</a> and
           <a
-          href="../../Note%20Types/Code/Scripting.html">scripts</a>showcase present in the <a href="../Database.html">demo notes</a>.</p>
+          href="../../Scripting.html">scripts</a>showcase present in the <a href="../Database.html">demo notes</a>.</p>
         <h2>Demo</h2>
         <p>
           <img src="../../Attachments/task-manager.png">
@@ -37,7 +37,7 @@
         <p>Task template defines several <a href="../Attributes/Promoted%20Attributes.html">promoted attributes</a> -
           todoDate, doneDate, tags, location. Importantly it also defines <code>~runOnAttributeChange</code> relation
           - <a href="../../Note%20Types/Code/Events.html">event</a> handler which is
-          run on attribute change. This <a href="../../Note%20Types/Code/Scripting.html">script</a> handles
+          run on attribute change. This <a href="../../Scripting.html">script</a> handles
           when e.g. we fill out the doneDate attribute - meaning the task is done
           and should be moved to "Done" note and removed from TODO, locations and
           tags.</p>

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Advanced Showcases/Weight Tracker.html

@@ -24,8 +24,8 @@
         <h2>Implementation</h2>
         <p>The <code>Weight Tracker</code> note in the screenshot above is of the type <code>Render Note</code>.
           That type of note doesn't have any useful content itself. Instead it is
-          a placeholder where a <a href="../../Note%20Types/Code/Scripting.html">script</a> can
+          a placeholder where a <a href="../../Scripting.html">script</a> can render
-          render its output.</p>
+          its output.</p>
         <p>Scripts for <code>Render Notes</code> are defined in a <a href="../Attributes.html">relation</a> called <code>~renderNote</code>.
           In this example, it's the <code>Weight Tracker</code>'s child <code>Implementation</code>.
           The Implementation consists of two <a href="../../Note%20Types/Code.html">code notes</a> that

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Custom Request Handler.html

@@ -13,7 +13,7 @@
        <h1 data-trilium-h1>Custom Request Handler</h1>
 
       <div class="ck-content">
-        <p>Trilium provides a mechanism for <a href="../Note%20Types/Code/Scripting.html">scripts</a> to
+        <p>Trilium provides a mechanism for <a href="../Scripting.html">scripts</a> to
           open a public REST endpoint. This opens a way for various integrations
           with other services - a simple example would be creating new note from
           Slack by issuing a slash command (e.g. <code>/trilium buy milk</code>).</p>

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Database.html

@@ -18,36 +18,9 @@
           The database file is named <code>document.db</code> and is stored in the
           application's default&nbsp;<a href="../Installation%20%26%20Setup/Data%20directory.html">Data directory</a>.</p>
         <h2>Demo Notes</h2>
-        <p>When you run Trilium for the first time, it will generate a new database
+        <p>When first starting Trilium, it will provide a set of notes to showcase
-          containing demo notes. These notes showcase its many features, such as:</p>
+          various features of the application.</p>
-        <ul>
+        <p>For more information see&nbsp;<a class="reference-link" href="Database/Demo%20Notes.html">Demo Notes</a>.</p>
-          <li><a href="../Note%20Types/Relation%20Map.html">Relation Map</a>
-          </li>
-          <li><a href="Advanced%20Showcases/Day%20Notes.html">Day Notes</a>
-          </li>
-          <li><a href="Advanced%20Showcases/Weight%20Tracker.html">Weight Tracker</a>
-          </li>
-          <li><a href="Advanced%20Showcases/Task%20Manager.html">Task Manager</a>
-          </li>
-          <li><a href="../Basic%20Concepts%20and%20Features/Themes.html">Custom CSS Themes</a>
-          </li>
-        </ul>
-        <h3>Restoring Demo Notes</h3>
-        <p>There are some cases in which you may want to restore the original demo
-          notes. For example, if you experimented with some of the more advanced
-          features and want to see the original reference, or if you simply want
-          to explore the latest version of the demo notes, which might showcase new
-          features.</p>
-        <p>You can easily restore the demo notes by using Trilium's built-in import
-          feature by importing them:</p>
-        <ul>
-          <li>Download <a href="https://github.com/TriliumNext/Notes/raw/develop/db/demo.zip">this .zip archive</a> with
-            the latest version of the demo notes</li>
-          <li>Right click on any note in your tree under which you would like the demo
-            notes to be imported</li>
-          <li>Click "Import into note"</li>
-          <li>Select the .zip archive to import it</li>
-        </ul>
         <h2>Manually Modifying the Database</h2>
         <p>Trilium provides a lot of flexibility, and with it, opportunities for
           advanced users to tweak it. If you need to explore or modify the database

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Database/Demo Notes.html

@@ -0,0 +1,50 @@
+<html>
+  
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../style.css">
+    <base target="_parent">
+    <title data-trilium-title>Demo Notes</title>
+  </head>
+  
+  <body>
+    <div class="content">
+       <h1 data-trilium-h1>Demo Notes</h1>
+
+      <div class="ck-content">
+        <p>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:</p>
+        <ul>
+          <li><a class="reference-link" href="../../Note%20Types/Relation%20Map.html">Relation Map</a>
+          </li>
+          <li><a class="reference-link" href="../Advanced%20Showcases/Day%20Notes.html">Day Notes</a>
+          </li>
+          <li><a class="reference-link" href="../Advanced%20Showcases/Weight%20Tracker.html">Weight Tracker</a>
+          </li>
+          <li><a class="reference-link" href="../Advanced%20Showcases/Task%20Manager.html">Task Manager</a>
+          </li>
+          <li><a class="reference-link" href="../../Basic%20Concepts%20and%20Features/Themes.html">Themes</a>
+          </li>
+        </ul>
+        <h3>Restoring Demo Notes</h3>
+        <p>There are some cases in which you may want to restore the original demo
+          notes. For example, if you experimented with some of the more advanced
+          features and want to see the original reference, or if you simply want
+          to explore the latest version of the demo notes, which might showcase new
+          features.</p>
+        <p>You can easily restore the demo notes by using Trilium's built-in import
+          feature by importing them:</p>
+        <ul>
+          <li>Download <a href="https://github.com/TriliumNext/Notes/raw/develop/db/demo.zip">this .zip archive</a> with
+            the latest version of the demo notes</li>
+          <li>Right click on any note in your tree under which you would like the demo
+            notes to be imported</li>
+          <li>Click "Import into note"</li>
+          <li>Select the .zip archive to import it</li>
+        </ul>
+      </div>
+    </div>
+  </body>
+
+</html>

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Database/Manually altering the database.html

@@ -20,7 +20,7 @@
           of your <code>document.db</code> file.</p>
         <h2>Modifying it internally using the SQL Console</h2>
         <p>The SQL Console is Trilium's built-in database editor.</p>
-        <p>See&nbsp;<a href="Manually%20altering%20the%20database/SQL%20Console.html">SQL Console</a>.</p>
+        <p>See&nbsp;<a class="reference-link" href="Manually%20altering%20the%20database/SQL%20Console.html">SQL Console</a>.</p>
         <h2>Externally modifying the database</h2>
         <p>Sometimes the SQL Console cannot be used (for example if the application
           cannot start).</p>

src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes.html

@@ -24,7 +24,7 @@
         <p>There are also more complex note types such as&nbsp;<a class="reference-link"
           href="../Note%20Types/Saved%20Search.html">Saved Search</a>,&nbsp;<a class="reference-link"
           href="../Note%20Types/Render%20Note.html">Render Note</a>&nbsp;that usually
-          go hand-in-hand with&nbsp;<a class="reference-link" href="../Note%20Types/Code/Scripting.html">Scripting</a>.</p>
+          go hand-in-hand with&nbsp;<a class="reference-link" href="../Scripting.html">Scripting</a>.</p>
         <p>In Trilium there's no specific "folder" note type. Any note can have children
           and thus be a folder.</p>
         <h3>Root note</h3>

src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Attachments.html

@@ -16,7 +16,7 @@
         <p>A <a href="../Notes.html">note</a> in Trilium can <em>own</em> one or more
           attachments, which can be either images or files. These attachments can
           be displayed or linked within the note that owns them.</p>
-        <p>This can be especially useful to include dependencies for your <a href="../../Note%20Types/Code/Scripting.html">scripts</a>.
+        <p>This can be especially useful to include dependencies for your <a href="../../Scripting.html">scripts</a>.
           The&nbsp;<a class="reference-link" href="../../Advanced%20Usage/Advanced%20Showcases/Weight%20Tracker.html">Weight Tracker</a>&nbsp;shows
           how to use <a href="https://chartjs.org/">chartjs</a> which is attached to
           the script note.</p>

src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Launch Bar.html

@@ -84,7 +84,7 @@
             <p><strong>Script Launcher</strong>
               <br>An advanced launcher which will run a script upon pressing. See&nbsp;
               <a
-              href="../../Note%20Types/Code/Scripting.html">Scripts</a>&nbsp;for more information.</p>
+              href="../../Scripting.html">Scripts</a>&nbsp;for more information.</p>
             <ol>
               <li>Set <code>script</code> to point to the desired script to run.</li>
               <li>Optionally, set a <code>keyboardShortcut</code> to trigger the launcher.</li>
@@ -95,7 +95,7 @@
             </p>
             <p>Allows defining a custom widget to be rendered inside the launcher. See&nbsp;
               <a
-              href="../../Developer%20Guides/Widget%20Basics.html">Widget Basics</a>&nbsp;for more information.</p>
+              href="../../Scripting/Widget%20Basics.html">Widget Basics</a>&nbsp;for more information.</p>
           </li>
           <li>
             <p><strong>Spacers</strong>

src/public/app/doc_notes/en/User Guide/User Guide/FAQ.html

@@ -36,7 +36,7 @@
           <li>the assumption that only single person has access to the app simplifies
             many things, or just outright makes them possible. In multi-user app, our
             <a
-            href="Note%20Types/Code/Scripting.html">scripting</a>support would be a XSS security hole, while with the single
+            href="Scripting.html">scripting</a>support would be a XSS security hole, while with the single
               user assumption it's an endless customizable tool.</li>
         </ul>
         <h2>How to open multiple documents in one Trilium instance</h2>

src/public/app/doc_notes/en/User Guide/User Guide/Installation & Setup/Mobile Frontend.html

@@ -47,7 +47,7 @@
           If this is not appropriate, you can use <code>?mobile</code> or <code>?desktop</code> query
           param on <strong>login</strong> page (Note: you might need to log out).</p>
         <h2>Scripting</h2>
-        <p>You can alter the behavior with <a href="../Note%20Types/Code/Scripting.html">scripts</a> just
+        <p>You can alter the behavior with <a href="../Scripting.html">scripts</a> just
           like for normal frontend. For script notes to be executed, they need to
           have labeled <code>#run=mobileStartup</code>.</p>
       </div>

src/public/app/doc_notes/en/User Guide/User Guide/Note Types.html

@@ -94,7 +94,7 @@
               <tr>
                 <td><a class="reference-link" href="Note%20Types/Render%20Note.html">Render Note</a>
                 </td>
-                <td>Used in&nbsp;<a class="reference-link" href="Note%20Types/Code/Scripting.html">Scripting</a>,
+                <td>Used in&nbsp;<a class="reference-link" href="Scripting.html">Scripting</a>,
                   it displays the HTML content of another note. This allows displaying any
                   kind of content, provided there is a script behind it to generate it.</td>
               </tr>

src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Code.html

@@ -21,7 +21,8 @@
           <li>computer programmers can store code snippets as notes with syntax highlighting</li>
           <li>JavaScript code notes can be executed inside Trilium for some extra functionality
             <ul>
-              <li>we call such JavaScript code notes "scripts" - see <a href="Code/Scripting.html">Scripts</a>
+              <li>we call such JavaScript code notes "scripts" - see&nbsp;<a class="reference-link"
+                href="../Scripting.html">Scripting</a>
               </li>
             </ul>
           </li>

src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Code/Events.html

@@ -13,9 +13,9 @@
        <h1 data-trilium-h1>Events</h1>
 
       <div class="ck-content">
-        <p><a href="Scripting.html">Script</a> notes can be triggered by events. Note
+        <p><a href="../../Scripting.html">Script</a> notes can be triggered by events.
-          that these are backend events and thus relation need to point to the "JS
+          Note that these are backend events and thus relation need to point to the
-          backend" code note.</p>
+          "JS backend" code note.</p>
         <h2>Global events</h2>
         <p>Global events are attached to the script note via label. Simply create
           e.g. "run" label with some of these values and script note will be executed

src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Render Note.html

@@ -12,7 +12,48 @@
     <div class="content">
        <h1 data-trilium-h1>Render Note</h1>
 
-      <div class="ck-content"></div>
+      <div class="ck-content">
+        <figure class="image">
+          <img style="aspect-ratio:601/216;" src="Render Note_image.png" width="601"
+          height="216">
+        </figure>
+        <p>Render Note is used in&nbsp;<a class="reference-link" href="../Scripting.html">Scripting</a>.
+          It works by displaying the HTML of a&nbsp;<a class="reference-link" href="Code.html">Code</a>&nbsp;note,
+          via an attribute.</p>
+        <h2>Creating a render note</h2>
+        <ol>
+          <li>Create a&nbsp;<a class="reference-link" href="Code.html">Code</a>&nbsp;note
+            with the HTML language, with what needs to be displayed (for example <code>&lt;p&gt;Hello world.&lt;/p&gt;</code>).</li>
+          <li>Create a&nbsp;<a class="reference-link" href="Render%20Note.html">Render Note</a>.</li>
+          <li>Assign the <code>renderNote</code>  <a href="../Advanced%20Usage/Attributes.html">relation</a> to
+            point at the previously created code note.</li>
+        </ol>
+        <h2>Dynamic content</h2>
+        <p>A static HTML is generally not enough for&nbsp;<a class="reference-link"
+          href="../Scripting.html">Scripting</a>. The next step is to automatically
+          change parts of the note using JavaScript.</p>
+        <p>For a simple example, we are going to create a render note that displays
+          the current date in a field.</p>
+        <p>To do so, first create an HTML code note with the following content:</p><pre><code class="language-text-x-trilium-auto">&lt;h1&gt;Current date &amp; time&lt;/h1&gt;
+The current date &amp; time is &lt;span class="date"&gt;&lt;/span&gt;</code></pre>
+        <p>Now we need to add the script. Create another&nbsp;<a class="reference-link"
+          href="Code.html">Code</a>, but this time of JavaScript (frontend) language.
+          Make sure the newly created note is a direct child of the HTML note created
+          previously; with the following content:</p><pre><code class="language-text-x-trilium-auto">const $dateEl = api.$container.find(".date");
+$dateEl.text(new Date());</code></pre>
+        <p>Now create a render note at any place and set its <code>~renderNote</code> relation
+          to point to the HTML note. When the render note is accessed it will display:</p>
+        <blockquote>
+          <p><strong>Current date &amp; time</strong>
+            <br>The current date &amp; time is Sun Apr 06 2025 15:26:29 GMT+0300 (Eastern
+            European Summer Time)</p>
+        </blockquote>
+        <h2>Examples</h2>
+        <ul>
+          <li><a class="reference-link" href="../Advanced%20Usage/Advanced%20Showcases/Weight%20Tracker.html">Weight Tracker</a>&nbsp;which
+            is present in the&nbsp;<a class="reference-link" href="../Advanced%20Usage/Database/Demo%20Notes.html">Demo Notes</a>.</li>
+        </ul>
+      </div>
     </div>
   </body>
 

src/public/app/doc_notes/en/User Guide/User Guide/Scripting.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="../../../style.css">
+    <link rel="stylesheet" href="../style.css">
     <base target="_parent">
     <title data-trilium-title>Scripting</title>
   </head>
@@ -13,10 +13,10 @@
        <h1 data-trilium-h1>Scripting</h1>
 
       <div class="ck-content">
-        <p>Trilium supports creating&nbsp;<a class="reference-link" href="../Code.html">Code</a>&nbsp;notes,
+        <p>Trilium supports creating&nbsp;<a class="reference-link" href="Note%20Types/Code.html">Code</a>&nbsp;notes,
           i.e. notes which allow you to store some programming code and highlight
           it. Special case is JavaScript code notes which can also be executed inside
-          Trilium which can in conjunction with&nbsp;<a class="reference-link" href="Script%20API.html">Script API</a>&nbsp;provide
+          Trilium which can in conjunction with&nbsp;<a class="reference-link" href="Note%20Types/Code/Script%20API.html">Script API</a>&nbsp;provide
           extra functionality.</p>
         <h2>Scripting</h2>
         <p>To go further I must explain basic architecture of Trilium - in its essence
@@ -33,7 +33,7 @@
           we're onto something.</p>
         <h2>Use cases</h2>
         <ul>
-          <li><a class="reference-link" href="Scripting/New%20Task%20launcher%20button.html">"New Task" launcher button</a>
+          <li><a class="reference-link" href="Scripting/Examples/New%20Task%20launcher%20button.html">"New Task" launcher button</a>
           </li>
         </ul>
         <h2>Action handler</h2>
@@ -48,19 +48,19 @@
           by Trilium runtime so when we restart Trilium, button won't be there.</p>
         <p>We need to execute it every time Trilium starts up, but we probably don't
           want to have to manually click on play button on every start up.</p>
-        <p>The solution is marked by red circle at the bottom - this note has <a href="../../Advanced%20Usage/Attributes.html">label</a>  <code>#run=frontendStartup</code> -
+        <p>The solution is marked by red circle at the bottom - this note has <a href="Advanced%20Usage/Attributes.html">label</a>  <code>#run=frontendStartup</code> -
           this is one of the "system" labels which Trilium understands. As you might
           guess, this will cause all such labeled script notes to be executed once
           Trilium frontend starts up.</p>
-        <p>(<code>#run=frontendStartup</code> does not work for <a href="../../Installation%20%26%20Setup/Mobile%20Frontend.html">Mobile frontend</a> -
+        <p>(<code>#run=frontendStartup</code> does not work for <a href="Installation%20%26%20Setup/Mobile%20Frontend.html">Mobile frontend</a> -
           if you want to have scripts running there, give the script <code>#run=mobileStartup</code> label)</p>
         <h2>More showcases</h2>
         <p>You can see more scripting with explanation in&nbsp;<a class="reference-link"
-          href="../../Advanced%20Usage/Advanced%20Showcases.html">Advanced Showcases</a>.</p>
+          href="Advanced%20Usage/Advanced%20Showcases.html">Advanced Showcases</a>.</p>
         <h2>Events</h2>
-        <p>See&nbsp;<a class="reference-link" href="Events.html">Events</a>.</p>
+        <p>See&nbsp;<a class="reference-link" href="Note%20Types/Code/Events.html">Events</a>.</p>
         <h2>Script API</h2>
-        <p>See&nbsp;<a class="reference-link" href="Script%20API.html">Script API</a>.</p>
+        <p>See&nbsp;<a class="reference-link" href="Note%20Types/Code/Script%20API.html">Script API</a>.</p>
       </div>
     </div>
   </body>

src/public/app/doc_notes/en/User Guide/User Guide/Scripting/Examples/New Task launcher button.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="../../../../style.css">
+    <link rel="stylesheet" href="../../../style.css">
     <base target="_parent">
     <title data-trilium-title>&quot;New Task&quot; launcher button</title>
   </head>
@@ -14,17 +14,17 @@
 
       <div class="ck-content">
         <p>In this example we are going to extend the functionality of&nbsp;<a class="reference-link"
-          href="../../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.html">Task Manager</a>&nbsp;showcase
+          href="../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.html">Task Manager</a>&nbsp;showcase
           (which comes by default with Trilium) by adding a button in the&nbsp;
           <a
-          class="reference-link" href="../../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.html">Launch Bar</a>&nbsp; (
+          class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.html">Launch Bar</a>&nbsp; (
             <img src="New Task launcher button_i.png">) to create a new task automatically and open it.</p>
         <h2>Creating the note</h2>
         <ol>
-          <li>First, create a new&nbsp;<a class="reference-link" href="../../Code.html">Code</a>&nbsp;note
+          <li>First, create a new&nbsp;<a class="reference-link" href="../../Note%20Types/Code.html">Code</a>&nbsp;note
             type with the <em>JS frontend</em> language.</li>
           <li>Define the <code>#run=frontendStartup</code> label in&nbsp;<a class="reference-link"
-            href="../../../Advanced%20Usage/Attributes.html">Attributes</a>.</li>
+            href="../../Advanced%20Usage/Attributes.html">Attributes</a>.</li>
         </ol>
         <h2>Content of the script</h2>
         <p>Copy-paste the following script:</p><pre><code class="language-application-javascript-env-backend">api.addButtonToToolbar({
@@ -45,7 +45,7 @@
         <h2>Testing the functionality</h2>
         <p>Since we set the script to be run on start-up, all we need to do is to
           <a
-          href="../../../Troubleshooting/Refreshing%20the%20application.html">refresh the application</a>.</p>
+          href="../../Troubleshooting/Refreshing%20the%20application.html">refresh the application</a>.</p>
         <h2>Understanding how the script works</h2>
         <table class="ck-table-resized">
           <colgroup>
@@ -64,8 +64,8 @@
 });</code></pre>
               </td>
               <td>
-                <p>This uses the <a href="../../../Developer%20Guides/Frontend%20Basics.html">Front-end API</a> to
+                <p>This uses the <a href="../Frontend%20Basics.html">Front-end API</a> to create
-                  create a icon in the&nbsp;<a class="reference-link" href="../../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.html">Launch Bar</a>,
+                  a icon in the&nbsp;<a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.html">Launch Bar</a>,
                   by specifying:</p>
                 <ul>
                   <li>A title</li>
@@ -99,8 +99,8 @@
               </td>
               <td>
                 <ul>
-                  <li>Here we identify a note with the <a href="../../../Advanced%20Usage/Attributes.html">label</a>  <code>#taskTodoRoot</code>.
+                  <li>Here we identify a note with the <a href="../../Advanced%20Usage/Attributes.html">label</a>  <code>#taskTodoRoot</code>.
-                    This is how the&nbsp;<a class="reference-link" href="../../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.html">Task Manager</a>&nbsp;showcase
+                    This is how the&nbsp;<a class="reference-link" href="../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.html">Task Manager</a>&nbsp;showcase
                     knows where to place all the different tasks.</li>
                   <li>Normally this might return a <code>null</code> value if no such note could
                     be identified, but error handling is outside the scope of this example.&nbsp;</li>
@@ -133,7 +133,7 @@
               </td>
               <td>
                 <ul>
-                  <li>Since we know the <a href="../../../Advanced%20Usage/Note%20ID.html">ID</a> of
+                  <li>Since we know the <a href="../../Advanced%20Usage/Note%20ID.html">ID</a> of
                     the newly created note, all we have to do now is to show this note to the
                     user.</li>
                 </ul>

src/public/app/doc_notes/en/User Guide/navigation.html

@@ -246,13 +246,6 @@
               </li>
               <li><a href="User%20Guide/Note%20Types/Code.html" target="detail">Code</a>
                 <ul>
-                  <li><a href="User%20Guide/Note%20Types/Code/Scripting.html" target="detail">Scripting</a>
-                    <ul>
-                      <li><a href="User%20Guide/Note%20Types/Code/Scripting/New%20Task%20launcher%20button.html"
-                        target="detail">&quot;New Task&quot; launcher button</a>
-                      </li>
-                    </ul>
-                  </li>
                   <li><a href="User%20Guide/Note%20Types/Code/Script%20API.html" target="detail">Script API</a>
                   </li>
                   <li><a href="User%20Guide/Note%20Types/Code/Events.html" target="detail">Events</a>
@@ -321,42 +314,6 @@
               </li>
             </ul>
           </li>
-          <li>Developer Guides
-            <ul>
-              <li><a href="User%20Guide/Developer%20Guides/Frontend%20Basics.html" target="detail">Frontend Basics</a>
-              </li>
-              <li><a href="User%20Guide/Developer%20Guides/Widget%20Basics.html" target="detail">Widget Basics</a>
-              </li>
-              <li>Examples
-                <ul>
-                  <li><a href="User%20Guide/Developer%20Guides/Examples/Downloading%20responses%20from%20Goo.html"
-                    target="detail">Downloading responses from Google Forms</a>
-                  </li>
-                  <li><a href="User%20Guide/Developer%20Guides/Examples/Using%20promoted%20attributes%20to%20c.html"
-                    target="detail">Using promoted attributes to configure scripts</a>
-                  </li>
-                </ul>
-              </li>
-              <li>REST API
-                <ul>
-                  <li>ETAPI
-                    <ul>
-                      <li><a href="User%20Guide/Developer%20Guides/REST%20API/ETAPI/API%20Reference.dat"
-                        target="detail">API Reference</a>
-                      </li>
-                    </ul>
-                  </li>
-                  <li>Internal API
-                    <ul>
-                      <li><a href="User%20Guide/Developer%20Guides/REST%20API/Internal%20API/API%20Reference.dat"
-                        target="detail">API Reference</a>
-                      </li>
-                    </ul>
-                  </li>
-                </ul>
-              </li>
-            </ul>
-          </li>
           <li>Advanced Usage
             <ul>
               <li><a href="User%20Guide/Advanced%20Usage/Attributes.html" target="detail">Attributes</a>
@@ -401,6 +358,11 @@
                 target="detail">Custom Resource Providers</a>
               </li>
               <li><a href="User%20Guide/Advanced%20Usage/ETAPI%20(REST%20API).html" target="detail">ETAPI (REST API)</a>
+                <ul>
+                  <li><a href="User%20Guide/Advanced%20Usage/ETAPI%20(REST%20API)/API%20Reference.dat"
+                    target="detail">API Reference</a>
+                  </li>
+                </ul>
               </li>
               <li><a href="User%20Guide/Advanced%20Usage/Default%20Note%20Title.html" target="detail">Default Note Title</a>
               </li>
@@ -414,6 +376,8 @@
                       </li>
                     </ul>
                   </li>
+                  <li><a href="User%20Guide/Advanced%20Usage/Database/Demo%20Notes.html" target="detail">Demo Notes</a>
+                  </li>
                 </ul>
               </li>
               <li><a href="User%20Guide/Advanced%20Usage/Configuration%20(config.ini%20or%20e.html"
@@ -441,6 +405,34 @@
               </li>
               <li><a href="User%20Guide/Advanced%20Usage/Note%20ID.html" target="detail">Note ID</a>
               </li>
+              <li>Internal API
+                <ul>
+                  <li><a href="User%20Guide/Advanced%20Usage/Internal%20API/API%20Reference.dat"
+                    target="detail">API Reference</a>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+          <li><a href="User%20Guide/Scripting.html" target="detail">Scripting</a>
+            <ul>
+              <li><a href="User%20Guide/Scripting/Frontend%20Basics.html" target="detail">Frontend Basics</a>
+              </li>
+              <li><a href="User%20Guide/Scripting/Widget%20Basics.html" target="detail">Widget Basics</a>
+              </li>
+              <li>Examples
+                <ul>
+                  <li><a href="User%20Guide/Scripting/Examples/New%20Task%20launcher%20button.html"
+                    target="detail">&quot;New Task&quot; launcher button</a>
+                  </li>
+                  <li><a href="User%20Guide/Scripting/Examples/Downloading%20responses%20from%20Goo.html"
+                    target="detail">Downloading responses from Google Forms</a>
+                  </li>
+                  <li><a href="User%20Guide/Scripting/Examples/Using%20promoted%20attributes%20to%20c.html"
+                    target="detail">Using promoted attributes to configure scripts</a>
+                  </li>
+                </ul>
+              </li>
             </ul>
           </li>
           <li>Attachments