Render Note is used in Scripting. It works by displaying the HTML of a Code note, 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. Create a Render Note.
3. Assign the `renderNote` relation to point at the previously created code note.

## Dynamic content

A static HTML is generally not enough for Scripting. 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 Code, 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)

## Refreshing the note

It's possible to refresh the note via:

- The corresponding button in Floating buttons.
- The “Render active note” keyboard shortcut (not assigned by default).

## Examples

- Weight Tracker which is present in the Demo Notes.