diff --git a/apps/client/src/stylesheets/theme-next/forms.css b/apps/client/src/stylesheets/theme-next/forms.css
index bccf7ab6d4..2fc8a39dbd 100644
--- a/apps/client/src/stylesheets/theme-next/forms.css
+++ b/apps/client/src/stylesheets/theme-next/forms.css
@@ -838,7 +838,7 @@ input[type="range"] {
text-align: center;
}
-.tn-centered-form input,
+.tn-centered-form .input-group,
.tn-centered-form button {
margin-top: 12px;
-}
\ No newline at end of file
+}
diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 341e3ed579..f5926aa4b1 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1067,8 +1067,7 @@
"click_on_canvas_to_place_new_note": "Click on canvas to place new note"
},
"render": {
- "note_detail_render_help_1": "This help note is shown because this note of type Render HTML doesn't have required relation to function properly.",
- "note_detail_render_help_2": "Render HTML note type is used for scripting. In short, you have a HTML code note (optionally with some JavaScript) and this note will render it. To make it work, you need to define a relation called \"renderNote\" pointing to the HTML note to render."
+ "setup_title": "Display custom HTML or Preact JSX inside this 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 1f9d61d218..1f05820008 100644
--- a/apps/client/src/widgets/type_widgets/Render.tsx
+++ b/apps/client/src/widgets/type_widgets/Render.tsx
@@ -5,10 +5,11 @@ import { useEffect, useRef } from "preact/hooks";
import attributes from "../../services/attributes";
import { t } from "../../services/i18n";
import render from "../../services/render";
-import Alert from "../react/Alert";
+import FormGroup from "../react/FormGroup";
import { useNoteRelation, useTriliumEvent } from "../react/hooks";
-import RawHtml from "../react/RawHtml";
+import NoteAutocomplete from "../react/NoteAutocomplete";
import { refToJQuerySelector } from "../react/react_utils";
+import SetupForm from "./helpers/SetupForm";
import { TypeWidgetProps } from "./type_widget";
export default function Render(props: TypeWidgetProps) {
@@ -16,7 +17,7 @@ export default function Render(props: TypeWidgetProps) {
const [ renderNote ] = useNoteRelation(note, "renderNote");
if (!renderNote) {
- return
{t("render.note_detail_render_help_1")}
-