From 82d1d2ad3e7d55e0c321806695a131f576f3086e Mon Sep 17 00:00:00 2001
From: Michael Gartner <mclicks@gmail.com>
Date: Fri, 13 Feb 2026 11:46:49 -0600
Subject: [PATCH 1/4] Add custom layout support in ResultsView component

- Introduced a new "custom" layout option in ResultsView.
- Added a textarea for users to input custom HTML templates with handlebars syntax.
- Integrated CustomView component to render results based on the custom template.
- Enhanced state management to save template changes dynamically.

This update allows for greater flexibility in displaying results according to user-defined templates.
---
 .../components/results-view/CustomView.tsx    | 31 ++++++++
 .../components/results-view/ResultsView.tsx   | 49 +++++++++++++
 apps/roam/src/utils/compileTemplate.ts        | 71 +++++++++++++++++++
 3 files changed, 151 insertions(+)
 create mode 100644 apps/roam/src/components/results-view/CustomView.tsx
 create mode 100644 apps/roam/src/utils/compileTemplate.ts

diff --git a/apps/roam/src/components/results-view/CustomView.tsx b/apps/roam/src/components/results-view/CustomView.tsx
new file mode 100644
index 000000000..56d9abc02
--- /dev/null
+++ b/apps/roam/src/components/results-view/CustomView.tsx
@@ -0,0 +1,31 @@
+import React, { useMemo } from "react";
+import { compileTemplate, sanitizeHtml } from "~/utils/compileTemplate";
+import type { Result } from "~/utils/types";
+
+export const DEFAULT_TEMPLATE = `<ul>
+{{#each results}}
+  <li>{{result.text}}</li>
+{{/each}}
+</ul>`;
+
+type CustomViewProps = {
+  results: Result[];
+  template?: string;
+};
+
+const CustomView = ({ results, template = DEFAULT_TEMPLATE }: CustomViewProps) => {
+  const html = useMemo(() => {
+    const compiled = compileTemplate({ template, results });
+    return sanitizeHtml({ html: compiled });
+  }, [results, template]);
+
+  return (
+    <div
+      className="roamjs-custom-results-view p-4"
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+};
+
+export default CustomView;
+
diff --git a/apps/roam/src/components/results-view/ResultsView.tsx b/apps/roam/src/components/results-view/ResultsView.tsx
index dc2c9c091..847da4fd2 100644
--- a/apps/roam/src/components/results-view/ResultsView.tsx
+++ b/apps/roam/src/components/results-view/ResultsView.tsx
@@ -37,6 +37,7 @@ import getUids from "roamjs-components/dom/getUids";
 import Charts from "./Charts";
 import Timeline from "./Timeline";
 import Kanban from "./Kanban";
+import CustomView, { DEFAULT_TEMPLATE } from "./CustomView";
 import MenuItemSelect from "roamjs-components/components/MenuItemSelect";
 import type { RoamBasicNode } from "roamjs-components/types/native";
 import { render as renderToast } from "roamjs-components/components/Toast";
@@ -225,6 +226,11 @@ const SUPPORTED_LAYOUTS = [
       { key: "legend", label: "Show Legend", options: ["No", "Yes"] },
     ],
   },
+  {
+    id: "custom",
+    icon: "code-block",
+    settings: [],
+  },
 ] as const;
 const settingsById = Object.fromEntries(
   SUPPORTED_LAYOUTS.map((l) => [l.id, l.settings]),
@@ -778,6 +784,40 @@ const ResultsView: ResultsViewComponent = ({
                       </Label>
                     );
                   })}
