From 1ba498c0e39993ec7667f8671c35e4cc6146eca9 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 15 Feb 2026 16:38:09 +0200
Subject: [PATCH] feat(client/render_note): create sample note with preact

---
 .../src/translations/en/translation.json      |  4 ++-
 .../src/widgets/type_widgets/Render.tsx       | 25 +++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index f5926aa4b1..ac5f3256ed 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1067,7 +1067,9 @@
     "click_on_canvas_to_place_new_note": "Click on canvas to place new note"
   },
   "render": {
-    "setup_title": "Display custom HTML or Preact JSX inside this note"
+    "setup_title": "Display custom HTML or Preact JSX inside this note",
+    "setup_create_sample": "Create sample note with Preact",
+    "setup_sample_created": "A sample note was created as a child note."
   },
   "web_view_setup": {
     "title": "Create a live view of a webpage directly into Trilium",
diff --git a/apps/client/src/widgets/type_widgets/Render.tsx b/apps/client/src/widgets/type_widgets/Render.tsx
index 1f05820008..7dc524e216 100644
--- a/apps/client/src/widgets/type_widgets/Render.tsx
+++ b/apps/client/src/widgets/type_widgets/Render.tsx
@@ -4,7 +4,10 @@ import { useEffect, useRef } from "preact/hooks";
 
 import attributes from "../../services/attributes";
 import { t } from "../../services/i18n";
+import note_create from "../../services/note_create";
 import render from "../../services/render";
+import toast from "../../services/toast";
+import Button from "../react/Button";
 import FormGroup from "../react/FormGroup";
 import { useNoteRelation, useTriliumEvent } from "../react/hooks";
 import NoteAutocomplete from "../react/NoteAutocomplete";
@@ -12,6 +15,12 @@ import { refToJQuerySelector } from "../react/react_utils";
 import SetupForm from "./helpers/SetupForm";
 import { TypeWidgetProps } from "./type_widget";
 
+const PREACT_SAMPLE = /*js*/`\
+export default function() {
+    return <p>Hello world.</p>;
+}
+`;
+
 export default function Render(props: TypeWidgetProps) {
     const { note } = props;
     const [ renderNote ] = useNoteRelation(note, "renderNote");
@@ -73,6 +82,22 @@ function SetupRenderContent({ note }: TypeWidgetProps) {
                     attributes.setRelation(note.noteId, "renderNote", noteId);
                 }} />
             </FormGroup>
+
+            <Button
+                text={t("render.setup_create_sample")}
+                primary
+                onClick={async () => {
+                    const { note: codeNote } = await note_create.createNote(note.noteId, {
+                        type: "code",
+                        mime: "text/jsx",
+                        content: PREACT_SAMPLE,
+                        activate: false
+                    });
+                    if (!codeNote) return;
+                    await attributes.setRelation(note.noteId, "renderNote", codeNote.noteId);
+                    toast.showMessage(t("render.setup_sample_created"));
+                }}
+            />
         </SetupForm>
     );
 }