diff --git a/src/lib/component-templates/codegen-utils.ts b/src/lib/component-templates/codegen-utils.ts
new file mode 100644
index 0000000..bd12632
--- /dev/null
+++ b/src/lib/component-templates/codegen-utils.ts
@@ -0,0 +1,182 @@
+import type { SchemaField } from "~/lib/faker-options";
+
+function normalize(s: string): string {
+    return s.toLowerCase().replace(/[_\s-]/g, "");
+}
+
+export function safeGet(k: string | undefined): string {
+    return k ? `(item[${JSON.stringify(k)}] ?? '')` : "''";
+}
+
+/**
+ * Finds the user's actual fieldName matching any of the given candidates
+ * (case + separator insensitive). Returns null if none found so the
+ * template can decide on a fallback.
+ */
+export function findField(fields: SchemaField[], candidates: string[]): string | null {
+    const normalizedCandidates = new Set(candidates.map(normalize));
+    const match = fields.find((f) => normalizedCandidates.has(normalize(f.fieldName)));
+    return match ? match.fieldName : null;
+}
+
+/**
+ * Builds a fetch hook that handles both response shapes from the mock
+ * endpoint: a single object (count === 1) or an array (count > 1).
+ */
+export function buildFetchHook(
+    hookName: string,
+    endpointUrl: string,
+    itemTypeName: string,
+): string {
+    return `function use${hookName}Data() {
+  const [data, setData] = useState<${itemTypeName}[] | ${itemTypeName} | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch("${endpointUrl}")
+      .then((res) => {
+        if (!res.ok) throw new Error(\`Request failed: \${res.status}\`);
+        return res.json();
+      })
+      .then((json) => setData(json))
+      .catch((err) => setError(err instanceof Error ? err.message : "Unknown error"))
+      .finally(() => setLoading(false));
+  }, []);
+
+  return { data, loading, error };
+}`;
+}
+
+export function buildInterface(name: string, fieldLines: string[]): string {
+    return `interface ${name} {
+${fieldLines.map((l) => `  ${l}`).join("\n")}
+}`;
+}
+
+/**
+ * Builds a vanilla-JS fetch + DOM-render script block for HTML templates.
+ * `renderFn` is a JS expression (string) that maps a single item to an
+ * HTML string — the caller provides the item-level template string.
+ */
+export function buildHtmlFetchScript(endpointUrl: string, renderFn: string): string {
+    return `  async function loadData() {
+    const root = document.getElementById('root');
+    const err  = document.getElementById('error');
+    root.innerHTML = '<p class="loading">Loading…</p>';
+    try {
+      const res = await fetch("${endpointUrl}");
+      if (!res.ok) throw new Error('HTTP ' + res.status);
+      const json = await res.json();
+      const items = Array.isArray(json) ? json : [json];
+      root.innerHTML = items.map(${renderFn}).join('');
+    } catch (e) {
+      root.innerHTML = '';
+      err.textContent = 'Error: ' + e.message;
+    }
+  }
+  loadData();`;
+}
+
+/**
+ * Returns a baseline CSS string used by all HTML templates:
+ * custom properties for color, card grid, avatar, etc.
+ */
+export function buildHtmlStyles(): string {
+    return `  :root {
+    --bg: #ffffff;
+    --surface: #f4f4f5;
+    --border: #e4e4e7;
+    --text: #18181b;
+    --muted: #71717a;
+    --primary: #6366f1;
+    --danger: #ef4444;
+    --success: #22c55e;
+    --radius: 12px;
+    --font: system-ui, -apple-system, sans-serif;
+    --mono: 'Fira Code', 'Cascadia Code', monospace;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg: #09090b;
+      --surface: #18181b;
+      --border: #27272a;
+      --text: #fafafa;
+      --muted: #a1a1aa;
+    }
+  }
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    font-family: var(--font);
+    background: var(--bg);
+    color: var(--text);
+    padding: 1.5rem;
+  }
+  #error { color: var(--danger); font-family: var(--mono); font-size: .85rem; margin-bottom: 1rem; }
+  .loading { color: var(--muted); font-size: .9rem; }
+  .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
+  .card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: .75rem;
+    transition: box-shadow .2s;
+  }
+  .card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
+  .card-header { display: flex; align-items: center; gap: .75rem; }
+  .avatar {
+    width: 44px; height: 44px; border-radius: 50%;
+    object-fit: cover; border: 1px solid var(--border); flex-shrink: 0;
+  }
+  .avatar-placeholder {
+    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
+    background: var(--border); display: flex; align-items: center;
+    justify-content: center; font-weight: 700; font-size: 1.1rem; color: var(--muted);
+  }
+  .card-title { font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .card-sub   { font-size: .78rem; color: var(--muted); font-family: var(--mono); margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .card-desc  { font-size: .8rem; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+  .details    { margin-top: .5rem; padding-top: .75rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: .35rem; }
+  .detail-row { display: flex; justify-content: space-between; font-size: .75rem; font-family: var(--mono); }
+  .detail-key { color: var(--muted); }
+  .badge { display: inline-block; padding: .15rem .5rem; border-radius: 4px; font-size: .68rem; font-weight: 600; font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em; }
+  .badge-amber { background: #fef3c7; color: #92400e; }
+  .badge-emerald { background: #d1fae5; color: #065f46; }
+  .badge-rose { background: #ffe4e6; color: #9f1239; }
+  .badge-zinc { background: var(--border); color: var(--muted); }
+  img.cover { width: 100%; height: 160px; object-fit: cover; border-radius: calc(var(--radius) - 4px) calc(var(--radius) - 4px) 0 0; }
+  table { width: 100%; border-collapse: collapse; font-size: .85rem; }
+  thead tr { background: var(--surface); border-bottom: 1px solid var(--border); }
+  th, td { padding: .65rem 1rem; text-align: left; }
+  th { font-family: var(--mono); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
+  tbody tr { border-bottom: 1px solid var(--border); }
+  tbody tr:hover { background: var(--surface); }
+  td.amount { text-align: right; font-weight: 700; font-family: var(--mono); }
+  .todo-list { list-style: none; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
+  .todo-item { display: flex; flex-direction: column; gap: .4rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
+  .todo-item:last-child { border-bottom: none; }
+  .todo-item:hover { background: var(--surface); }
+  .todo-row { display: flex; align-items: center; gap: .6rem; }
+  .todo-title { flex: 1; font-size: .9rem; font-weight: 500; }
+  .todo-title.done { text-decoration: line-through; color: var(--muted); }
+  .comment-list { display: flex; flex-direction: column; gap: .75rem; }
+  .comment { display: flex; gap: .75rem; }
+  .comment-body { flex: 1; border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem; }
+  .comment-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
+  .comment-author { font-weight: 600; font-size: .9rem; }
+  .comment-date { font-size: .75rem; color: var(--muted); }
+  .comment-text { font-size: .85rem; color: var(--muted); line-height: 1.55; }
+  .product-img { width: 100%; height: 176px; object-fit: cover; border-radius: calc(var(--radius) - 4px) calc(var(--radius) - 4px) 0 0; }
+  .product-img-placeholder { width: 100%; height: 96px; display: flex; align-items: center; justify-content: center; font-size: 2rem; background: var(--surface); border-radius: calc(var(--radius) - 4px) calc(var(--radius) - 4px) 0 0; }
+  .product-body { padding: .85rem; display: flex; flex-direction: column; gap: .4rem; }
+  .product-footer { padding: .65rem .85rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
+  .price { font-size: 1.1rem; font-weight: 700; }
+  .article { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
+  .article-body { padding: 1rem; }
+  .article-title { font-weight: 600; font-size: 1rem; margin-bottom: .35rem; }
+  .article-excerpt { font-size: .82rem; color: var(--muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+  .article-footer { margin-top: .65rem; display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); }`;
+}
diff --git a/src/lib/component-templates/comment-item.ts b/src/lib/component-templates/comment-item.ts
new file mode 100644
index 0000000..0853879
--- /dev/null
+++ b/src/lib/component-templates/comment-item.ts
@@ -0,0 +1,113 @@
+import type { ComponentTemplate } from "./types";
+import {
+    findField,
+    buildFetchHook,
+    buildInterface,
+    buildHtmlFetchScript,
+    buildHtmlStyles,
+    safeGet,
+} from "./codegen-utils";
+
+export const commentItemTemplate: ComponentTemplate = {
+    id: "comment-item",
+    name: "Comment Item",
+    description: "Avatar + author + comment text list. Handles single or list response.",
+    requiredFields: ["comment", "author"],
+    optionalFields: ["avatar", "createdAt", "id"],
+    code: (fields, endpointUrl) => {
+        const idField = findField(fields, ["id", "commentid", "uuid"]) ?? "id";
+        const authorField =
+            findField(fields, ["author", "fullname", "username", "name"]) ?? "author";
+        const commentField =
+            findField(fields, ["comment", "message", "content", "text"]) ?? "comment";
+        const avatarField = findField(fields, ["avatar", "image", "photo"]);
+        const createdAtField = findField(fields, ["createdat", "date", "timestamp"]);
+
+        const interfaceLines = [
+            `${idField}: string;`,
+            `${authorField}: string;`,
+            `${commentField}: string;`,
+        ];
+        if (avatarField) interfaceLines.push(`${avatarField}: string;`);
+        if (createdAtField) interfaceLines.push(`${createdAtField}: string;`);
+
+        return `import { useEffect, useState } from "react";
+
+${buildInterface("Comment", interfaceLines)}
+
+${buildFetchHook("CommentItem", endpointUrl, "Comment")}
+
+export function CommentList() {
+  const { data, loading, error } = useCommentItemData();
+
+  if (loading) return <div className="p-4 text-sm text-gray-500">Loading...</div>;
+  if (error) return <div className="p-4 text-sm text-red-500">Error: {error}</div>;
+  if (!data) return null;
+
+  const comments = Array.isArray(data) ? data : [data];
+
+  return (
+    <div className="space-y-3">
+      {comments.map((comment) => (
+        <div key={comment.${idField}} className="flex gap-3">
+${avatarField ? `          <img src={comment.${avatarField}} alt={comment.${authorField}} className="h-8 w-8 rounded-full object-cover" />\n` : ""}          <div className="min-w-0 flex-1 rounded-lg border p-3">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">{comment.${authorField}}</span>
+${createdAtField ? `              <span className="text-xs text-gray-400">{comment.${createdAtField}}</span>\n` : ""}            </div>
+            <p className="mt-1 text-sm text-gray-600">{comment.${commentField}}</p>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+`;
+    },
+    htmlCode: (fields, endpointUrl) => {
+        const authorField =
+            findField(fields, ["author", "fullname", "username", "name"]) ?? "author";
+        const commentField =
+            findField(fields, ["comment", "message", "content", "text"]) ?? "comment";
+        const avatarField = findField(fields, ["avatar", "image", "photo"]);
+        const createdAtField = findField(fields, ["createdat", "date", "timestamp"]);
+
+        const avatarHtml = avatarField
+            ? `\${${safeGet(avatarField)} ? \`<img class="avatar" style="flex-shrink:0;align-self:flex-start" src="\${${safeGet(avatarField)}}" alt="avatar">\` : \`<div class="avatar-placeholder" style="flex-shrink:0;align-self:flex-start">\${String(${safeGet(authorField)}).charAt(0).toUpperCase() || 'U'}</div>\`}`
+            : `<div class="avatar-placeholder" style="flex-shrink:0;align-self:flex-start">\${String(${safeGet(authorField)}).charAt(0).toUpperCase() || 'U'}</div>`;
+
+        const dateHtml = createdAtField
+            ? `\${${safeGet(createdAtField)} ? \`<span class="comment-date">\${${safeGet(createdAtField)}}</span>\` : ''}`
+            : "";
+
+        const renderFn = `item => \`<div class="comment">
+  ${avatarHtml}
+  <div class="comment-body">
+    <div class="comment-meta">
+      <span class="comment-author">\${${safeGet(authorField)}}</span>
+      ${dateHtml}
+    </div>
+    <p class="comment-text">\${${safeGet(commentField)}}</p>
+  </div>
+</div>\``;
+
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Comments</title>
+  <style>
+${buildHtmlStyles()}
+  </style>
+</head>
+<body>
+  <p id="error"></p>
+  <div id="root" class="comment-list"></div>
+  <script type="module">
+${buildHtmlFetchScript(endpointUrl, renderFn)}
+  </script>
+</body>
+</html>
+`;
+    },
+};
diff --git a/src/lib/component-templates/dynamic-grid.ts b/src/lib/component-templates/dynamic-grid.ts
new file mode 100644
index 0000000..6424170
--- /dev/null
+++ b/src/lib/component-templates/dynamic-grid.ts
@@ -0,0 +1,376 @@
+import type { ComponentTemplate } from "./types";
+import {
+    buildFetchHook,
+    buildInterface,
+    buildHtmlFetchScript,
+    buildHtmlStyles,
+    safeGet,
+} from "./codegen-utils";
+
+function normalize(s: string): string {
+    return s.toLowerCase().replace(/[_\s-]/g, "");
+}
+
+function mapDataTypeToTsType(dataType: string): string {
+    const dt = dataType.toLowerCase();
+    if (dt.includes("boolean") || dt.includes("datatype.boolean")) {
+        return "boolean";
+    }
+    if (
+        dt.includes("number.int") ||
+        dt.includes("number.float") ||
+        dt.includes("number.bigint") ||
+        dt.includes("number.hex") ||
+        dt.includes("commerce.price") ||
+        dt.includes("finance.amount") ||
+        dt.includes("location.latitude") ||
+        dt.includes("location.longitude")
+    ) {
+        return "number";
+    }
+    return "string";
+}
+
+function renderPropAccess(path: string | undefined): string {
+    if (!path) return "undefined";
+    if (path.includes(".")) {
+        return `item?.["${path}"]`;
+    }
+    return `item.${path}`;
+}
+
+export const dynamicGridTemplate: ComponentTemplate = {
+    id: "dynamic-grid",
+    name: "Dynamic Card Grid",
+    description: "Adaptive UI card generated directly from schema fields and Faker types.",
+    requiredFields: [],
+    optionalFields: [],
+    code: (fields, endpointUrl) => {
+        const validFields = fields.filter((f) => f.fieldName.trim().length > 0);
+
+        const idField =
+            validFields.find((f) => {
+                const norm = normalize(f.fieldName);
+                const dt = normalize(f.dataType);
+                return (
+                    norm === "id" ||
+                    norm.includes("uuid") ||
+                    norm.endsWith("id") ||
+                    dt.includes("uuid") ||
+                    dt.includes("nanoid")
+                );
+            })?.fieldName ??
+            validFields[0]?.fieldName ??
+            "id";
+
+        const titleField = validFields.find((f) => {
+            const norm = normalize(f.fieldName);
+            const dt = normalize(f.dataType);
+            return (
+                norm.includes("name") ||
+                norm.includes("title") ||
+                norm.includes("label") ||
+                norm.includes("username") ||
+                norm.includes("user") ||
+                norm.includes("product") ||
+                norm.includes("dish") ||
+                norm.includes("vehicle") ||
+                dt.includes("fullname") ||
+                dt.includes("firstname") ||
+                dt.includes("lastname") ||
+                dt.includes("username") ||
+                dt.includes("productname") ||
+                dt.includes("company.name") ||
+                dt.includes("book.title") ||
+                dt.includes("food.dish") ||
+                dt.includes("vehicle.vehicle")
+            );
+        })?.fieldName;
+
+        const subtitleField = validFields.find((f) => {
+            const norm = normalize(f.fieldName);
+            const dt = normalize(f.dataType);
+            return (
+                f.fieldName !== titleField &&
+                (norm.includes("username") ||
+                    norm.includes("user") ||
+                    norm.includes("role") ||
+                    norm.includes("job") ||
+                    norm.includes("category") ||
+                    norm.includes("department") ||
+                    norm.includes("status") ||
+                    norm.includes("author") ||
+                    dt.includes("username") ||
+                    dt.includes("jobtitle") ||
+                    dt.includes("email") ||
+                    dt.includes("domainname") ||
+                    dt.includes("department") ||
+                    dt.includes("book.author") ||
+                    dt.includes("vehicle.manufacturer"))
+            );
+        })?.fieldName;
+
+        const avatarField = validFields.find((f) => {
+            const norm = normalize(f.fieldName);
+            const dt = normalize(f.dataType);
+            return (
+                norm.includes("avatar") ||
+                norm.includes("image") ||
+                norm.includes("photo") ||
+                norm.includes("picture") ||
+                norm.includes("cover") ||
+                dt.includes("image.avatar") ||
+                dt.includes("image.url") ||
+                dt.includes("image.datauri")
+            );
+        })?.fieldName;
+
+        const descriptionField = validFields.find((f) => {
+            const norm = normalize(f.fieldName);
+            const dt = normalize(f.dataType);
+            return (
+                f.fieldName !== titleField &&
+                f.fieldName !== subtitleField &&
+                (norm.includes("bio") ||
+                    norm.includes("description") ||
+                    norm.includes("comment") ||
+                    norm.includes("summary") ||
+                    norm.includes("catchphrase") ||
+                    dt.includes("person.bio") ||
+                    dt.includes("lorem.paragraph") ||
+                    dt.includes("lorem.paragraphs") ||
+                    dt.includes("lorem.sentence") ||
+                    dt.includes("commerce.productdescription") ||
+                    dt.includes("company.catchphrase"))
+            );
+        })?.fieldName;
+
+        const detailFields = validFields.filter(
+            (f) =>
+                f.fieldName !== idField &&
+                f.fieldName !== titleField &&
+                f.fieldName !== subtitleField &&
+                f.fieldName !== avatarField &&
+                f.fieldName !== descriptionField,
+        );
+
+        const interfaceLines = validFields.map((f) => {
+            if (f.fieldName.includes(".")) {
+                return `"${f.fieldName}"?: ${mapDataTypeToTsType(f.dataType)};`;
+            }
+            return `${f.fieldName}: ${mapDataTypeToTsType(f.dataType)};`;
+        });
+
+        return `import { useEffect, useState } from "react";
+
+${buildInterface("DataItem", interfaceLines)}
+
+${buildFetchHook("DataItem", endpointUrl, "DataItem")}
+
+export function DataCardList() {
+  const { data, loading, error } = useDataItemData();
+
+  if (loading) return <div className="p-4 text-sm text-zinc-500 font-mono">Loading...</div>;
+  if (error) return <div className="p-4 text-sm text-rose-500 font-mono">Error: {error}</div>;
+  if (!data) return null;
+
+  const items = Array.isArray(data) ? data : [data];
+
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 font-sans">
+      {items.map((item, idx) => (
+        <div
+          key={String(${renderPropAccess(idField)} ?? idx)}
+          className="flex flex-col justify-between rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 shadow-sm hover:shadow-md transition-shadow bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100"
+        >
+          <div className="space-y-3">
+            <div className="flex items-center gap-3">
+${
+    avatarField
+        ? `              {${renderPropAccess(avatarField)} ? (
+                <img
+                  src={String(${renderPropAccess(avatarField)})}
+                  alt="Avatar"
+                  className="h-11 w-11 rounded-full object-cover shrink-0 border border-zinc-200 dark:border-zinc-700 shadow-xs"
+                />
+              ) : (
+                <div className="flex h-11 w-11 items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-800 font-bold text-zinc-600 dark:text-zinc-300 shrink-0 border border-zinc-200/50 dark:border-zinc-700/50">
+                  {${titleField ? `String(${renderPropAccess(titleField)} ?? "").charAt(0).toUpperCase() || ` : ""} "#"}
+                </div>
+              )}`
+        : `              <div className="flex h-11 w-11 items-center justify-center rounded-lg bg-zinc-100 dark:bg-zinc-800 font-bold text-zinc-600 dark:text-zinc-300 shrink-0 border border-zinc-200/50 dark:border-zinc-700/50">
+                {${titleField ? `String(${renderPropAccess(titleField)} ?? "").charAt(0).toUpperCase() || ` : ""} "D"}
+              </div>`
+}
+              <div className="min-w-0 flex-1">
+${
+    titleField
+        ? `                <h4 className="truncate font-semibold text-sm text-zinc-900 dark:text-zinc-100">{${renderPropAccess(titleField)}}</h4>\n`
+        : `                <h4 className="truncate font-semibold text-sm text-zinc-900 dark:text-zinc-100">Item #{idx + 1}</h4>\n`
+}${subtitleField ? `                <p className="truncate text-xs text-zinc-500 dark:text-zinc-400 font-mono mt-0.5">{${renderPropAccess(subtitleField)}}</p>\n` : ""}              </div>
+            </div>
+
+${descriptionField ? `            <p className="text-xs text-zinc-600 dark:text-zinc-300 leading-relaxed line-clamp-2">{${renderPropAccess(descriptionField)}}</p>\n` : ""}          </div>
+
+${
+    detailFields.length > 0
+        ? `          <div className="mt-4 pt-3 border-t border-zinc-100 dark:border-zinc-800 text-xs space-y-1.5">
+${detailFields
+    .map((f) => {
+        const propAccess = renderPropAccess(f.fieldName);
+        return `            {${propAccess} !== undefined && (
+              <div className="flex justify-between items-center gap-2">
+                <span className="text-zinc-400 font-mono text-[11px] font-medium">${f.fieldName}:</span>
+                <span className="font-mono text-zinc-700 dark:text-zinc-300 truncate text-[11px]">{String(${propAccess})}</span>
+              </div>
+            )}`;
+    })
+    .join("\n")}
+          </div>\n`
+        : ""
+}        </div>
+      ))}
+    </div>
+  );
+}
+`;
+    },
+    htmlCode: (fields, endpointUrl) => {
+        const validFields = fields.filter((f) => f.fieldName.trim().length > 0);
+
+        const idField =
+            validFields.find((f) => {
+                const n = normalize(f.fieldName);
+                const d = normalize(f.dataType);
+                return (
+                    n === "id" ||
+                    n.includes("uuid") ||
+                    n.endsWith("id") ||
+                    d.includes("uuid") ||
+                    d.includes("nanoid")
+                );
+            })?.fieldName ??
+            validFields[0]?.fieldName ??
+            "id";
+
+        const titleField = validFields.find((f) => {
+            const n = normalize(f.fieldName);
+            const d = normalize(f.dataType);
+            return (
+                n.includes("name") ||
+                n.includes("title") ||
+                n.includes("label") ||
+                n.includes("username") ||
+                n.includes("user") ||
+                d.includes("fullname") ||
+                d.includes("firstname") ||
+                d.includes("productname") ||
+                d.includes("food.dish") ||
+                d.includes("vehicle.vehicle")
+            );
+        })?.fieldName;
+
+        const subtitleField = validFields.find((f) => {
+            const n = normalize(f.fieldName);
+            const d = normalize(f.dataType);
+            return (
+                f.fieldName !== titleField &&
+                (n.includes("username") ||
+                    n.includes("role") ||
+                    n.includes("job") ||
+                    n.includes("category") ||
+                    n.includes("status") ||
+                    d.includes("username") ||
+                    d.includes("jobtitle") ||
+                    d.includes("email"))
+            );
+        })?.fieldName;
+
+        const avatarField = validFields.find((f) => {
+            const n = normalize(f.fieldName);
+            const d = normalize(f.dataType);
+            return (
+                n.includes("avatar") ||
+                n.includes("image") ||
+                n.includes("photo") ||
+                n.includes("picture") ||
+                d.includes("image.avatar") ||
+                d.includes("image.url")
+            );
+        })?.fieldName;
+
+        const descriptionField = validFields.find((f) => {
+            const n = normalize(f.fieldName);
+            const d = normalize(f.dataType);
+            return (
+                f.fieldName !== titleField &&
+                f.fieldName !== subtitleField &&
+                (n.includes("bio") ||
+                    n.includes("description") ||
+                    n.includes("comment") ||
+                    n.includes("summary") ||
+                    d.includes("lorem.paragraph") ||
+                    d.includes("person.bio"))
+            );
+        })?.fieldName;
+
+        const detailFields = validFields.filter(
+            (f) =>
+                f.fieldName !== idField &&
+                f.fieldName !== titleField &&
+                f.fieldName !== subtitleField &&
+                f.fieldName !== avatarField &&
+                f.fieldName !== descriptionField,
+        );
+
+        const avatarHtml = avatarField
+            ? `\${${safeGet(avatarField)} ? \`<img class="avatar" src="\${${safeGet(avatarField)}}" alt="avatar">\` : \`<div class="avatar-placeholder">\${String(${safeGet(titleField)}).charAt(0).toUpperCase() || '#'}</div>\`}`
+            : `<div class="avatar-placeholder">${titleField ? `\${String(${safeGet(titleField)}).charAt(0).toUpperCase() || 'D'}` : "D"}</div>`;
+
+        const titleHtml = titleField
+            ? `<div class="card-title">\${${safeGet(titleField)}}</div>`
+            : `<div class="card-title">Item</div>`;
+        const subtitleHtml = subtitleField
+            ? `\${${safeGet(subtitleField)} ? \`<div class="card-sub">\${${safeGet(subtitleField)}}</div>\` : ''}`
+            : "";
+        const descHtml = descriptionField
+            ? `\${${safeGet(descriptionField)} ? \`<div class="card-desc">\${${safeGet(descriptionField)}}</div>\` : ''}`
+            : "";
+        const detailsHtml =
+            detailFields.length > 0
+                ? `<div class="details">\${[${detailFields.map((f) => `[${JSON.stringify(f.fieldName)}, item[${JSON.stringify(f.fieldName)}]]`).join(", ")}].filter(([,v]) => v !== undefined).map(([k,v]) => \`<div class="detail-row"><span class="detail-key">\${k}:</span><span>\${v}</span></div>\`).join('')}</div>`
+                : "";
+
+        const renderFn = `item => \`<div class="card">
+  <div class="card-header">
+    ${avatarHtml}
+    <div style="min-width:0;flex:1">
+      ${titleHtml}
+      ${subtitleHtml}
+    </div>
+  </div>
+  ${descHtml}
+  ${detailsHtml}
+</div>\``;
+
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Data Card Grid</title>
+  <style>
+${buildHtmlStyles()}
+  </style>
+</head>
+<body>
+  <p id="error"></p>
+  <div id="root" class="grid"></div>
+  <script type="module">
+${buildHtmlFetchScript(endpointUrl, renderFn)}
+  </script>
+</body>
+</html>
+`;
+    },
+};
diff --git a/src/lib/component-templates/index.ts b/src/lib/component-templates/index.ts
new file mode 100644
index 0000000..6307ba5
--- /dev/null
+++ b/src/lib/component-templates/index.ts
@@ -0,0 +1,128 @@
+import type { SchemaField } from "~/lib/faker-options";
+import type { ComponentTemplate, TemplateMatch } from "./types";
+import { dynamicGridTemplate } from "./dynamic-grid";
+import { userCardTemplate } from "./user-card";
+import { postCardTemplate } from "./post-card";
+import { productCardTemplate } from "./product-card";
+import { todoListTemplate } from "./todo-list";
+import { transactionRowTemplate } from "./transaction-row";
+import { commentItemTemplate } from "./comment-item";
+
+export const COMPONENT_TEMPLATES: ComponentTemplate[] = [
+    dynamicGridTemplate,
+    userCardTemplate,
+    postCardTemplate,
+    productCardTemplate,
+    todoListTemplate,
+    transactionRowTemplate,
+    commentItemTemplate,
+];
+
+function normalize(name: string): string {
+    return name.toLowerCase().replace(/[_\s-]/g, "");
+}
+
+function fieldMatches(fieldNameNormalized: string, candidateNormalized: string): boolean {
+    return (
+        fieldNameNormalized === candidateNormalized ||
+        fieldNameNormalized.includes(candidateNormalized) ||
+        candidateNormalized.includes(fieldNameNormalized)
+    );
+}
+
+/**
+ * Scores every template against the given schema fields and endpoint URL path.
+ * requiredFields matches are weighted heavily (10x);
+ * path segment matches add a strong boost (8x);
+ * optionalFields matches add a smaller boost.
+ */
+export function matchTemplates(fields: SchemaField[], endpointPath: string = ""): TemplateMatch[] {
+    const normalizedFieldNames = fields.map((f) => normalize(f.fieldName));
+    const normalizedPath = normalize(endpointPath);
+
+    const results: TemplateMatch[] = COMPONENT_TEMPLATES.map((template) => {
+        const matchedFields: string[] = [];
+
+        // Endpoint path keyword bonus
+        let pathScoreBoost = 0;
+        const templateKeywords = [template.id, ...template.requiredFields];
+        if (normalizedPath) {
+            for (const kw of templateKeywords) {
+                const normKw = normalize(kw);
+                if (normKw.length > 2 && normalizedPath.includes(normKw)) {
+                    pathScoreBoost += 8;
+                    break;
+                }
+            }
+        }
+
+        for (const required of template.requiredFields) {
+            const normalizedRequired = normalize(required);
+            if (normalizedFieldNames.some((fn) => fieldMatches(fn, normalizedRequired))) {
+                matchedFields.push(required);
+            }
+        }
+        for (const optional of template.optionalFields) {
+            const normalizedOptional = normalize(optional);
+            if (normalizedFieldNames.some((fn) => fieldMatches(fn, normalizedOptional))) {
+                matchedFields.push(optional);
+            }
+        }
+
+        const requiredMatchCount = template.requiredFields.filter((r) =>
+            matchedFields.includes(r),
+        ).length;
+        const requiredRatio =
+            template.requiredFields.length > 0
+                ? requiredMatchCount / template.requiredFields.length
+                : 0;
+        const optionalMatchCount = matchedFields.length - requiredMatchCount;
+
+        const score = requiredRatio * 10 + optionalMatchCount + pathScoreBoost;
+
+        return { template, score, matchedFields };
+    });
+
+    // If template has 0 score or only path match without any fields, ensure dynamic-grid is fallback
+    const matched = results
+        .filter((r) => r.score > 0)
+        .toSorted((a: TemplateMatch, b: TemplateMatch) => b.score - a.score);
+
+    // If dynamicGrid is not present or score is low, guarantee dynamicGrid is included at the end
+    const dynamicMatch = results.find((r) => r.template.id === "dynamic-grid");
+    if (dynamicMatch && !matched.some((m: TemplateMatch) => m.template.id === "dynamic-grid")) {
+        matched.push(dynamicMatch);
+    }
+
+    return matched;
+}
+
+export function getTopMatches(
+    fields: SchemaField[],
+    endpointPath: string = "",
+    limit = 4,
+): TemplateMatch[] {
+    return matchTemplates(fields, endpointPath).slice(0, limit);
+}
+
+export function getTemplateById(id: string): ComponentTemplate | undefined {
+    return COMPONENT_TEMPLATES.find((t) => t.id === id);
+}
+
+export function generateCode(
+    template: ComponentTemplate,
+    fields: SchemaField[],
+    endpointUrl: string,
+): string {
+    return template.code(fields, endpointUrl);
+}
+
+export function generateHtmlCode(
+    template: ComponentTemplate,
+    fields: SchemaField[],
+    endpointUrl: string,
+): string {
+    return template.htmlCode ? template.htmlCode(fields, endpointUrl) : "";
+}
+
+export * from "./types";
diff --git a/src/lib/component-templates/post-card.ts b/src/lib/component-templates/post-card.ts
new file mode 100644
index 0000000..f2f2f60
--- /dev/null
+++ b/src/lib/component-templates/post-card.ts
@@ -0,0 +1,113 @@
+import type { ComponentTemplate } from "./types";
+import {
+    findField,
+    buildFetchHook,
+    buildInterface,
+    buildHtmlFetchScript,
+    buildHtmlStyles,
+    safeGet,
+} from "./codegen-utils";
+
+export const postCardTemplate: ComponentTemplate = {
+    id: "post-card",
+    name: "Post Card",
+    description: "Cover image + title + excerpt list. Handles single or list response.",
+    requiredFields: ["title", "content"],
+    optionalFields: ["author", "coverImage", "publishedAt", "tags", "id"],
+    code: (fields, endpointUrl) => {
+        const idField = findField(fields, ["id", "postid", "uuid"]) ?? "id";
+        const titleField = findField(fields, ["title"]) ?? "title";
+        const contentField = findField(fields, ["content", "body", "paragraph"]) ?? "content";
+        const authorField = findField(fields, ["author", "fullname", "username"]);
+        const coverImageField = findField(fields, ["coverimage", "image", "thumbnail"]);
+        const publishedAtField = findField(fields, ["publishedat", "createdat", "date"]);
+
+        const interfaceLines = [
+            `${idField}: string;`,
+            `${titleField}: string;`,
+            `${contentField}: string;`,
+        ];
+        if (authorField) interfaceLines.push(`${authorField}: string;`);
+        if (coverImageField) interfaceLines.push(`${coverImageField}: string;`);
+        if (publishedAtField) interfaceLines.push(`${publishedAtField}: string;`);
+
+        return `import { useEffect, useState } from "react";
+
+${buildInterface("Post", interfaceLines)}
+
+${buildFetchHook("PostCard", endpointUrl, "Post")}
+
+export function PostCard() {
+  const { data, loading, error } = usePostCardData();
+
+  if (loading) return <div className="p-4 text-sm text-gray-500">Loading...</div>;
+  if (error) return <div className="p-4 text-sm text-red-500">Error: {error}</div>;
+  if (!data) return null;
+
+  const posts = Array.isArray(data) ? data : [data];
+
+  return (
+    <div className="grid gap-4 sm:grid-cols-2">
+      {posts.map((post) => (
+        <article key={post.${idField}} className="overflow-hidden rounded-lg border">
+${coverImageField ? `          <img src={post.${coverImageField}} alt={post.${titleField}} className="h-40 w-full object-cover" />\n` : ""}          <div className="p-4">
+            <h3 className="font-semibold">{post.${titleField}}</h3>
+            <p className="mt-1 line-clamp-3 text-sm text-gray-500">{post.${contentField}}</p>
+            <div className="mt-3 flex items-center justify-between text-xs text-gray-400">
+${authorField ? `              <span>{post.${authorField}}</span>\n` : ""}${publishedAtField ? `              <span>{post.${publishedAtField}}</span>\n` : ""}            </div>
+          </div>
+        </article>
+      ))}
+    </div>
+  );
+}
+`;
+    },
+    htmlCode: (fields, endpointUrl) => {
+        const titleField = findField(fields, ["title"]) ?? "title";
+        const contentField = findField(fields, ["content", "body", "paragraph"]) ?? "content";
+        const authorField = findField(fields, ["author", "fullname", "username"]);
+        const coverImageField = findField(fields, ["coverimage", "image", "thumbnail"]);
+        const publishedAtField = findField(fields, ["publishedat", "createdat", "date"]);
+
+        const coverHtml = coverImageField
+            ? `\${${safeGet(coverImageField)} ? \`<img class="cover" src="\${${safeGet(coverImageField)}}" alt="cover">\` : ''}`
+            : "";
+        const authorHtml = authorField
+            ? `\${${safeGet(authorField)} ? \`<span>\${${safeGet(authorField)}}</span>\` : ''}`
+            : "";
+        const dateHtml = publishedAtField
+            ? `\${${safeGet(publishedAtField)} ? \`<span>\${${safeGet(publishedAtField)}}</span>\` : ''}`
+            : "";
+
+        const renderFn = `item => \`<article class="article">
+  ${coverHtml}
+  <div class="article-body">
+    <div class="article-title">\${${safeGet(titleField)}}</div>
+    <div class="article-excerpt">\${${safeGet(contentField)}}</div>
+    <div class="article-footer">${authorHtml}${dateHtml}</div>
+  </div>
+</article>\``;
+
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Post Cards</title>
+  <style>
+${buildHtmlStyles()}
+  .grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
+  </style>
+</head>
+<body>
+  <p id="error"></p>
+  <div id="root" class="grid"></div>
+  <script type="module">
+${buildHtmlFetchScript(endpointUrl, renderFn)}
+  </script>
+</body>
+</html>
+`;
+    },
+};
diff --git a/src/lib/component-templates/product-card.ts b/src/lib/component-templates/product-card.ts
new file mode 100644
index 0000000..11cbba2
--- /dev/null
+++ b/src/lib/component-templates/product-card.ts
@@ -0,0 +1,178 @@
+import type { ComponentTemplate } from "./types";
+import {
+    findField,
+    buildFetchHook,
+    buildInterface,
+    buildHtmlFetchScript,
+    buildHtmlStyles,
+    safeGet,
+} from "./codegen-utils";
+
+export const productCardTemplate: ComponentTemplate = {
+    id: "product-card",
+    name: "Product Card",
+    description: "Image + product info card. Gracefully handles present/absent images & tags.",
+    requiredFields: ["name", "price", "productname", "amount"],
+    optionalFields: ["description", "category", "image", "inStock", "rating", "brand", "id"],
+    code: (fields, endpointUrl) => {
+        const idField = findField(fields, ["id", "productid", "uuid"]) ?? "id";
+        const nameField = findField(fields, ["name", "productname", "title"]) ?? "name";
+        const priceField = findField(fields, ["price", "amount", "cost"]) ?? "price";
+        const imageField = findField(fields, ["image", "photo", "picture", "thumbnail", "cover"]);
+        const descriptionField = findField(fields, [
+            "description",
+            "productdescription",
+            "summary",
+        ]);
+        const categoryField = findField(fields, ["category", "department", "genre"]);
+        const brandField = findField(fields, ["brand", "company", "manufacturer"]);
+        const inStockField = findField(fields, ["instock", "available", "isinstock"]);
+        const ratingField = findField(fields, ["rating", "score", "stars"]);
+
+        const interfaceLines = [
+            `${idField}: string;`,
+            `${nameField}: string;`,
+            `${priceField}: string | number;`,
+        ];
+        if (imageField) interfaceLines.push(`${imageField}: string;`);
+        if (descriptionField) interfaceLines.push(`${descriptionField}: string;`);
+        if (categoryField) interfaceLines.push(`${categoryField}: string;`);
+        if (brandField) interfaceLines.push(`${brandField}: string;`);
+        if (inStockField) interfaceLines.push(`${inStockField}: boolean;`);
+        if (ratingField) interfaceLines.push(`${ratingField}: string | number;`);
+
+        return `import { useEffect, useState } from "react";
+
+${buildInterface("Product", interfaceLines)}
+
+${buildFetchHook("ProductCard", endpointUrl, "Product")}
+
+export function ProductCard() {
+  const { data, loading, error } = useProductCardData();
+
+  if (loading) return <div className="p-4 text-sm text-gray-500">Loading...</div>;
+  if (error) return <div className="p-4 text-sm text-red-500">Error: {error}</div>;
+  if (!data) return null;
+
+  const products = Array.isArray(data) ? data : [data];
+
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      {products.map((product) => (
+        <div key={product.${idField}} className="flex flex-col justify-between overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm hover:shadow-md transition-shadow">
+          <div>
+${
+    imageField
+        ? `            {product.${imageField} ? (
+              <img src={product.${imageField}} alt={product.${nameField}} className="h-44 w-full object-cover" />
+            ) : (
+              <div className="flex h-36 w-full items-center justify-center bg-zinc-100 dark:bg-zinc-800 text-3xl text-zinc-400">
+                📦
+              </div>
+            )}`
+        : `            <div className="flex h-24 w-full items-center justify-center bg-zinc-100 dark:bg-zinc-800 text-3xl text-zinc-400">
+              📦
+            </div>`
+}
+            <div className="p-4 space-y-2">
+              <div className="flex items-center justify-between gap-2">
+${categoryField ? `                {product.${categoryField} && <span className="text-[10px] font-mono font-semibold uppercase tracking-wider text-muted-foreground">{product.${categoryField}}</span>}\n` : ""}${brandField ? `                {product.${brandField} && <span className="text-[10px] font-mono text-zinc-400">{product.${brandField}}</span>}\n` : ""}              </div>
+              <p className="font-semibold text-base text-zinc-900 dark:text-zinc-100 truncate">{product.${nameField}}</p>
+${descriptionField ? `              {product.${descriptionField} && <p className="line-clamp-2 text-xs text-zinc-500 dark:text-zinc-400">{product.${descriptionField}}</p>}\n` : ""}            </div>
+          </div>
+
+          <div className="px-4 pb-4 pt-2 flex items-center justify-between border-t border-zinc-100 dark:border-zinc-800">
+            <div>
+              <span className="text-lg font-bold text-zinc-900 dark:text-zinc-100">\${product.${priceField}}</span>
+${ratingField ? `              {product.${ratingField} && <span className="ml-2 text-xs text-amber-500">Rating: {product.${ratingField}}</span>}\n` : ""}            </div>
+
+${
+    inStockField
+        ? `            {product.${inStockField} !== undefined && (
+              <span className={product.${inStockField} ? "px-2 py-0.5 text-[10px] font-mono font-semibold rounded bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300" : "px-2 py-0.5 text-[10px] font-mono font-semibold rounded bg-rose-100 text-rose-800 dark:bg-rose-950 dark:text-rose-300"}>
+                {product.${inStockField} ? "In stock" : "Out of stock"}
+              </span>
+            )}\n`
+        : ""
+}          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+`;
+    },
+    htmlCode: (fields, endpointUrl) => {
+        const nameField = findField(fields, ["name", "productname", "title"]) ?? "name";
+        const priceField = findField(fields, ["price", "amount", "cost"]) ?? "price";
+        const imageField = findField(fields, ["image", "photo", "picture", "thumbnail", "cover"]);
+        const descriptionField = findField(fields, [
+            "description",
+            "productdescription",
+            "summary",
+        ]);
+        const categoryField = findField(fields, ["category", "department", "genre"]);
+        const brandField = findField(fields, ["brand", "company", "manufacturer"]);
+        const inStockField = findField(fields, ["instock", "available", "isinstock"]);
+        const ratingField = findField(fields, ["rating", "score", "stars"]);
+
+        const imgHtml = imageField
+            ? `\${${safeGet(imageField)} ? \`<img class="product-img" src="\${${safeGet(imageField)}}" alt="product">\` : '<div class="product-img-placeholder">📦</div>'}`
+            : `<div class="product-img-placeholder">📦</div>`;
+
+        const categoryBadge = categoryField
+            ? `\${${safeGet(categoryField)} ? \`<span class="badge badge-zinc">\${${safeGet(categoryField)}}</span>\` : ''}`
+            : "";
+        const brandSpan = brandField
+            ? `\${${safeGet(brandField)} ? \`<span style="font-size:.75rem;color:var(--muted)">\${${safeGet(brandField)}}</span>\` : ''}`
+            : "";
+        const descSpan = descriptionField
+            ? `\${${safeGet(descriptionField)} ? \`<div class="card-desc" style="padding:0 .85rem">\${${safeGet(descriptionField)}}</div>\` : ''}`
+            : "";
+        const ratingSpan = ratingField
+            ? `\${${safeGet(ratingField)} ? \`<span style="font-size:.78rem;color:#f59e0b">★ \${${safeGet(ratingField)}}</span>\` : ''}`
+            : "";
+        const inStockBadge = inStockField
+            ? `\${item[${JSON.stringify(inStockField)}] !== undefined ? \`<span class="badge \${item[${JSON.stringify(inStockField)}] ? 'badge-emerald' : 'badge-rose'}">\${item[${JSON.stringify(inStockField)}] ? 'In stock' : 'Out of stock'}</span>\` : ''}`
+            : "";
+
+        const renderFn = `item => \`<div class="card" style="padding:0;overflow:hidden">
+  ${imgHtml}
+  <div class="product-body">
+    <div style="display:flex;justify-content:space-between;align-items:center;gap:.5rem">
+      ${categoryBadge}
+      ${brandSpan}
+    </div>
+    <div class="card-title" style="padding:0">\${${safeGet(nameField)}}</div>
+    ${descSpan}
+  </div>
+  <div class="product-footer">
+    <div>
+      <span class="price">$\${${safeGet(priceField)}}</span>
+      ${ratingSpan}
+    </div>
+    ${inStockBadge}
+  </div>
+</div>\``;
+
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Product Cards</title>
+  <style>
+${buildHtmlStyles()}
+  </style>
+</head>
+<body>
+  <p id="error"></p>
+  <div id="root" class="grid"></div>
+  <script type="module">
+${buildHtmlFetchScript(endpointUrl, renderFn)}
+  </script>
+</body>
+</html>
+`;
+    },
+};
diff --git a/src/lib/component-templates/todo-list.ts b/src/lib/component-templates/todo-list.ts
new file mode 100644
index 0000000..0f9180b
--- /dev/null
+++ b/src/lib/component-templates/todo-list.ts
@@ -0,0 +1,145 @@
+import type { ComponentTemplate } from "./types";
+import {
+    findField,
+    buildFetchHook,
+    buildInterface,
+    buildHtmlFetchScript,
+    buildHtmlStyles,
+    safeGet,
+} from "./codegen-utils";
+
+export const todoListTemplate: ComponentTemplate = {
+    id: "todo-list",
+    name: "Todo List",
+    description: "Checkbox list adaptively rendering title, status, priority, dates & tags.",
+    requiredFields: ["title", "completed", "task", "done"],
+    optionalFields: ["dueDate", "priority", "category", "description", "assignee", "id"],
+    code: (fields, endpointUrl) => {
+        const idField = findField(fields, ["id", "todoid", "uuid"]) ?? "id";
+        const titleField = findField(fields, ["title", "task", "name", "summary"]) ?? "title";
+        const completedField =
+            findField(fields, ["completed", "done", "isdone", "iscompleted"]) ?? "completed";
+        const dueDateField = findField(fields, ["duedate", "deadline", "date", "due"]);
+        const priorityField = findField(fields, ["priority", "level", "urgency"]);
+        const categoryField = findField(fields, ["category", "tag", "project", "label"]);
+        const assigneeField = findField(fields, ["assignee", "assignedto", "user", "owner"]);
+        const descriptionField = findField(fields, ["description", "details", "notes"]);
+
+        const interfaceLines = [
+            `${idField}: string;`,
+            `${titleField}: string;`,
+            `${completedField}: boolean;`,
+        ];
+        if (dueDateField) interfaceLines.push(`${dueDateField}: string;`);
+        if (priorityField) interfaceLines.push(`${priorityField}: string;`);
+        if (categoryField) interfaceLines.push(`${categoryField}: string;`);
+        if (assigneeField) interfaceLines.push(`${assigneeField}: string;`);
+        if (descriptionField) interfaceLines.push(`${descriptionField}: string;`);
+
+        return `import { useEffect, useState } from "react";
+
+${buildInterface("Todo", interfaceLines)}
+
+${buildFetchHook("TodoList", endpointUrl, "Todo")}
+
+export function TodoList() {
+  const { data, loading, error } = useTodoListData();
+
+  if (loading) return <div className="p-4 text-sm text-gray-500">Loading...</div>;
+  if (error) return <div className="p-4 text-sm text-red-500">Error: {error}</div>;
+  if (!data) return null;
+
+  const todos = Array.isArray(data) ? data : [data];
+
+  return (
+    <ul className="divide-y divide-zinc-200 dark:divide-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 overflow-hidden">
+      {todos.map((todo) => (
+        <li key={todo.${idField}} className="flex flex-col gap-2 p-3 hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors">
+          <div className="flex items-center gap-3">
+            <input
+              type="checkbox"
+              checked={Boolean(todo.${completedField})}
+              readOnly
+              className="h-4 w-4 rounded border-zinc-300 text-primary focus:ring-primary cursor-pointer"
+            />
+            <span className={todo.${completedField} ? "flex-1 font-medium text-zinc-400 line-through text-sm" : "flex-1 font-medium text-zinc-900 dark:text-zinc-100 text-sm"}>
+              {todo.${titleField}}
+            </span>
+${priorityField ? `            {todo.${priorityField} && <span className="px-2 py-0.5 rounded text-[10px] font-mono uppercase font-semibold bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300">{todo.${priorityField}}</span>}\n` : ""}${categoryField ? `            {todo.${categoryField} && <span className="px-2 py-0.5 rounded text-[10px] font-mono bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300">{todo.${categoryField}}</span>}\n` : ""}          </div>
+
+${
+    descriptionField
+        ? `          {todo.${descriptionField} && (
+            <p className="ml-7 text-xs text-zinc-500 dark:text-zinc-400 line-clamp-2">{todo.${descriptionField}}</p>
+          )}\n`
+        : ""
+}${
+            dueDateField || assigneeField
+                ? `          <div className="ml-7 flex items-center gap-4 text-xs text-zinc-400">
+${dueDateField ? `            {todo.${dueDateField} && <span>Due: {todo.${dueDateField}}</span>}\n` : ""}${assigneeField ? `            {todo.${assigneeField} && <span>Assignee: {todo.${assigneeField}}</span>}\n` : ""}          </div>\n`
+                : ""
+        }        </li>
+      ))}
+    </ul>
+  );
+}
+`;
+    },
+    htmlCode: (fields, endpointUrl) => {
+        const titleField = findField(fields, ["title", "task", "name", "summary"]) ?? "title";
+        const completedField =
+            findField(fields, ["completed", "done", "isdone", "iscompleted"]) ?? "completed";
+        const dueDateField = findField(fields, ["duedate", "deadline", "date", "due"]);
+        const priorityField = findField(fields, ["priority", "level", "urgency"]);
+        const categoryField = findField(fields, ["category", "tag", "project", "label"]);
+        const descriptionField = findField(fields, ["description", "details", "notes"]);
+        const assigneeField = findField(fields, ["assignee", "assignedto", "user", "owner"]);
+
+        const priorityBadge = priorityField
+            ? `\${${safeGet(priorityField)} ? \`<span class="badge badge-amber">\${${safeGet(priorityField)}}</span>\` : ''}`
+            : "";
+        const categoryBadge = categoryField
+            ? `\${${safeGet(categoryField)} ? \`<span class="badge badge-zinc">\${${safeGet(categoryField)}}</span>\` : ''}`
+            : "";
+        const descHtml = descriptionField
+            ? `\${${safeGet(descriptionField)} ? \`<div style="margin-left:1.6rem;font-size:.78rem;color:var(--muted)">\${${safeGet(descriptionField)}}</div>\` : ''}`
+            : "";
+        const dueDateHtml = dueDateField
+            ? `\${${safeGet(dueDateField)} ? \`<span style="font-size:.72rem;color:var(--muted)">Due: \${${safeGet(dueDateField)}}</span>\` : ''}`
+            : "";
+        const assigneeHtml = assigneeField
+            ? `\${${safeGet(assigneeField)} ? \`<span style="font-size:.72rem;color:var(--muted)">Assignee: \${${safeGet(assigneeField)}}</span>\` : ''}`
+            : "";
+
+        const renderFn = `item => \`<li class="todo-item">
+  <div class="todo-row">
+    <input type="checkbox" \${item[${JSON.stringify(completedField)}] ? 'checked' : ''} onclick="return false" style="width:16px;height:16px;flex-shrink:0">
+    <span class="todo-title \${item[${JSON.stringify(completedField)}] ? 'done' : ''}">\${${safeGet(titleField)}}</span>
+    ${priorityBadge}
+    ${categoryBadge}
+  </div>
+  ${descHtml}
+  <div style="margin-left:1.6rem;display:flex;gap:.75rem">${dueDateHtml}${assigneeHtml}</div>
+</li>\``;
+
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Todo List</title>
+  <style>
+${buildHtmlStyles()}
+  </style>
+</head>
+<body>
+  <p id="error"></p>
+  <ul id="root" class="todo-list"></ul>
+  <script type="module">
+${buildHtmlFetchScript(endpointUrl, renderFn)}
+  </script>
+</body>
+</html>
+`;
+    },
+};
diff --git a/src/lib/component-templates/transaction-row.ts b/src/lib/component-templates/transaction-row.ts
new file mode 100644
index 0000000..ebe9bac
--- /dev/null
+++ b/src/lib/component-templates/transaction-row.ts
@@ -0,0 +1,162 @@
+import type { ComponentTemplate } from "./types";
+import {
+    findField,
+    buildFetchHook,
+    buildInterface,
+    buildHtmlFetchScript,
+    buildHtmlStyles,
+    safeGet,
+} from "./codegen-utils";
+
+export const transactionRowTemplate: ComponentTemplate = {
+    id: "transaction-row",
+    name: "Transaction Statement Table",
+    description: "Account statement / financial log table row list adapting to present columns.",
+    requiredFields: ["amount", "date", "price"],
+    optionalFields: [
+        "transactionId",
+        "currency",
+        "status",
+        "description",
+        "category",
+        "merchant",
+        "id",
+    ],
+    code: (fields, endpointUrl) => {
+        const idField = findField(fields, ["id", "transactionid", "uuid"]) ?? "id";
+        const amountField = findField(fields, ["amount", "price", "value", "cost"]) ?? "amount";
+        const dateField = findField(fields, ["date", "createdat", "timestamp", "time"]) ?? "date";
+        const currencyField = findField(fields, ["currency", "currencycode", "symbol"]);
+        const statusField = findField(fields, ["status", "state"]);
+        const descriptionField = findField(fields, ["description", "note", "title", "details"]);
+        const merchantField = findField(fields, ["merchant", "payee", "company", "vendor"]);
+        const categoryField = findField(fields, ["category", "type", "department"]);
+
+        const interfaceLines = [
+            `${idField}: string;`,
+            `${amountField}: string | number;`,
+            `${dateField}: string;`,
+        ];
+        if (currencyField) interfaceLines.push(`${currencyField}: string;`);
+        if (statusField) interfaceLines.push(`${statusField}: string;`);
+        if (descriptionField) interfaceLines.push(`${descriptionField}: string;`);
+        if (merchantField) interfaceLines.push(`${merchantField}: string;`);
+        if (categoryField) interfaceLines.push(`${categoryField}: string;`);
+
+        return `import { useEffect, useState } from "react";
+
+${buildInterface("Transaction", interfaceLines)}
+
+${buildFetchHook("TransactionRow", endpointUrl, "Transaction")}
+
+export function TransactionTable() {
+  const { data, loading, error } = useTransactionRowData();
+
+  if (loading) return <div className="p-4 text-sm text-gray-500 font-mono">Loading...</div>;
+  if (error) return <div className="p-4 text-sm text-red-500 font-mono">Error: {error}</div>;
+  if (!data) return null;
+
+  const transactions = Array.isArray(data) ? data : [data];
+
+  return (
+    <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 overflow-hidden shadow-sm">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800/50 text-left text-xs font-mono font-semibold uppercase tracking-wider text-zinc-500">
+            <th className="py-3 px-4">Date</th>
+${merchantField ? `            <th className="py-3 px-4">Merchant / Payee</th>\n` : ""}${descriptionField ? `            <th className="py-3 px-4">Description</th>\n` : ""}${categoryField ? `            <th className="py-3 px-4">Category</th>\n` : ""}${statusField ? `            <th className="py-3 px-4">Status</th>\n` : ""}            <th className="py-3 px-4 text-right">Amount</th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-zinc-100 dark:divide-zinc-800/60 font-mono">
+          {transactions.map((tx) => (
+            <tr key={tx.${idField}} className="hover:bg-zinc-50 dark:hover:bg-zinc-800/30 transition-colors">
+              <td className="py-3 px-4 text-xs text-zinc-500">{tx.${dateField}}</td>
+${merchantField ? `              <td className="py-3 px-4 font-sans font-medium text-zinc-900 dark:text-zinc-100">{tx.${merchantField}}</td>\n` : ""}${descriptionField ? `              <td className="py-3 px-4 text-xs text-zinc-600 dark:text-zinc-400">{tx.${descriptionField}}</td>\n` : ""}${categoryField ? `              <td className="py-3 px-4 text-xs"><span className="px-2 py-0.5 rounded bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300">{tx.${categoryField}}</span></td>\n` : ""}${
+            statusField
+                ? `              <td className="py-3 px-4 text-xs">
+                {tx.${statusField} && (
+                  <span className="px-2 py-0.5 rounded uppercase font-semibold text-[10px] bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">
+                    {tx.${statusField}}
+                  </span>
+                )}
+              </td>\n`
+                : ""
+        }              <td className="py-3 px-4 text-right font-bold text-zinc-900 dark:text-zinc-100">
+                {tx.${amountField}}${currencyField ? ` {tx.${currencyField}}` : ""}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+`;
+    },
+    htmlCode: (fields, endpointUrl) => {
+        const amountField = findField(fields, ["amount", "price", "value", "cost"]) ?? "amount";
+        const dateField = findField(fields, ["date", "createdat", "timestamp", "time"]) ?? "date";
+        const currencyField = findField(fields, ["currency", "currencycode", "symbol"]);
+        const statusField = findField(fields, ["status", "state"]);
+        const descriptionField = findField(fields, ["description", "note", "title", "details"]);
+        const merchantField = findField(fields, ["merchant", "payee", "company", "vendor"]);
+        const categoryField = findField(fields, ["category", "type", "department"]);
+
+        const merchantTh = merchantField ? `<th>Merchant</th>` : "";
+        const descTh = descriptionField ? `<th>Description</th>` : "";
+        const categoryTh = categoryField ? `<th>Category</th>` : "";
+        const statusTh = statusField ? `<th>Status</th>` : "";
+
+        const merchantTd = merchantField
+            ? `\${${safeGet(merchantField)} ? \`<td style="font-weight:500">\${${safeGet(merchantField)}}</td>\` : '<td></td>'}`
+            : "";
+        const descTd = descriptionField
+            ? `\${${safeGet(descriptionField)} ? \`<td style="color:var(--muted);font-size:.8rem">\${${safeGet(descriptionField)}}</td>\` : '<td></td>'}`
+            : "";
+        const categoryTd = categoryField
+            ? `\${${safeGet(categoryField)} ? \`<td><span class="badge badge-zinc">\${${safeGet(categoryField)}}</span></td>\` : '<td></td>'}`
+            : "";
+        const statusTd = statusField
+            ? `\${${safeGet(statusField)} ? \`<td><span class="badge badge-zinc" style="text-transform:uppercase">\${${safeGet(statusField)}}</span></td>\` : '<td></td>'}`
+            : "";
+        const amountDisplay = currencyField
+            ? `\${${safeGet(amountField)}} \${${safeGet(currencyField)}}`
+            : `\${${safeGet(amountField)}}`;
+
+        const renderFn = `item => \`<tr>
+  <td style="font-size:.8rem;color:var(--muted)">\${${safeGet(dateField)}}</td>
+  ${merchantTd}
+  ${descTd}
+  ${categoryTd}
+  ${statusTd}
+  <td class="amount">${amountDisplay}</td>
+</tr>\``;
+
+        const theadCols = `<th>Date</th>${merchantTh}${descTh}${categoryTh}${statusTh}<th style="text-align:right">Amount</th>`;
+
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Transaction Table</title>
+  <style>
+${buildHtmlStyles()}
+  </style>
+</head>
+<body>
+  <p id="error"></p>
+  <div style="border:1px solid var(--border);border-radius:var(--radius);overflow:hidden">
+    <table>
+      <thead><tr>${theadCols}</tr></thead>
+      <tbody id="root"></tbody>
+    </table>
+  </div>
+  <script type="module">
+${buildHtmlFetchScript(endpointUrl, renderFn)}
+  </script>
+</body>
+</html>
+`;
+    },
+};
diff --git a/src/lib/component-templates/types.ts b/src/lib/component-templates/types.ts
new file mode 100644
index 0000000..3503e4c
--- /dev/null
+++ b/src/lib/component-templates/types.ts
@@ -0,0 +1,21 @@
+import type { SchemaField } from "~/lib/faker-options";
+
+export interface ComponentTemplate {
+    id: string;
+    name: string;
+    description: string;
+    /** fieldName candidates that strongly indicate this template (case/underscore-insensitive) */
+    requiredFields: string[];
+    /** fieldName candidates that boost match confidence but aren't essential */
+    optionalFields: string[];
+    /** generates the full .tsx source as a string, using the user's actual field names */
+    code: (fields: SchemaField[], endpointUrl: string) => string;
+    /** generates a standalone .html file (inline <style> + <script>) from the user's actual field names */
+    htmlCode?: (fields: SchemaField[], endpointUrl: string) => string;
+}
+
+export interface TemplateMatch {
+    template: ComponentTemplate;
+    score: number;
+    matchedFields: string[];
+}
diff --git a/src/lib/component-templates/user-card.ts b/src/lib/component-templates/user-card.ts
new file mode 100644
index 0000000..66f44fa
--- /dev/null
+++ b/src/lib/component-templates/user-card.ts
@@ -0,0 +1,149 @@
+import type { ComponentTemplate } from "./types";
+import {
+    findField,
+    buildFetchHook,
+    buildInterface,
+    buildHtmlFetchScript,
+    buildHtmlStyles,
+    safeGet,
+} from "./codegen-utils";
+
+export const userCardTemplate: ComponentTemplate = {
+    id: "user-card",
+    name: "User Card",
+    description: "Avatar + profile details grid. Adapts to present fields.",
+    requiredFields: ["username", "fullName", "name"],
+    optionalFields: ["email", "jobTitle", "phone", "bio", "avatar", "id"],
+    code: (fields, endpointUrl) => {
+        const idField = findField(fields, ["id", "userid", "uuid"]) ?? "id";
+        const usernameField = findField(fields, ["username", "handle"]);
+        const fullNameField = findField(fields, ["fullname", "name", "displayname"]) ?? "name";
+        const avatarField = findField(fields, ["avatar", "image", "photo", "picture"]);
+        const emailField = findField(fields, ["email"]);
+        const jobTitleField = findField(fields, ["jobtitle", "role", "title"]);
+        const phoneField = findField(fields, ["phone", "phonenumber", "mobile", "cell"]);
+        const bioField = findField(fields, ["bio", "about", "description"]);
+
+        const interfaceLines = [`${idField}: string;`, `${fullNameField}: string;`];
+        if (usernameField) interfaceLines.push(`${usernameField}: string;`);
+        if (avatarField) interfaceLines.push(`${avatarField}: string;`);
+        if (emailField) interfaceLines.push(`${emailField}: string;`);
+        if (jobTitleField) interfaceLines.push(`${jobTitleField}: string;`);
+        if (phoneField) interfaceLines.push(`${phoneField}: string;`);
+        if (bioField) interfaceLines.push(`${bioField}: string;`);
+
+        return `import { useEffect, useState } from "react";
+
+${buildInterface("User", interfaceLines)}
+
+${buildFetchHook("UserCard", endpointUrl, "User")}
+
+export function UserCard() {
+  const { data, loading, error } = useUserCardData();
+
+  if (loading) return <div className="p-4 text-sm text-gray-500">Loading...</div>;
+  if (error) return <div className="p-4 text-sm text-red-500">Error: {error}</div>;
+  if (!data) return null;
+
+  const users = Array.isArray(data) ? data : [data];
+
+  return (
+    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+      {users.map((user) => (
+        <div key={user.${idField}} className="flex flex-col gap-3 rounded-lg border p-4 shadow-sm bg-white dark:bg-zinc-900">
+          <div className="flex items-center gap-3">
+${
+    avatarField
+        ? `            <img
+              src={user.${avatarField}}
+              alt={user.${fullNameField}}
+              className="h-12 w-12 rounded-full object-cover shrink-0"
+            />`
+        : `            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-zinc-200 dark:bg-zinc-700 font-semibold text-zinc-600 dark:text-zinc-200 shrink-0">
+              {user.${fullNameField}?.charAt(0) || "U"}
+            </div>`
+}
+            <div className="min-w-0 flex-1">
+              <p className="truncate font-medium text-base">{user.${fullNameField}}</p>
+${usernameField ? `              <p className="truncate text-sm text-gray-500">@{user.${usernameField}}</p>\n` : ""}${jobTitleField ? `              <p className="truncate text-xs text-gray-400">{user.${jobTitleField}}</p>\n` : ""}            </div>
+          </div>
+${bioField ? `          <p className="text-xs text-gray-600 dark:text-gray-400 line-clamp-2">{user.${bioField}}</p>\n` : ""}${
+            emailField || phoneField
+                ? `          <div className="pt-2 border-t text-xs text-gray-500 space-y-1">
+${emailField ? `            {user.${emailField} && <p className="truncate">Email: {user.${emailField}}</p>}\n` : ""}${phoneField ? `            {user.${phoneField} && <p className="truncate">Phone: {user.${phoneField}}</p>}\n` : ""}          </div>\n`
+                : ""
+        }        </div>
+      ))}
+    </div>
+  );
+}
+`;
+    },
+    htmlCode: (fields, endpointUrl) => {
+        const fullNameField = findField(fields, ["fullname", "name", "displayname"]) ?? "name";
+        const usernameField = findField(fields, ["username", "handle"]);
+        const avatarField = findField(fields, ["avatar", "image", "photo", "picture"]);
+        const emailField = findField(fields, ["email"]);
+        const jobTitleField = findField(fields, ["jobtitle", "role", "title"]);
+        const phoneField = findField(fields, ["phone", "phonenumber", "mobile", "cell"]);
+        const bioField = findField(fields, ["bio", "about", "description"]);
+
+        const avatarHtml = avatarField
+            ? `\${${safeGet(avatarField)} ? \`<img class="avatar" src="\${${safeGet(avatarField)}}" alt="\${${safeGet(fullNameField)}}">\` : \`<div class="avatar-placeholder">\${String(${safeGet(fullNameField)}).charAt(0).toUpperCase() || 'U'}</div>\`}`
+            : `<div class="avatar-placeholder">\${String(${safeGet(fullNameField)}).charAt(0).toUpperCase() || 'U'}</div>`;
+
+        const extraRows = [
+            usernameField
+                ? `\${${safeGet(usernameField)} ? \`<div class="detail-row"><span class="detail-key">@username:</span><span>\${${safeGet(usernameField)}}</span></div>\` : ''}`
+                : "",
+            jobTitleField
+                ? `\${${safeGet(jobTitleField)} ? \`<div class="detail-row"><span class="detail-key">role:</span><span>\${${safeGet(jobTitleField)}}</span></div>\` : ''}`
+                : "",
+            emailField
+                ? `\${${safeGet(emailField)} ? \`<div class="detail-row"><span class="detail-key">email:</span><span>\${${safeGet(emailField)}}</span></div>\` : ''}`
+                : "",
+            phoneField
+                ? `\${${safeGet(phoneField)} ? \`<div class="detail-row"><span class="detail-key">phone:</span><span>\${${safeGet(phoneField)}}</span></div>\` : ''}`
+                : "",
+        ]
+            .filter(Boolean)
+            .join("\n      ");
+
+        const bioHtml = bioField
+            ? `\${${safeGet(bioField)} ? \`<div class="card-desc">\${${safeGet(bioField)}}</div>\` : ''}`
+            : "";
+
+        const renderFn = `item => \`<div class="card">
+  <div class="card-header">
+    ${avatarHtml}
+    <div style="min-width:0;flex:1">
+      <div class="card-title">\${${safeGet(fullNameField)}}</div>
+    </div>
+  </div>
+  ${bioHtml}
+  <div class="details">
+    ${extraRows}
+  </div>
+</div>\``;
+
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>User Cards</title>
+  <style>
+${buildHtmlStyles()}
+  </style>
+</head>
+<body>
+  <p id="error"></p>
+  <div id="root" class="grid"></div>
+  <script type="module">
+${buildHtmlFetchScript(endpointUrl, renderFn)}
+  </script>
+</body>
+</html>
+`;
+    },
+};
diff --git a/src/lib/endpoint-data-store.ts b/src/lib/endpoint-data-store.ts
index b0f6f9e..b8cd264 100644
--- a/src/lib/endpoint-data-store.ts
+++ b/src/lib/endpoint-data-store.ts
@@ -38,7 +38,7 @@ export function generateAndSaveData(
     count: number,
 ): unknown {
     const filePath = getEndpointFilePath(projectId, endpointId);
-    const data = resolveResponseData(schema, count);
+    const data = resolveResponseData(schema, count, projectId);
     fs.writeFileSync(filePath, JSON.stringify(data, null, 2), "utf-8");
     return data;
 }
diff --git a/src/modules/workspace/ui/components/dashboard/schemaBuilder/schema-utils.ts b/src/lib/faker-options.ts
similarity index 76%
rename from src/modules/workspace/ui/components/dashboard/schemaBuilder/schema-utils.ts
rename to src/lib/faker-options.ts
index f3c4412..9417b93 100644
--- a/src/modules/workspace/ui/components/dashboard/schemaBuilder/schema-utils.ts
+++ b/src/lib/faker-options.ts
@@ -198,30 +198,70 @@ export interface SchemaField {
 }
 
 export function normalizeStoredFieldType(value: unknown): string {
-    if (typeof value !== "string") return "$faker.string.uuid";
-    if (value.startsWith("$faker.")) return value;
+    if (typeof value === "string") {
+        if (value.startsWith("$faker.")) return value;
 
-    const legacyTypeMap: Record<string, string> = {
-        uuid: "$faker.string.uuid",
-        fullName: "$faker.person.fullName",
-        username: "$faker.internet.username",
-        paragraph: "$faker.lorem.paragraph",
-        date: "$faker.date.anytime",
-        email: "$faker.internet.email",
-        phoneNumber: "$faker.phone.number",
-        city: "$faker.location.city",
-        companyName: "$faker.company.name",
-        productName: "$faker.commerce.productName",
-        price: "$faker.commerce.price",
-        number: "$faker.number.int",
-        boolean: "$faker.datatype.boolean",
-    };
+        const legacyTypeMap: Record<string, string> = {
+            uuid: "$faker.string.uuid",
+            fullName: "$faker.person.fullName",
+            username: "$faker.internet.username",
+            paragraph: "$faker.lorem.paragraph",
+            date: "$faker.date.anytime",
+            email: "$faker.internet.email",
+            phoneNumber: "$faker.phone.number",
+            city: "$faker.location.city",
+            companyName: "$faker.company.name",
+            productName: "$faker.commerce.productName",
+            price: "$faker.commerce.price",
+            number: "$faker.number.int",
+            boolean: "$faker.datatype.boolean",
+        };
 
-    return legacyTypeMap[value] ?? "$faker.string.uuid";
+        return legacyTypeMap[value] ?? value;
+    }
+    return JSON.stringify(value);
 }
 
-export function fieldsFromSchema(schema: unknown): SchemaField[] {
-    if (!schema || typeof schema !== "object" || Array.isArray(schema)) {
+export function fieldsFromSchema(schema: unknown, prefix = ""): SchemaField[] {
+    if (!schema || typeof schema !== "object") {
+        return [];
+    }
+
+    if (Array.isArray(schema)) {
+        if (schema.length > 0) {
+            return fieldsFromSchema(schema[0], prefix);
+        }
+        return [];
+    }
+
+    // Handle {$array: schema} wrapper format
+    if ("$array" in schema && schema.$array) {
+        return fieldsFromSchema((schema as { $array: unknown }).$array, prefix);
+    }
+
+    const fields: SchemaField[] = [];
+
+    for (const [key, val] of Object.entries(schema)) {
+        const fullPath = prefix ? `${prefix}.${key}` : key;
+        if (val && typeof val === "object" && !Array.isArray(val) && !("$array" in val)) {
+            // Nested object
+            fields.push(...fieldsFromSchema(val, fullPath));
+        } else if (val && typeof val === "object" && "$array" in val) {
+            // Nested array object
+            fields.push(...fieldsFromSchema((val as { $array: unknown }).$array, fullPath));
+        } else if (Array.isArray(val) && val.length > 0) {
+            // Primitive array
+            fields.push(...fieldsFromSchema(val[0], fullPath));
+        } else {
+            fields.push({
+                id: crypto.randomUUID(),
+                fieldName: fullPath,
+                dataType: normalizeStoredFieldType(val),
+            });
+        }
+    }
+
+    if (fields.length === 0 && !prefix) {
         return [
             {
                 id: crypto.randomUUID(),
@@ -231,21 +271,7 @@ export function fieldsFromSchema(schema: unknown): SchemaField[] {
         ];
     }
 
-    const fields = Object.entries(schema).map(([fieldName, dataType]) => ({
-        id: crypto.randomUUID(),
-        fieldName,
-        dataType: normalizeStoredFieldType(dataType),
-    }));
-
-    return fields.length > 0
-        ? fields
-        : [
-              {
-                  id: crypto.randomUUID(),
-                  fieldName: "",
-                  dataType: "$faker.string.uuid",
-              },
-          ];
+    return fields;
 }
 
 export function buildSchema(schemaFields: SchemaField[]): Record<string, string> {
diff --git a/src/lib/schema-resolver.test.ts b/src/lib/schema-resolver.test.ts
index f9c058a..2cff86b 100644
--- a/src/lib/schema-resolver.test.ts
+++ b/src/lib/schema-resolver.test.ts
@@ -178,4 +178,11 @@ describe("resolveResponseData", () => {
         const ids = result.map((r) => r.id);
         expect(new Set(ids).size).toBe(5);
     });
+
+    it("produces identical output when given the same string seed 'voidend'", () => {
+        const schema = { id: "$faker.string.uuid", email: "$faker.internet.email" };
+        const res1 = resolveResponseData(schema, 3, "voidend");
+        const res2 = resolveResponseData(schema, 3, "voidend");
+        expect(res1).toEqual(res2);
+    });
 });
diff --git a/src/lib/schema-resolver.ts b/src/lib/schema-resolver.ts
index ff2b482..637ebad 100644
--- a/src/lib/schema-resolver.ts
+++ b/src/lib/schema-resolver.ts
@@ -1,5 +1,14 @@
 import { faker } from "@faker-js/faker";
 
+export function stringToSeed(str: string): number {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = (hash << 5) - hash + str.charCodeAt(i);
+        hash |= 0;
+    }
+    return Math.abs(hash);
+}
+
 export function resolveSchema(schema: unknown): unknown {
     if (typeof schema === "string" && schema.startsWith("$faker.")) {
         const path = schema.slice(7).split(".");
@@ -26,7 +35,17 @@ export function resolveSchema(schema: unknown): unknown {
 }
 
 /** Mirrors server-side response generation in endpoint-data-store. */
-export function resolveResponseData(schema: unknown, count: number): unknown {
+export function resolveResponseData(
+    schema: unknown,
+    count: number,
+    seed: string | number = "voidend",
+): unknown {
+    if (typeof seed === "string") {
+        faker.seed(stringToSeed(seed));
+    } else {
+        faker.seed(seed);
+    }
+
     return count > 1
         ? Array.from({ length: count }, () => resolveSchema(schema))
         : resolveSchema(schema);
diff --git a/src/modules/workspace/ui/components/dashboard/endpointBar.tsx b/src/modules/workspace/ui/components/dashboard/endpointBar.tsx
index 171ed74..194db29 100644
--- a/src/modules/workspace/ui/components/dashboard/endpointBar.tsx
+++ b/src/modules/workspace/ui/components/dashboard/endpointBar.tsx
@@ -208,6 +208,7 @@ export const EndpointBar = ({ projectId, mockOrigin, endpoint, project }: Endpoi
                         {endpoint && (
                             <SchemaBuilder
                                 endpoint={endpoint}
+                                projectId={projectId}
                                 initialTab={activeTab}
                                 onSuccess={() => setIsSchemaBuilderOpen(false)}
                             />
diff --git a/src/modules/workspace/ui/components/dashboard/schemaBuilder.tsx b/src/modules/workspace/ui/components/dashboard/schemaBuilder.tsx
index a55fcb7..3a8264b 100644
--- a/src/modules/workspace/ui/components/dashboard/schemaBuilder.tsx
+++ b/src/modules/workspace/ui/components/dashboard/schemaBuilder.tsx
@@ -24,18 +24,19 @@ import {
     SelectValue,
 } from "~/components/ui/select";
 import { useUpdateEndpoint } from "~/hooks/use-endpoints";
-import { resolveSchema } from "~/lib/schema-resolver";
+import { resolveResponseData } from "~/lib/schema-resolver";
 import type { HttpMethod } from "../sidebar/types";
 import {
     FAKER_OPTIONS,
     type SchemaField,
     fieldsFromSchema,
     buildSchema,
-} from "./schemaBuilder/schema-utils";
+} from "~/lib/faker-options";
 
 interface SchemaBuilderProps {
     endpoint: {
         id: string;
+        projectId?: string;
         name: string;
         method: HttpMethod;
         path: string;
@@ -45,6 +46,7 @@ interface SchemaBuilderProps {
         responseSchema: unknown;
         responseCount: number;
     };
+    projectId?: string;
     initialTab?: "schema" | "auth";
     onSuccess?: () => void;
 }
@@ -71,7 +73,12 @@ function FieldLabel({ children, tooltip }: { children: React.ReactNode; tooltip:
     );
 }
 
-export function SchemaBuilder({ endpoint, initialTab = "schema", onSuccess }: SchemaBuilderProps) {
+export function SchemaBuilder({
+    endpoint,
+    projectId,
+    initialTab = "schema",
+    onSuccess,
+}: SchemaBuilderProps) {
     const [activeTab, setActiveTab] = useState<"schema" | "auth">(initialTab);
     const [resourceName, setResourceName] = useState(endpoint.name);
     const [nameError, setNameError] = useState<string | null>(null);
@@ -81,6 +88,9 @@ export function SchemaBuilder({ endpoint, initialTab = "schema", onSuccess }: Sc
     const [fields, setFields] = useState<SchemaField[]>([
         { id: crypto.randomUUID(), fieldName: "", dataType: "$faker.string.uuid" },
     ]);
+    const [editorMode, setEditorMode] = useState<"flat" | "raw">("flat");
+    const [rawSchemaText, setRawSchemaText] = useState<string>("");
+    const [jsonError, setJsonError] = useState<string | null>(null);
 
     const updateEndpoint = useUpdateEndpoint();
 
@@ -95,6 +105,12 @@ export function SchemaBuilder({ endpoint, initialTab = "schema", onSuccess }: Sc
         setFailureRate(endpoint.failureRate);
         setResponseCount(endpoint.responseCount);
         setFields(fieldsFromSchema(endpoint.responseSchema));
+        setRawSchemaText(
+            endpoint.responseSchema
+                ? JSON.stringify(endpoint.responseSchema, null, 2)
+                : JSON.stringify({ id: "$faker.string.uuid" }, null, 2),
+        );
+        setJsonError(null);
     }, [endpoint]);
 
     const addField = () => {
@@ -120,12 +136,22 @@ export function SchemaBuilder({ endpoint, initialTab = "schema", onSuccess }: Sc
         setFields(nextFields);
     };
 
+    const seed = projectId || endpoint.projectId || endpoint.id;
+
     const previewData = useMemo(() => {
-        const formattedSchema = buildSchema(fields);
-        return Array.from({ length: Math.max(responseCount, 1) }, () =>
-            resolveSchema(formattedSchema),
-        );
-    }, [fields, responseCount]);
+        let formattedSchema: unknown;
+        if (editorMode === "raw") {
+            try {
+                formattedSchema = JSON.parse(rawSchemaText);
+            } catch {
+                formattedSchema = buildSchema(fields);
+            }
+        } else {
+            formattedSchema = buildSchema(fields);
+        }
+
+        return resolveResponseData(formattedSchema, responseCount, seed);
+    }, [fields, editorMode, rawSchemaText, responseCount, seed]);
 
     const hasExistingSchema = useMemo(() => {
         if (
@@ -146,13 +172,24 @@ export function SchemaBuilder({ endpoint, initialTab = "schema", onSuccess }: Sc
         }
         setNameError(null);
 
-        const formattedSchema = buildSchema(fields);
+        let formattedSchema: unknown;
+        if (editorMode === "raw") {
+            try {
+                formattedSchema = JSON.parse(rawSchemaText);
+            } catch (err: any) {
+                setJsonError(err.message || "Invalid JSON syntax");
+                toast.error("Please fix JSON syntax errors before saving.");
+                return;
+            }
+        } else {
+            formattedSchema = buildSchema(fields);
+        }
 
         updateEndpoint.mutate(
             {
                 id: endpoint.id,
                 name: resourceName,
-                responseSchema: formattedSchema,
+                responseSchema: formattedSchema as Record<string, unknown>,
                 delayMs: delayMs,
                 failureRate: failureRate,
                 responseCount: responseCount,
@@ -293,122 +330,436 @@ export function SchemaBuilder({ endpoint, initialTab = "schema", onSuccess }: Sc
 
                             <Separator />
 
-                            {/* Schema fields */}
+                            {/* Schema fields editor with Flat vs Raw JSON tabs */}
                             <div className="space-y-3">
                                 <div className="flex items-center justify-between">
                                     <FieldLabel tooltip="Define the fields used to generate mock data.">
                                         Fields schema
                                     </FieldLabel>
-                                    <Badge
-                                        variant="secondary"
-                                        className="font-mono text-xs font-medium"
-                                    >
-                                        {fields.length} {fields.length === 1 ? "field" : "fields"}
-                                    </Badge>
-                                </div>
-
-                                <div className="space-y-2">
-                                    {fields.length > 0 && (
-                                        <div className="hidden grid-cols-[1fr_1fr_2.5rem] gap-3 px-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground sm:grid">
-                                            <div>Field name</div>
-                                            <div>Data type</div>
-                                            <div />
+                                    <div className="flex items-center gap-2">
+                                        <div className="flex rounded-md bg-muted p-0.5 text-xs">
+                                            <button
+                                                type="button"
+                                                onClick={() => {
+                                                    if (editorMode === "raw") {
+                                                        try {
+                                                            const parsed =
+                                                                JSON.parse(rawSchemaText);
+                                                            setFields(fieldsFromSchema(parsed));
+                                                            setJsonError(null);
+                                                        } catch {
+                                                            // Keep current fields if invalid
+                                                        }
+                                                    }
+                                                    setEditorMode("flat");
+                                                }}
+                                                className={`px-2.5 py-1 rounded-sm font-medium transition-colors ${
+                                                    editorMode === "flat"
+                                                        ? "bg-background text-foreground shadow-xs font-semibold"
+                                                        : "text-muted-foreground hover:text-foreground"
+                                                }`}
+                                            >
+                                                Flat Columns
+                                            </button>
+                                            <button
+                                                type="button"
+                                                onClick={() => {
+                                                    if (editorMode === "flat") {
+                                                        const current = buildSchema(fields);
+                                                        setRawSchemaText(
+                                                            JSON.stringify(current, null, 2),
+                                                        );
+                                                    }
+                                                    setEditorMode("raw");
+                                                }}
+                                                className={`px-2.5 py-1 rounded-sm font-medium transition-colors ${
+                                                    editorMode === "raw"
+                                                        ? "bg-background text-foreground shadow-xs font-semibold"
+                                                        : "text-muted-foreground hover:text-foreground"
+                                                }`}
+                                            >
+                                                Nested Raw JSON
+                                            </button>
                                         </div>
-                                    )}
+                                        {editorMode === "flat" && (
+                                            <Badge
+                                                variant="secondary"
+                                                className="font-mono text-xs font-medium"
+                                            >
+                                                {fields.length}{" "}
+                                                {fields.length === 1 ? "field" : "fields"}
+                                            </Badge>
+                                        )}
+                                    </div>
+                                </div>
 
+                                {editorMode === "flat" ? (
                                     <div className="space-y-2">
-                                        {fields.map((field) => (
-                                            <div
-                                                key={field.id}
-                                                className="grid grid-cols-[1fr_1fr_2.5rem] items-center gap-2 rounded-lg border border-transparent p-1 transition-colors hover:border-border sm:gap-3"
-                                            >
-                                                <Input
-                                                    type="text"
-                                                    placeholder="e.g. user_id, created_at"
-                                                    value={field.fieldName}
-                                                    onChange={(e) =>
-                                                        updateField(
-                                                            field.id,
-                                                            "fieldName",
-                                                            e.target.value,
-                                                        )
-                                                    }
-                                                    className="h-10 border-0 bg-muted font-mono text-sm shadow-none focus-visible:ring-2 focus-visible:ring-ring"
-                                                />
+                                        {fields.length > 0 && (
+                                            <div className="hidden grid-cols-[1fr_1fr_2.5rem] gap-3 px-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground sm:grid">
+                                                <div>Field name</div>
+                                                <div>Data type</div>
+                                                <div />
+                                            </div>
+                                        )}
 
-                                                <Select
-                                                    value={field.dataType}
-                                                    onValueChange={(value) => {
-                                                        if (value)
+                                        <div className="space-y-2">
+                                            {fields.map((field) => (
+                                                <div
+                                                    key={field.id}
+                                                    className="grid grid-cols-[1fr_1fr_2.5rem] items-center gap-2 rounded-lg border border-transparent p-1 transition-colors hover:border-border sm:gap-3"
+                                                >
+                                                    <Input
+                                                        type="text"
+                                                        placeholder="e.g. user_id, created_at"
+                                                        value={field.fieldName}
+                                                        onChange={(e) =>
                                                             updateField(
                                                                 field.id,
-                                                                "dataType",
-                                                                value,
-                                                            );
-                                                    }}
-                                                >
-                                                    <SelectTrigger className="h-10 w-full border-0 bg-muted font-mono text-sm shadow-none focus-visible:ring-2 focus-visible:ring-ring">
-                                                        <SelectValue placeholder="Select type" />
-                                                    </SelectTrigger>
-                                                    <SelectContent>
-                                                        {FAKER_OPTIONS.map((group) => (
-                                                            <SelectGroup key={group.label}>
-                                                                <SelectLabel>
-                                                                    {group.label}
-                                                                </SelectLabel>
-                                                                {group.options.map((option) => (
-                                                                    <SelectItem
-                                                                        key={option.value}
-                                                                        value={option.value}
-                                                                    >
-                                                                        {option.label}
-                                                                    </SelectItem>
-                                                                ))}
-                                                            </SelectGroup>
-                                                        ))}
-                                                    </SelectContent>
-                                                </Select>
-
-                                                <Tooltip>
-                                                    <TooltipTrigger
-                                                        render={
-                                                            <Button
-                                                                type="button"
-                                                                variant="ghost"
-                                                                size="icon"
-                                                                disabled={fields.length === 1}
-                                                                onClick={() =>
-                                                                    removeField(field.id)
-                                                                }
-                                                                className="h-10 w-10 shrink-0 text-muted-foreground hover:bg-destructive/10 hover:text-destructive disabled:opacity-30"
-                                                            >
-                                                                <Trash2 className="h-4 w-4" />
-                                                            </Button>
+                                                                "fieldName",
+                                                                e.target.value,
+                                                            )
                                                         }
+                                                        className="h-10 border-0 bg-muted font-mono text-sm shadow-none focus-visible:ring-2 focus-visible:ring-ring"
                                                     />
-                                                    <TooltipContent side="left" className="text-xs">
-                                                        {fields.length === 1
-                                                            ? "At least one field is required"
-                                                            : "Remove field"}
-                                                    </TooltipContent>
-                                                </Tooltip>
-                                            </div>
-                                        ))}
+
+                                                    <Select
+                                                        value={field.dataType}
+                                                        onValueChange={(value) => {
+                                                            if (value)
+                                                                updateField(
+                                                                    field.id,
+                                                                    "dataType",
+                                                                    value,
+                                                                );
+                                                        }}
+                                                    >
+                                                        <SelectTrigger className="h-10 w-full border-0 bg-muted font-mono text-sm shadow-none focus-visible:ring-2 focus-visible:ring-ring">
+                                                            <SelectValue placeholder="Select type" />
+                                                        </SelectTrigger>
+                                                        <SelectContent>
+                                                            {FAKER_OPTIONS.map((group) => (
+                                                                <SelectGroup key={group.label}>
+                                                                    <SelectLabel>
+                                                                        {group.label}
+                                                                    </SelectLabel>
+                                                                    {group.options.map((option) => (
+                                                                        <SelectItem
+                                                                            key={option.value}
+                                                                            value={option.value}
+                                                                        >
+                                                                            {option.label}
+                                                                        </SelectItem>
+                                                                    ))}
+                                                                </SelectGroup>
+                                                            ))}
+                                                        </SelectContent>
+                                                    </Select>
+
+                                                    <Tooltip>
+                                                        <TooltipTrigger
+                                                            render={
+                                                                <Button
+                                                                    type="button"
+                                                                    variant="ghost"
+                                                                    size="icon"
+                                                                    disabled={fields.length === 1}
+                                                                    onClick={() =>
+                                                                        removeField(field.id)
+                                                                    }
+                                                                    className="h-10 w-10 shrink-0 text-muted-foreground hover:bg-destructive/10 hover:text-destructive disabled:opacity-30"
+                                                                >
+                                                                    <Trash2 className="h-4 w-4" />
+                                                                </Button>
+                                                            }
+                                                        />
+                                                        <TooltipContent
+                                                            side="left"
+                                                            className="text-xs"
+                                                        >
+                                                            {fields.length === 1
+                                                                ? "At least one field is required"
+                                                                : "Remove field"}
+                                                        </TooltipContent>
+                                                    </Tooltip>
+                                                </div>
+                                            ))}
+                                        </div>
+
+                                        <div className="flex items-center justify-between mt-1">
+                                            <Button
+                                                type="button"
+                                                variant="secondary"
+                                                onClick={addField}
+                                                size="sm"
+                                                className="h-9 gap-1.5 border-dashed border-primary text-muted-foreground hover:text-primary hover:color-primary"
+                                            >
+                                                <Plus className="h-3.5 w-3.5" />
+                                                <FieldLabel tooltip="Add a new field to the schema.">
+                                                    Add field
+                                                </FieldLabel>
+                                            </Button>
+
+                                            <Button
+                                                type="button"
+                                                onClick={handleSubmit}
+                                                disabled={updateEndpoint.isPending}
+                                                size="sm"
+                                                className="h-9 gap-2 font-semibold text-primary-foreground"
+                                            >
+                                                {updateEndpoint.isPending
+                                                    ? "Saving..."
+                                                    : hasExistingSchema
+                                                      ? "Update schema"
+                                                      : "Generate schema"}
+                                            </Button>
+                                        </div>
                                     </div>
+                                ) : (
+                                    <div className="space-y-2">
+                                        <div className="flex items-center justify-between">
+                                            <span className="text-[11px] font-mono text-muted-foreground">
+                                                JSON Editor (Tab / Enter auto-indent, &quot;
+                                                auto-pairs)
+                                            </span>
+                                            <Button
+                                                type="button"
+                                                variant="outline"
+                                                size="sm"
+                                                onClick={() => {
+                                                    try {
+                                                        const parsed = JSON.parse(rawSchemaText);
+                                                        const formatted = JSON.stringify(
+                                                            parsed,
+                                                            null,
+                                                            2,
+                                                        );
+                                                        setRawSchemaText(formatted);
+                                                        setJsonError(null);
+                                                        toast.success("JSON formatted");
+                                                    } catch {
+                                                        toast.error(
+                                                            "Cannot format: invalid JSON syntax",
+                                                        );
+                                                    }
+                                                }}
+                                                className="h-7 text-xs font-mono gap-1"
+                                            >
+                                                Format JSON
+                                            </Button>
+                                        </div>
+                                        <textarea
+                                            value={rawSchemaText}
+                                            onChange={(e) => {
+                                                const val = e.target.value;
+                                                setRawSchemaText(val);
+                                                try {
+                                                    const parsed = JSON.parse(val);
+                                                    setFields(fieldsFromSchema(parsed));
+                                                    setJsonError(null);
+                                                } catch (err: any) {
+                                                    setJsonError(
+                                                        err.message || "Invalid JSON syntax",
+                                                    );
+                                                }
+                                            }}
+                                            onKeyDown={(e) => {
+                                                const target = e.currentTarget;
+                                                const { selectionStart, selectionEnd, value } =
+                                                    target;
+
+                                                // 1. Convert single quote ' to double quote "
+                                                if (e.key === "'") {
+                                                    e.preventDefault();
+                                                    const before = value.substring(
+                                                        0,
+                                                        selectionStart,
+                                                    );
+                                                    const after = value.substring(selectionEnd);
+                                                    const nextVal = `${before}"${after}`;
+                                                    setRawSchemaText(nextVal);
+                                                    setTimeout(() => {
+                                                        target.selectionStart =
+                                                            target.selectionEnd =
+                                                                selectionStart + 1;
+                                                    }, 0);
+                                                    return;
+                                                }
+
+                                                // 2. Auto-pair double quotes " -> ""
+                                                if (e.key === '"') {
+                                                    if (
+                                                        selectionStart === selectionEnd &&
+                                                        value[selectionStart] === '"'
+                                                    ) {
+                                                        e.preventDefault();
+                                                        target.selectionStart =
+                                                            target.selectionEnd =
+                                                                selectionStart + 1;
+                                                        return;
+                                                    }
+                                                    e.preventDefault();
+                                                    const before = value.substring(
+                                                        0,
+                                                        selectionStart,
+                                                    );
+                                                    const selected = value.substring(
+                                                        selectionStart,
+                                                        selectionEnd,
+                                                    );
+                                                    const after = value.substring(selectionEnd);
+                                                    const nextVal = `${before}"${selected}"${after}`;
+                                                    setRawSchemaText(nextVal);
+                                                    setTimeout(() => {
+                                                        target.selectionStart = selectionStart + 1;
+                                                        target.selectionEnd =
+                                                            selectionStart + 1 + selected.length;
+                                                    }, 0);
+                                                    return;
+                                                }
+
+                                                // 3. Auto-pair braces { -> {} and brackets [ -> []
+                                                if (e.key === "{" || e.key === "[") {
+                                                    const closing = e.key === "{" ? "}" : "]";
+                                                    e.preventDefault();
+                                                    const before = value.substring(
+                                                        0,
+                                                        selectionStart,
+                                                    );
+                                                    const selected = value.substring(
+                                                        selectionStart,
+                                                        selectionEnd,
+                                                    );
+                                                    const after = value.substring(selectionEnd);
+                                                    const nextVal = `${before}${e.key}${selected}${closing}${after}`;
+                                                    setRawSchemaText(nextVal);
+                                                    setTimeout(() => {
+                                                        target.selectionStart = selectionStart + 1;
+                                                        target.selectionEnd =
+                                                            selectionStart + 1 + selected.length;
+                                                    }, 0);
+                                                    return;
+                                                }
+
+                                                // 4. Tab key -> Insert 2 spaces
+                                                if (e.key === "Tab") {
+                                                    e.preventDefault();
+                                                    const before = value.substring(
+                                                        0,
+                                                        selectionStart,
+                                                    );
+                                                    const after = value.substring(selectionEnd);
+                                                    const nextVal = `${before}  ${after}`;
+                                                    setRawSchemaText(nextVal);
+                                                    setTimeout(() => {
+                                                        target.selectionStart =
+                                                            target.selectionEnd =
+                                                                selectionStart + 2;
+                                                    }, 0);
+                                                    return;
+                                                }
+
+                                                // 5. Enter key -> Smart Auto-Indent matching previous line depth
+                                                if (e.key === "Enter") {
+                                                    e.preventDefault();
+                                                    const lineStart =
+                                                        value.lastIndexOf(
+                                                            "\n",
+                                                            selectionStart - 1,
+                                                        ) + 1;
+                                                    const currentLine = value.substring(
+                                                        lineStart,
+                                                        selectionStart,
+                                                    );
+                                                    const matchIndent = currentLine.match(/^(\s*)/);
+                                                    let indent = matchIndent
+                                                        ? (matchIndent[1] ?? "")
+                                                        : "";
+
+                                                    const charBeforeCursor =
+                                                        value[selectionStart - 1];
+                                                    const charAfterCursor = value[selectionEnd];
+
+                                                    if (
+                                                        charBeforeCursor === "{" ||
+                                                        charBeforeCursor === "["
+                                                    ) {
+                                                        indent += "  ";
+                                                    }
 
-                                    <Button
-                                        type="button"
-                                        variant="secondary"
-                                        onClick={addField}
-                                        size="sm"
-                                        className="mt-1 h-9 gap-1.5 border-dashed border-primary text-muted-foreground hover:text-primary hover:color-primary"
-                                    >
-                                        <Plus className="h-3.5 w-3.5" />
-                                        <FieldLabel tooltip="Add a new field to the schema.">
-                                            Add field
-                                        </FieldLabel>
-                                    </Button>
-                                </div>
+                                                    if (
+                                                        (charBeforeCursor === "{" &&
+                                                            charAfterCursor === "}") ||
+                                                        (charBeforeCursor === "[" &&
+                                                            charAfterCursor === "]")
+                                                    ) {
+                                                        const outerIndent = (indent ?? "").slice(
+                                                            0,
+                                                            Math.max(0, (indent ?? "").length - 2),
+                                                        );
+                                                        const before = value.substring(
+                                                            0,
+                                                            selectionStart,
+                                                        );
+                                                        const after = value.substring(selectionEnd);
+                                                        const nextVal = `${before}\n${indent ?? ""}\n${outerIndent}${after}`;
+                                                        setRawSchemaText(nextVal);
+                                                        setTimeout(() => {
+                                                            target.selectionStart =
+                                                                target.selectionEnd =
+                                                                    selectionStart +
+                                                                    1 +
+                                                                    (indent ?? "").length;
+                                                        }, 0);
+                                                        return;
+                                                    }
+
+                                                    const before = value.substring(
+                                                        0,
+                                                        selectionStart,
+                                                    );
+                                                    const after = value.substring(selectionEnd);
+                                                    const nextVal = `${before}\n${indent ?? ""}${after}`;
+                                                    setRawSchemaText(nextVal);
+                                                    setTimeout(() => {
+                                                        target.selectionStart =
+                                                            target.selectionEnd =
+                                                                selectionStart +
+                                                                1 +
+                                                                (indent ?? "").length;
+                                                    }, 0);
+                                                    return;
+                                                }
+                                            }}
+                                            placeholder={`{\n  "id": "$faker.string.uuid",\n  "user": {\n    "name": "$faker.person.fullName"\n  }\n}`}
+                                            rows={10}
+                                            className="w-full rounded-md border border-input bg-zinc-950 text-zinc-100 p-3 font-mono text-xs shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring leading-relaxed"
+                                        />
+                                        {jsonError && (
+                                            <p className="text-xs font-mono text-destructive">
+                                                JSON Error: {jsonError}
+                                            </p>
+                                        )}
+                                        <div className="flex justify-end pt-1">
+                                            <Button
+                                                type="button"
+                                                onClick={handleSubmit}
+                                                disabled={
+                                                    updateEndpoint.isPending ||
+                                                    (editorMode === "raw" && !!jsonError)
+                                                }
+                                                size="sm"
+                                                className="h-9 gap-2 font-semibold text-primary-foreground"
+                                            >
+                                                {updateEndpoint.isPending
+                                                    ? "Saving..."
+                                                    : hasExistingSchema
+                                                      ? "Update schema"
+                                                      : "Generate schema"}
+                                            </Button>
+                                        </div>
+                                    </div>
+                                )}
                             </div>
 
                             <Separator />
@@ -426,20 +777,6 @@ export function SchemaBuilder({ endpoint, initialTab = "schema", onSuccess }: Sc
                                 </pre>
                             </div>
                         </CardContent>
-
-                        <div className="flex justify-center items-end px-4 pb-4">
-                            <Button
-                                onClick={handleSubmit}
-                                disabled={updateEndpoint.isPending}
-                                className="h-10 gap-2 font-semibold text-primary-foreground"
-                            >
-                                {updateEndpoint.isPending
-                                    ? "Saving..."
-                                    : hasExistingSchema
-                                      ? "Update schema"
-                                      : "Generate schema"}
-                            </Button>
-                        </div>
                     </Card>
                 </TabsContent>
 
diff --git a/src/modules/workspace/ui/components/dashboard/schemaPreview.tsx b/src/modules/workspace/ui/components/dashboard/schemaPreview.tsx
index 2820e5f..440df00 100644
--- a/src/modules/workspace/ui/components/dashboard/schemaPreview.tsx
+++ b/src/modules/workspace/ui/components/dashboard/schemaPreview.tsx
@@ -1,11 +1,13 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Code2, RotateCw, ShieldAlert } from "lucide-react";
+import { Code2, RotateCw, ShieldAlert, LayoutTemplate } from "lucide-react";
 import { Card, CardContent, CardHeader } from "~/components/ui/card";
 import { CodeBlock } from "~/components/code-block";
 import { Button } from "~/components/ui/button";
 import type { HttpMethod } from "../sidebar/types";
+import { fieldsFromSchema } from "~/lib/faker-options";
+import { getTopMatches, generateCode, generateHtmlCode } from "~/lib/component-templates";
 
 interface SchemaPreviewProps {
     endpoint:
@@ -43,6 +45,16 @@ export function SchemaPreview({ endpoint, fetchUrl, bearerToken }: SchemaPreview
             ? Object.entries(endpoint.responseSchema as Record<string, string>)
             : [];
 
+    const schemaFields = fieldsFromSchema(endpoint?.responseSchema);
+    const topMatches = getTopMatches(schemaFields, fetchUrl);
+    const [selectedTemplateId] = useState<string | null>(null);
+
+    const [activeTab, setActiveTab] = useState<"react" | "html">("react");
+
+    // Keep active template selection in sync when matches change
+    const activeMatch =
+        topMatches.find((m) => m.template.id === selectedTemplateId) ?? topMatches[0];
+
     const loadSample = useCallback(async () => {
         if (!endpoint) return;
 
@@ -161,15 +173,25 @@ export function SchemaPreview({ endpoint, fetchUrl, bearerToken }: SchemaPreview
                             <span>Field</span>
                             <span>Type</span>
                         </div>
-                        {fields.map(([name, type]) => (
-                            <div
-                                key={name}
-                                className="grid grid-cols-2 px-4 py-2 font-mono text-sm border-t border-zinc-100 dark:border-zinc-800"
-                            >
-                                <span className="font-medium">{name}</span>
-                                <span className="text-muted-foreground">{type}</span>
-                            </div>
-                        ))}
+                        {fields.map(([name, type]) => {
+                            const displayType =
+                                typeof type === "string"
+                                    ? type
+                                    : typeof type === "object" && type !== null
+                                      ? JSON.stringify(type)
+                                      : String(type);
+                            return (
+                                <div
+                                    key={name}
+                                    className="grid grid-cols-2 px-4 py-2 font-mono text-sm border-t border-zinc-100 dark:border-zinc-800"
+                                >
+                                    <span className="font-medium">{name}</span>
+                                    <span className="text-muted-foreground truncate">
+                                        {displayType}
+                                    </span>
+                                </div>
+                            );
+                        })}
                     </div>
 
                     {/* Config summary */}
@@ -231,6 +253,73 @@ export function SchemaPreview({ endpoint, fetchUrl, bearerToken }: SchemaPreview
                             />
                         ) : null}
                     </div>
+
+                    {/* Component Generator Block */}
+                    {topMatches.length > 0 && activeMatch && (
+                        <div className="pt-4 border-t border-zinc-200 dark:border-zinc-800 space-y-3">
+                            <div className="flex items-center justify-between">
+                                <h3 className="text-sm font-bold font-mono text-muted-foreground flex items-center gap-2">
+                                    <LayoutTemplate className="w-4 h-4" />
+                                    {activeTab === "react"
+                                        ? "React Component Code"
+                                        : "HTML / Vanilla JS Code"}
+                                </h3>
+
+                                <div className="flex items-center bg-zinc-200 dark:bg-zinc-800 p-0.5 rounded-lg text-xs font-mono">
+                                    <button
+                                        type="button"
+                                        onClick={() => setActiveTab("react")}
+                                        className={`px-3 py-1 rounded-md font-medium transition-colors ${
+                                            activeTab === "react"
+                                                ? "bg-white dark:bg-zinc-900 text-foreground shadow-xs"
+                                                : "text-muted-foreground hover:text-foreground"
+                                        }`}
+                                    >
+                                        React
+                                    </button>
+                                    <button
+                                        type="button"
+                                        onClick={() => setActiveTab("html")}
+                                        className={`px-3 py-1 rounded-md font-medium transition-colors ${
+                                            activeTab === "html"
+                                                ? "bg-white dark:bg-zinc-900 text-foreground shadow-xs"
+                                                : "text-muted-foreground hover:text-foreground"
+                                        }`}
+                                    >
+                                        HTML
+                                    </button>
+                                </div>
+                            </div>
+
+                            <p className="text-xs text-muted-foreground font-mono">
+                                {activeTab === "react"
+                                    ? "Copy-paste React component with custom type interface & auto-fetch logic built from your schema table."
+                                    : "Standalone HTML file with inline <style> and <script> tag auto-fetching from your endpoint."}
+                            </p>
+
+                            {activeTab === "react" ? (
+                                <CodeBlock
+                                    code={generateCode(
+                                        activeMatch.template,
+                                        schemaFields,
+                                        fetchUrl,
+                                    )}
+                                    lang="tsx"
+                                    maxHeight="350px"
+                                />
+                            ) : (
+                                <CodeBlock
+                                    code={generateHtmlCode(
+                                        activeMatch.template,
+                                        schemaFields,
+                                        fetchUrl,
+                                    )}
+                                    lang="html"
+                                    maxHeight="350px"
+                                />
+                            )}
+                        </div>
+                    )}
                 </CardContent>
             </Card>
         </div>
diff --git a/tests/component-templates.test.ts b/tests/component-templates.test.ts
new file mode 100644
index 0000000..85d3712
--- /dev/null
+++ b/tests/component-templates.test.ts
@@ -0,0 +1,331 @@
+import { describe, expect, it } from "vitest";
+import { fieldsFromSchema } from "~/lib/faker-options";
+import {
+    matchTemplates,
+    getTopMatches,
+    generateCode,
+    generateHtmlCode,
+    COMPONENT_TEMPLATES,
+} from "~/lib/component-templates";
+import { dynamicGridTemplate } from "~/lib/component-templates/dynamic-grid";
+import { userCardTemplate } from "~/lib/component-templates/user-card";
+import { postCardTemplate } from "~/lib/component-templates/post-card";
+import { productCardTemplate } from "~/lib/component-templates/product-card";
+import { todoListTemplate } from "~/lib/component-templates/todo-list";
+import { transactionRowTemplate } from "~/lib/component-templates/transaction-row";
+import { commentItemTemplate } from "~/lib/component-templates/comment-item";
+import { findField, buildFetchHook, buildInterface } from "~/lib/component-templates/codegen-utils";
+
+describe("Component Templates Library", () => {
+    describe("matchTemplates & getTopMatches", () => {
+        it("should rank specialized templates (e.g. user-card) when fields match user schema", () => {
+            const fields = [
+                { id: "1", fieldName: "username", dataType: "$faker.internet.username" },
+                { id: "2", fieldName: "email", dataType: "$faker.internet.email" },
+            ];
+            const matches = getTopMatches(fields, "/api/users");
+
+            expect(matches.length).toBeGreaterThan(0);
+            expect(matches[0]!.template.id).toBe("user-card");
+        });
+
+        it("should rank dynamicGridTemplate when path keyword matches", () => {
+            const fields = fieldsFromSchema({
+                id: "uuid",
+                name: "fullName",
+            });
+            const matches = matchTemplates(fields, "/users");
+            expect(matches.some((m) => m.template.id === "dynamic-grid")).toBe(true);
+        });
+    });
+
+    describe("codegen-utils", () => {
+        it("findField case and separator insensitively matches schema field names", () => {
+            const fields = [
+                { id: "1", fieldName: "user_name", dataType: "$faker.internet.username" },
+                { id: "2", fieldName: "EmailAddress", dataType: "$faker.internet.email" },
+            ];
+
+            expect(findField(fields, ["username", "handle"])).toBe("user_name");
+            expect(findField(fields, ["email", "emailaddress"])).toBe("EmailAddress");
+            expect(findField(fields, ["nonexistent"])).toBeNull();
+        });
+
+        it("buildInterface generates valid TypeScript interface output", () => {
+            const code = buildInterface("User", ["id: string;", "name: string;"]);
+            expect(code).toContain("interface User {");
+            expect(code).toContain("  id: string;");
+            expect(code).toContain("  name: string;");
+            expect(code).toContain("}");
+        });
+
+        it("buildFetchHook generates a fetch hook with correct endpoint URL", () => {
+            const code = buildFetchHook("User", "https://api.mock.test/users", "UserItem");
+            expect(code).toContain("function useUserData()");
+            expect(code).toContain('fetch("https://api.mock.test/users")');
+            expect(code).toContain("setData(json)");
+        });
+    });
+
+    describe("dynamicGridTemplate Code Generation", () => {
+        it("generates TSX component code from schema fields with snake_case normalization", () => {
+            const fields = fieldsFromSchema({
+                id: "$faker.string.uuid",
+                full_name: "$faker.person.fullName",
+                user_name: "$faker.internet.username",
+                email_address: "$faker.internet.email",
+                phone_number: "$faker.phone.number",
+                avatar_url: "$faker.image.avatar",
+                bio_summary: "$faker.person.bio",
+                price_amount: "$faker.commerce.price",
+            });
+
+            const code = generateCode(dynamicGridTemplate, fields, "https://mock.api/v1/users");
+
+            expect(code).toContain('import { useEffect, useState } from "react";');
+            expect(code).toContain("interface DataItem {");
+            expect(code).toContain("  id: string;");
+            expect(code).toContain("  full_name: string;");
+            expect(code).toContain("  user_name: string;");
+            expect(code).toContain("  price_amount: number;");
+            expect(code).toContain("function useDataItemData()");
+            expect(code).toContain('fetch("https://mock.api/v1/users")');
+            expect(code).toContain("export function DataCardList()");
+            expect(code).toContain("avatar_url");
+            expect(code).toContain("email_address:");
+            expect(code).toContain("phone_number:");
+        });
+
+        it("backtracks arbitrary field names (e.g. foo, bar) to their $faker types", () => {
+            const fields = fieldsFromSchema({
+                foo: "$faker.string.uuid",
+                bar: "$faker.internet.username",
+                baz: "$faker.person.fullName",
+                pic: "$faker.image.avatar",
+            });
+
+            const code = generateCode(dynamicGridTemplate, fields, "https://mock.api/v1/users");
+
+            expect(code).toContain("  foo: string;");
+            expect(code).toContain("  bar: string;");
+            expect(code).toContain("  baz: string;");
+            expect(code).toContain("  pic: string;");
+
+            // Verify foo was inferred as id, baz/bar as title/subtitle, and pic as avatar
+            expect(code).toContain("item.foo");
+            expect(code).toContain("item.baz");
+            expect(code).toContain("item.pic");
+        });
+
+        it("backtracks all categories in FAKER_OPTIONS (book, company, vehicle, food, commerce)", () => {
+            const fields = fieldsFromSchema({
+                custom_id: "$faker.string.nanoid",
+                field1: "$faker.book.title",
+                field2: "$faker.book.author",
+                field3: "$faker.lorem.paragraph",
+                field4: "$faker.number.float",
+                field5: "$faker.datatype.boolean",
+            });
+
+            const code = generateCode(dynamicGridTemplate, fields, "https://mock.api/v1/books");
+
+            expect(code).toContain("  custom_id: string;");
+            expect(code).toContain("  field1: string;");
+            expect(code).toContain("  field2: string;");
+            expect(code).toContain("  field3: string;");
+            expect(code).toContain("  field4: number;");
+            expect(code).toContain("  field5: boolean;");
+
+            // Check that field1 ($faker.book.title) was mapped to title, field2 to subtitle, and field3 to paragraph
+            expect(code).toContain("item.custom_id");
+            expect(code).toContain("item.field1");
+            expect(code).toContain("item.field2");
+            expect(code).toContain("item.field3");
+        });
+
+        it("recursively flattens nested schema objects (user.profile.name) like schema-resolver.ts", () => {
+            const fields = fieldsFromSchema({
+                user: {
+                    id: "$faker.string.uuid",
+                    profile: {
+                        name: "$faker.person.fullName",
+                        avatar: "$faker.image.avatar",
+                    },
+                    details: {
+                        bio: "$faker.person.bio",
+                    },
+                },
+            });
+
+            const code = generateCode(dynamicGridTemplate, fields, "https://mock.api/v1/nested");
+
+            expect(code).toContain('  "user.id"?: string;');
+            expect(code).toContain('  "user.profile.name"?: string;');
+            expect(code).toContain('  "user.profile.avatar"?: string;');
+            expect(code).toContain('  "user.details.bio"?: string;');
+
+            // Verify safe optional chaining property access item?.["user.profile.name"]
+            expect(code).toContain('item?.["user.id"]');
+            expect(code).toContain('item?.["user.profile.name"]');
+            expect(code).toContain('item?.["user.profile.avatar"]');
+            expect(code).toContain('item?.["user.details.bio"]');
+        });
+
+        it("handles empty / simple schema fields without crashing", () => {
+            const fields = fieldsFromSchema({});
+            const code = generateCode(dynamicGridTemplate, fields, "https://mock.api/v1/custom");
+
+            expect(code).toContain("export function DataCardList()");
+            expect(code).toContain('fetch("https://mock.api/v1/custom")');
+        });
+    });
+
+    describe("HTML Template Code Generation", () => {
+        it("generates valid single-file HTML for dynamicGridTemplate", () => {
+            const fields = fieldsFromSchema({
+                id: "$faker.string.uuid",
+                name: "$faker.person.fullName",
+                email: "$faker.internet.email",
+                avatar: "$faker.image.avatar",
+            });
+
+            const html = generateHtmlCode(dynamicGridTemplate, fields, "https://mock.api/v1/users");
+
+            expect(html).toContain("<!DOCTYPE html>");
+            expect(html).toContain("<style>");
+            expect(html).toContain('<script type="module">');
+            expect(html).toContain('fetch("https://mock.api/v1/users")');
+            expect(html).toContain("avatar");
+            expect(html).toContain("email");
+        });
+
+        it("generates valid HTML for userCardTemplate", () => {
+            const fields = fieldsFromSchema({
+                id: "uuid",
+                fullName: "fullName",
+                username: "username",
+                email: "email",
+            });
+
+            const html = generateHtmlCode(userCardTemplate, fields, "/api/users");
+
+            expect(html).toContain("<!DOCTYPE html>");
+            expect(html).toContain("<title>User Cards</title>");
+            expect(html).toContain("fullName");
+            expect(html).toContain("username");
+            expect(html).toContain("email");
+            expect(html).toContain('fetch("/api/users")');
+        });
+
+        it("generates valid HTML for postCardTemplate", () => {
+            const fields = fieldsFromSchema({
+                id: "uuid",
+                title: "lorem.sentence",
+                content: "lorem.paragraph",
+                author: "person.fullName",
+            });
+
+            const html = generateHtmlCode(postCardTemplate, fields, "/api/posts");
+
+            expect(html).toContain("<!DOCTYPE html>");
+            expect(html).toContain("<title>Post Cards</title>");
+            expect(html).toContain("title");
+            expect(html).toContain("content");
+            expect(html).toContain("author");
+            expect(html).toContain('fetch("/api/posts")');
+        });
+
+        it("generates valid HTML for productCardTemplate", () => {
+            const fields = fieldsFromSchema({
+                id: "uuid",
+                name: "commerce.productName",
+                price: "commerce.price",
+                inStock: "datatype.boolean",
+            });
+
+            const html = generateHtmlCode(productCardTemplate, fields, "/api/products");
+
+            expect(html).toContain("<!DOCTYPE html>");
+            expect(html).toContain("<title>Product Cards</title>");
+            expect(html).toContain("name");
+            expect(html).toContain("price");
+            expect(html).toContain("inStock");
+            expect(html).toContain('fetch("/api/products")');
+        });
+
+        it("generates valid HTML for todoListTemplate", () => {
+            const fields = fieldsFromSchema({
+                id: "uuid",
+                title: "lorem.sentence",
+                completed: "datatype.boolean",
+                priority: "number.int",
+            });
+
+            const html = generateHtmlCode(todoListTemplate, fields, "/api/todos");
+
+            expect(html).toContain("<!DOCTYPE html>");
+            expect(html).toContain("<title>Todo List</title>");
+            expect(html).toContain("title");
+            expect(html).toContain("completed");
+            expect(html).toContain("priority");
+            expect(html).toContain('fetch("/api/todos")');
+        });
+
+        it("generates valid HTML for transactionRowTemplate", () => {
+            const fields = fieldsFromSchema({
+                id: "uuid",
+                amount: "finance.amount",
+                date: "date.recent",
+                merchant: "company.name",
+            });
+
+            const html = generateHtmlCode(transactionRowTemplate, fields, "/api/transactions");
+
+            expect(html).toContain("<!DOCTYPE html>");
+            expect(html).toContain("<title>Transaction Table</title>");
+            expect(html).toContain("amount");
+            expect(html).toContain("date");
+            expect(html).toContain("merchant");
+            expect(html).toContain('fetch("/api/transactions")');
+        });
+
+        it("generates valid HTML for commentItemTemplate", () => {
+            const fields = fieldsFromSchema({
+                id: "uuid",
+                author: "person.fullName",
+                comment: "lorem.sentence",
+            });
+
+            const html = generateHtmlCode(commentItemTemplate, fields, "/api/comments");
+
+            expect(html).toContain("<!DOCTYPE html>");
+            expect(html).toContain("<title>Comments</title>");
+            expect(html).toContain("author");
+            expect(html).toContain("comment");
+            expect(html).toContain('fetch("/api/comments")');
+        });
+
+        it("handles empty schema fields gracefully without crashing", () => {
+            const fields = fieldsFromSchema({});
+            const html = generateHtmlCode(dynamicGridTemplate, fields, "/api/empty");
+
+            expect(html).toContain("<!DOCTYPE html>");
+            expect(html).toContain('fetch("/api/empty")');
+        });
+    });
+
+    describe("COMPONENT_TEMPLATES registry", () => {
+        it("contains all 7 component templates", () => {
+            expect(COMPONENT_TEMPLATES.length).toBe(7);
+            expect(COMPONENT_TEMPLATES.map((t) => t.id)).toEqual([
+                "dynamic-grid",
+                "user-card",
+                "post-card",
+                "product-card",
+                "todo-list",
+                "transaction-row",
+                "comment-item",
+            ]);
+        });
+    });
+});
diff --git a/tsconfig.json b/tsconfig.json
index d90fad5..df283d7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,7 +16,7 @@
         "checkJs": true,
 
         /* Bundled projects */
-        "lib": ["dom", "dom.iterable", "ES2022"],
+        "lib": ["dom", "dom.iterable", "ES2022", "ES2023"],
         "noEmit": true,
         "module": "ESNext",
         "moduleResolution": "Bundler",