diff --git a/src/views/components/TemplateBuilder.svelte b/src/views/components/TemplateBuilder.svelte
index 92731551..1da17a1b 100644
--- a/src/views/components/TemplateBuilder.svelte
+++ b/src/views/components/TemplateBuilder.svelte
@@ -4,6 +4,7 @@
     export let model: TemplateBuilderModel;
 
     $: fields = model.fields;
+    $: code = model.code;
 </script>
 
 <div class="modal-form flex gap-2">
@@ -22,7 +23,7 @@
     </div>
     <div>
         <pre> 
-            code here
+            {$code}
         </pre>
     </div>
 </div>
diff --git a/src/views/components/TemplateBuilder.ts b/src/views/components/TemplateBuilder.ts
index adbd13b8..b90e34f1 100644
--- a/src/views/components/TemplateBuilder.ts
+++ b/src/views/components/TemplateBuilder.ts
@@ -1,6 +1,6 @@
 import { A, pipe } from "@std";
 import { FormDefinition } from "src/core/formDefinition";
-import { writable } from "svelte/store";
+import { derived, writable } from "svelte/store";
 
 // type FieldDefinition = FormDefinition["fields"][number];
 
@@ -26,18 +26,29 @@ const Field = (name: string): FieldOption => ({
     omit: false,
 });
 
+function compileTemplaterTemplate(fields: Field[]) {
+    const fieldsToInclude = fields.filter((field): field is FieldOption => !field.omit);
+    const frontmatterFields = fieldsToInclude.filter((field) => field.onFrontmatter);
+    const frontmatterCode =
+        frontmatterFields.length === fieldsToInclude.length
+            ? `tR + = result.asFrontmatterString();`
+            : `tR + = result.asFrontmatterString({${frontmatterFields
+                  .map((field) => field.name)
+                  .join(", ")}});`;
+
+    return `
+    <% "--- "%>
+    ${frontmatterCode}
+    <% "--- "%>
+    `;
+}
+
 export const makeModel = (formDefinition: FormDefinition) => {
     const fields = writable(
         formDefinition.fields.reduce((acc, { name }) => [...acc, Field(name)], [] as Field[]),
     );
 
-    // function setField(name: string, newValues: Partial<FieldOption>) {
-    //     fields.update((f) => {
-    //         const field = f[name] ?? { name, onFrontmatter: false, onBody: false };
-    //         f[name] = { ...field, ...newValues };
-    //         return f;
-    //     });
-    // }
+    const code = derived(fields, compileTemplaterTemplate);
 
     function setField(name: string, newValues: Partial<FieldOption>) {
         fields.update(($fields) =>
@@ -52,7 +63,7 @@ export const makeModel = (formDefinition: FormDefinition) => {
             ),
         );
     }
-    return { fields, setField };
+    return { fields, setField, code };
 };
 
 export type TemplateBuilderModel = ReturnType<typeof makeModel>;