+                  {layoutMode === "custom" && (
+                    <Label>
+                      Template (HTML + <code>{"{{#each results}}...{{/each}}"}</code>,{" "}
+                      <code>{"{{result.key}}"}</code>)
+                      <textarea
+                        className="bp3-input mt-1 w-full font-mono text-sm"
+                        rows={8}
+                        placeholder={DEFAULT_TEMPLATE}
+                        value={
+                          (Array.isArray(layout.template)
+                            ? layout.template[0]
+                            : layout.template) ?? ""
+                        }
+                        onChange={(e) => {
+                          const value = e.target.value;
+                          setLayout({ ...layout, template: value });
+                          if (preventSavingSettings) return;
+                          const resultNode = getSubTree({
+                            key: "results",
+                            parentUid,
+                          });
+                          const layoutNode = getSubTree({
+                            parentUid: resultNode.uid,
+                            key: "layout",
+                          });
+                          setInputSetting({
+                            key: "template",
+                            value,
+                            blockUid: layoutNode.uid,
+                          });
+                        }}
+                      />
+                    </Label>
+                  )}
                 </div>
               ) : isEditColumnSort ? (
                 <div className="relative p-4">
@@ -1400,6 +1440,15 @@ const ResultsView: ResultsViewComponent = ({
                   pageSizeTimeoutRef={pageSizeTimeoutRef}
                   setPageSize={setPageSize}
                 />
+              ) : layoutMode === "custom" ? (
+                <CustomView
+                  results={allProcessedResults}
+                  template={
+                    (Array.isArray(layout.template)
+                      ? layout.template[0]
+                      : layout.template) || DEFAULT_TEMPLATE
+                  }
+                />
               ) : (
                 <div style={{ padding: "16px 8px" }}>
                   Layout `{layoutMode}` is not supported
diff --git a/apps/roam/src/utils/compileTemplate.ts b/apps/roam/src/utils/compileTemplate.ts
new file mode 100644
index 000000000..ef9bb79f3
--- /dev/null
+++ b/apps/roam/src/utils/compileTemplate.ts
@@ -0,0 +1,71 @@
+import type { Result } from "./types";
+
+const EACH_BLOCK = /\{\{\s*#each\s+results\s*\}\}([\s\S]*?)\{\{\s*\/each\s*\}\}/;
+const RESULT_KEY = /\{\{\s*result\.([\w-]+)\s*\}\}/g;
+
+const escapeHtml = (value: unknown): string =>
+  String(value ?? "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+
+const substituteResult = ({
+  body,
+  result,
+}: {
+  body: string;
+  result: Result;
+}): string =>
+  body.replace(RESULT_KEY, (_, key: string) => {
+    return escapeHtml(result[key]);
+  });
+
+export const compileTemplate = ({
+  template,
+  results,
+}: {
+  template: string;
+  results: Result[];
+}): string => {
+  let output = template;
+  let match = output.match(EACH_BLOCK);
+
+  while (match) {
+    const [fullMatch, body] = match;
+    const replacement = results
+      .map((result) => substituteResult({ body, result }))
+      .join("");
+
+    output = output.replace(fullMatch, replacement);
+    match = output.match(EACH_BLOCK);
+  }
+
+  return output;
+};
+
+export const sanitizeHtml = ({ html }: { html: string }): string => {
+  if (typeof document === "undefined") return html;
+
+  const container = document.createElement("div");
+  container.innerHTML = html;
+
+  container
+    .querySelectorAll("script, iframe, object, embed, style[type='text/javascript']")
+    .forEach((el) => el.remove());
+
+  container.querySelectorAll("*").forEach((el) => {
+    [...el.attributes].forEach((attr) => {
+      if (
+        /^on\w+/i.test(attr.name) ||
+        ((attr.name === "href" || attr.name === "src") &&
+          /^\s*javascript:/i.test(attr.value))
+      ) {
+        el.removeAttribute(attr.name);
+      }
+    });
+  });
+
+  return container.innerHTML;
+};
+

From 88a8774912d11284820cf99fff9e7462252667a7 Mon Sep 17 00:00:00 2001
From: Michael Gartner <mclicks@gmail.com>
Date: Fri, 13 Feb 2026 12:02:18 -0600
Subject: [PATCH 2/4] layout

---
 .../components/results-view/ResultsView.tsx   | 69 ++++++++++++++++++-
 1 file changed, 66 insertions(+), 3 deletions(-)

diff --git a/apps/roam/src/components/results-view/ResultsView.tsx b/apps/roam/src/components/results-view/ResultsView.tsx
index 847da4fd2..f408ac083 100644
--- a/apps/roam/src/components/results-view/ResultsView.tsx
+++ b/apps/roam/src/components/results-view/ResultsView.tsx
@@ -63,7 +63,11 @@ const EMBED_FOLD_VALUES = ["default", "open", "closed"];
 
 type EnglishQueryPart = { text: string; clickId?: string };
 
-const QueryUsed = ({ parentUid }: { parentUid: string }) => {
+const QueryUsed = ({
+  parentUid,
+}: {
+  parentUid: string;
+}) => {
   const { datalogQuery, englishQuery } = useMemo(() => {
     const args = parseQuery(parentUid);
     const { query: datalogQuery } = getDatalogQuery(args);
@@ -458,6 +462,40 @@ const ResultsView: ResultsViewComponent = ({
     () => views.filter((view) => view.mode !== "hidden").length,
     [views],
   );
+  const customViewPrompt = useMemo(() => {
+    const selectionKeys = Array.from(
+      new Set(
+        columns
+          .map((c) => c.key.trim())
+          .filter(Boolean),
+      ),
+    );
+    const keyLines = selectionKeys.map((k) => `- ${k}`).join("\n");
+    const exampleKey = selectionKeys.find((k) => k !== "text") || "text";
+    const exampleTemplate = `<ul>
+{{#each results}}
+  <li>{{result.${exampleKey}}}</li>
+{{/each}}
+</ul>`;
+
+    return `Create a Custom HTML Layout for a query result renderer.
+
+Requirements:
+- Render with {{#each results}}...{{/each}}
+- Use interpolations like {{result.key}}
+- Do not use JavaScript, window access, or side effects
+
+Available result keys:
+${keyLines || "- text"}
+
+Default template example:
+${DEFAULT_TEMPLATE}
+
+Selection-specific template example:
+${exampleTemplate}
+
+Custom view description:`;
+  }, [columns]);
 
   return (
     <div
@@ -786,8 +824,33 @@ const ResultsView: ResultsViewComponent = ({
                   })}
                   {layoutMode === "custom" && (
                     <Label>
-                      Template (HTML + <code>{"{{#each results}}...{{/each}}"}</code>,{" "}
-                      <code>{"{{result.key}}"}</code>)
+                      <div className="mb-1 flex items-center justify-between gap-2 pr-1">
+                        <span>
+                          Template (HTML + <code>{"{{#each results}}...{{/each}}"}</code>,{" "}
+                          <code>{"{{result.key}}"}</code>)
+                        </span>
+                        <Tooltip
+                          content={"Copy Custom View Prompt"}
+                          position={"top"}
+                          openOnTargetFocus={false}
+                          lazy={true}
+                          hoverOpenDelay={250}
+                          autoFocus={false}
+                        >
+                          <Button
+                            minimal
+                            icon={"duplicate"}
+                            onClick={() => {
+                              navigator.clipboard.writeText(customViewPrompt);
+                              renderToast({
+                                id: "custom-view-prompt-copy",
+                                content: "Copied Custom View Prompt",
+                                intent: Intent.PRIMARY,
+                              });
+                            }}
+                          />
+                        </Tooltip>
+                      </div>
                       <textarea
                         className="bp3-input mt-1 w-full font-mono text-sm"
                         rows={8}

From b5bad8f62f74a9fc858c6f8167a51ae7d16d8e5b Mon Sep 17 00:00:00 2001
From: Michael Gartner <mclicks@gmail.com>
Date: Fri, 13 Feb 2026 12:25:42 -0600
Subject: [PATCH 3/4] css

---
 apps/roam/src/components/results-view/ResultsView.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/roam/src/components/results-view/ResultsView.tsx b/apps/roam/src/components/results-view/ResultsView.tsx
index f408ac083..79fca1b60 100644
--- a/apps/roam/src/components/results-view/ResultsView.tsx
+++ b/apps/roam/src/components/results-view/ResultsView.tsx
@@ -484,6 +484,7 @@ Requirements:
 - Render with {{#each results}}...{{/each}}
 - Use interpolations like {{result.key}}
 - Do not use JavaScript, window access, or side effects
+- Prefer simple, minimal CSS (avoid complex styling)
 
 Available result keys:
 ${keyLines || "- text"}

From f749cd63fe3c2e09ec1df950e7ec66ef09c80414 Mon Sep 17 00:00:00 2001
From: Michael Gartner <mclicks@gmail.com>
Date: Fri, 13 Feb 2026 12:42:30 -0600
Subject: [PATCH 4/4] Add custom view group-by template support and prompt
 updates

---
 .../components/results-view/ResultsView.tsx   | 16 ++++++++++-
 apps/roam/src/utils/compileTemplate.ts        | 27 +++++++++++++++----
 2 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/apps/roam/src/components/results-view/ResultsView.tsx b/apps/roam/src/components/results-view/ResultsView.tsx
index 79fca1b60..e122dc616 100644
--- a/apps/roam/src/components/results-view/ResultsView.tsx
+++ b/apps/roam/src/components/results-view/ResultsView.tsx
@@ -477,14 +477,24 @@ const ResultsView: ResultsViewComponent = ({
   <li>{{result.${exampleKey}}}</li>
 {{/each}}
 </ul>`;
+    const groupByExampleTemplate = `<table>
+{{#each results}}
+  <tr>
+    <td>{{resultIfChanged.${exampleKey}}}</td>
+    <td>{{result.text}}</td>
+  </tr>
+{{/each}}
+</table>`;
 
     return `Create a Custom HTML Layout for a query result renderer.
 
 Requirements:
 - Render with {{#each results}}...{{/each}}
 - Use interpolations like {{result.key}}
+- You can suppress repeated values with {{resultIfChanged.key}} or {{#ifChanged result.key}}...{{/ifChanged}}
 - Do not use JavaScript, window access, or side effects
 - Prefer simple, minimal CSS (avoid complex styling)
+- Emulate a "group by" row pattern: when looping each result, if "{enter field}" matches the previous row's value, do not render that field again for the current row.
 
 Available result keys:
 ${keyLines || "- text"}
@@ -495,6 +505,9 @@ ${DEFAULT_TEMPLATE}
 Selection-specific template example:
 ${exampleTemplate}
 
+Group-by style example (hide repeated values):
+${groupByExampleTemplate}
+
 Custom view description:`;
   }, [columns]);
 
@@ -828,7 +841,8 @@ Custom view description:`;
                       <div className="mb-1 flex items-center justify-between gap-2 pr-1">
                         <span>
                           Template (HTML + <code>{"{{#each results}}...{{/each}}"}</code>,{" "}
-                          <code>{"{{result.key}}"}</code>)
+                          <code>{"{{result.key}}"}</code>,{" "}
+                          <code>{"{{resultIfChanged.key}}"}</code>)
                         </span>
                         <Tooltip
                           content={"Copy Custom View Prompt"}
diff --git a/apps/roam/src/utils/compileTemplate.ts b/apps/roam/src/utils/compileTemplate.ts
index ef9bb79f3..e93a3392d 100644
--- a/apps/roam/src/utils/compileTemplate.ts
+++ b/apps/roam/src/utils/compileTemplate.ts
@@ -2,6 +2,9 @@ import type { Result } from "./types";
 
 const EACH_BLOCK = /\{\{\s*#each\s+results\s*\}\}([\s\S]*?)\{\{\s*\/each\s*\}\}/;
 const RESULT_KEY = /\{\{\s*result\.([\w-]+)\s*\}\}/g;
+const RESULT_IF_CHANGED = /\{\{\s*resultIfChanged\.([\w-]+)\s*\}\}/g;
+const IF_CHANGED_BLOCK =
+  /\{\{\s*#ifChanged\s+result\.([\w-]+)\s*\}\}([\s\S]*?)\{\{\s*\/ifChanged\s*\}\}/g;
 
 const escapeHtml = (value: unknown): string =>
   String(value ?? "")
@@ -13,13 +16,26 @@ const escapeHtml = (value: unknown): string =>
 const substituteResult = ({
   body,
   result,
+  previousResult,
 }: {
   body: string;
   result: Result;
+  previousResult?: Result;
 }): string =>
-  body.replace(RESULT_KEY, (_, key: string) => {
-    return escapeHtml(result[key]);
-  });
+  body
+    .replace(IF_CHANGED_BLOCK, (_, key: string, sectionBody: string) => {
+      const currentValue = String(result[key] ?? "");
+      const previousValue = String(previousResult?.[key] ?? "");
+      return currentValue === previousValue ? "" : sectionBody;
+    })
+    .replace(RESULT_IF_CHANGED, (_, key: string) => {
+      const currentValue = String(result[key] ?? "");
+      const previousValue = String(previousResult?.[key] ?? "");
+      return currentValue === previousValue ? "" : escapeHtml(result[key]);
+    })
+    .replace(RESULT_KEY, (_, key: string) => {
+      return escapeHtml(result[key]);
+    });
 
 export const compileTemplate = ({
   template,
@@ -34,7 +50,9 @@ export const compileTemplate = ({
   while (match) {
     const [fullMatch, body] = match;
     const replacement = results
-      .map((result) => substituteResult({ body, result }))
+      .map((result, index) =>
+        substituteResult({ body, result, previousResult: results[index - 1] }),
+      )
       .join("");
 
     output = output.replace(fullMatch, replacement);
@@ -68,4 +86,3 @@ export const sanitizeHtml = ({ html }: { html: string }): string => {
 
   return container.innerHTML;
 };
-