diff --git a/change/@microsoft-fast-test-harness-2473cf9b-b505-47b0-900d-60dbeda05163.json b/change/@microsoft-fast-test-harness-2473cf9b-b505-47b0-900d-60dbeda05163.json
new file mode 100644
index 00000000000..5461bffec97
--- /dev/null
+++ b/change/@microsoft-fast-test-harness-2473cf9b-b505-47b0-900d-60dbeda05163.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add support for repeat and when directives",
+  "packageName": "@microsoft/fast-test-harness",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/fast-test-harness/src/build/generate-templates.test.ts b/packages/fast-test-harness/src/build/generate-templates.test.ts
index 7924f36ea23..00e5386611d 100644
--- a/packages/fast-test-harness/src/build/generate-templates.test.ts
+++ b/packages/fast-test-harness/src/build/generate-templates.test.ts
@@ -10,6 +10,28 @@ import {
 } from "@microsoft/fast-test-harness/build/generate-templates.js";
 import { generateWebuiTemplates } from "@microsoft/fast-test-harness/build/generate-webui-templates.js";
 
+interface RepeatHost {
+    items: RepeatItem[];
+}
+
+interface RepeatChild {
+    name: string;
+}
+
+interface RepeatItem {
+    children: RepeatChild[];
+    label: string;
+    name: string;
+    visible: boolean;
+}
+
+interface WhenHost {
+    items: RepeatItem[];
+    label: string;
+    ready: boolean;
+    visible: boolean;
+}
+
 test.describe("convertTemplate", async () => {
     // Install the DOM shim before any tests — convertTemplate needs declarative
     // syntax constants which require a DOM environment, and FAST Element needs
@@ -18,7 +40,9 @@ test.describe("convertTemplate", async () => {
 
     // Dynamic import after the DOM shim is installed so FAST Element can
     // access `document`, `CSSStyleSheet`, etc.
-    const { html, ref, slotted, children } = await import("@microsoft/fast-element");
+    const { html, ref, slotted, children, elements, repeat, when } = await import(
+        "@microsoft/fast-element"
+    );
     test("should wrap a static template in f-template tags", () => {
         const template = html`<template><div>hello</div></template>`;
         const result = convertTemplate(template, "fast-test");
@@ -94,6 +118,34 @@ test.describe("convertTemplate", async () => {
         assert.ok(result.includes("slottedItems"), `got: ${result}`);
     });
 
+    test("should convert SlottedDirective factories with elements filter", () => {
+        const template = html`<template><slot ${slotted({
+            property: "slottedItems",
+            filter: elements(),
+        })}></slot></template>`;
+        const result = convertTemplate(template, "fast-slotted-elements");
+
+        assert.ok(result);
+        assert.ok(
+            result.includes('f-slotted="{slottedItems filter elements()}"'),
+            `got: ${result}`,
+        );
+    });
+
+    test("should convert SlottedDirective factories with selector elements filter", () => {
+        const template = html`<template><slot ${slotted({
+            property: "slottedItems",
+            filter: elements("p, ol"),
+        })}></slot></template>`;
+        const result = convertTemplate(template, "fast-slotted-elements-selector");
+
+        assert.ok(result);
+        assert.ok(
+            result.includes('f-slotted="{slottedItems filter elements(p, ol)}"'),
+            `got: ${result}`,
+        );
+    });
+
     test("should convert value bindings to {{expression}}", () => {
         const template = html`<template><span>${x => x.label}</span></template>`;
         const result = convertTemplate(template, "fast-binding");
@@ -136,6 +188,16 @@ test.describe("convertTemplate", async () => {
         assert.ok(result.includes("handleClick"), `got: ${result}`);
     });
 
+    test("should convert custom event bindings", () => {
+        const template = html`<template><test-child @value-change="${(x, c) => x.handleValueChange(c.event)}"></test-child></template>`;
+        const result = convertTemplate(template, "fast-custom-event");
+
+        assert.ok(result);
+        assert.ok(result.includes("@value-change="), `got: ${result}`);
+        assert.ok(result.includes("handleValueChange"), `got: ${result}`);
+        assert.ok(result.includes("$e"), `got: ${result}`);
+    });
+
     test("should convert property bindings to :prop expressions", () => {
         const template = html`<template><input :value="${x => x.currentValue}" /></template>`;
         const result = convertTemplate(template, "fast-prop");
@@ -145,6 +207,37 @@ test.describe("convertTemplate", async () => {
         assert.ok(result.includes("currentValue"), `got: ${result}`);
     });
 
+    test("should convert plain innerHTML wrappers to unescaped content bindings", () => {
+        const template = html`<template><div :innerHTML="${x => x.html}"></div></template>`;
+        const result = convertTemplate(template, "fast-inner-html");
+
+        assert.ok(result);
+        assert.ok(result.includes("{{{html}}}"), `got: ${result}`);
+        assert.ok(!result.includes(":innerHTML"), `got: ${result}`);
+    });
+
+    test("should preserve innerHTML property bindings on divs with static attributes", () => {
+        const template = html`<template><div class="content" :innerHTML="${x => x.html}"></div></template>`;
+        const result = convertTemplate(template, "fast-inner-html-attrs");
+
+        assert.ok(result);
+        assert.ok(
+            result.includes('<div class="content" :innerHTML="{{html}}"></div>'),
+            `got: ${result}`,
+        );
+        assert.ok(!result.includes("{{{html}}}"), `got: ${result}`);
+    });
+
+    test("should preserve innerHTML property bindings on divs with other bindings", () => {
+        const template = html`<template><div :innerHTML="${x => x.html}" ?hidden="${x => x.hidden}"></div></template>`;
+        const result = convertTemplate(template, "fast-inner-html-bindings");
+
+        assert.ok(result);
+        assert.ok(result.includes(':innerHTML="{{html}}"'), `got: ${result}`);
+        assert.ok(result.includes('?hidden="{{hidden}}"'), `got: ${result}`);
+        assert.ok(!result.includes("{{{html}}}"), `got: ${result}`);
+    });
+
     test("should handle multiple factories in a single template", () => {
         const template = html`<template><span>${x => x.label}</span><button ?disabled="${x => x.disabled}"></button></template>`;
         const result = convertTemplate(template, "fast-multi");
@@ -162,6 +255,140 @@ test.describe("convertTemplate", async () => {
         assert.ok(result);
         assert.ok(result.includes("<svg>icon</svg>"), `got: ${result}`);
     });
+
+    test("should convert RepeatDirective factories to f-repeat directives", () => {
+        const itemTemplate = html<RepeatItem>`<li>${x => x.label}</li>`;
+        const template = html<RepeatHost>`<template><ul>${repeat(
+            x => x.items,
+            itemTemplate,
+            {
+                positioning: true,
+                recycle: false,
+            },
+        )}</ul></template>`;
+        const result = convertTemplate(template, "fast-repeat");
+
+        assert.ok(result);
+        assert.ok(
+            result.includes(
+                '<f-repeat value="{{item in items}}" positioning="true" recycle="false">',
+            ),
+            `got: ${result}`,
+        );
+        assert.ok(result.includes("<li>{{item.label}}</li>"), `got: ${result}`);
+        assert.ok(result.includes("</f-repeat>"), `got: ${result}`);
+        assert.ok(!result.includes("<!--fast-"), `got: ${result}`);
+    });
+
+    test("should convert RepeatDirective factories with inline templates", () => {
+        const template = html<RepeatHost>`<template><ul>${repeat(
+            x => x.items,
+            html<RepeatItem>`<li>${x => x.name}</li>`,
+        )}</ul></template>`;
+        const result = convertTemplate(template, "fast-repeat-inline");
+
+        assert.ok(result);
+        assert.ok(
+            result.includes('<f-repeat value="{{item in items}}">'),
+            `got: ${result}`,
+        );
+        assert.ok(result.includes("<li>{{item.name}}</li>"), `got: ${result}`);
+        assert.ok(result.includes("</f-repeat>"), `got: ${result}`);
+        assert.ok(!result.includes("<!--fast-"), `got: ${result}`);
+    });
+
+    test("should convert nested RepeatDirective factories", () => {
+        const childTemplate = html<RepeatChild>`<li>${x => x.name}</li>`;
+        const itemTemplate = html<RepeatItem>`<li>${x => x.label}<ol>${repeat(
+            x => x.children,
+            childTemplate,
+        )}</ol></li>`;
+        const template = html<RepeatHost>`<template><ul>${repeat(
+            x => x.items,
+            itemTemplate,
+        )}</ul></template>`;
+        const result = convertTemplate(template, "fast-repeat-nested");
+
+        assert.ok(result);
+        assert.ok(
+            result.includes('<f-repeat value="{{item in items}}">'),
+            `got: ${result}`,
+        );
+        assert.ok(
+            result.includes('<f-repeat value="{{item1 in item.children}}">'),
+            `got: ${result}`,
+        );
+        assert.ok(result.includes("{{item.label}}"), `got: ${result}`);
+        assert.ok(result.includes("{{item1.name}}"), `got: ${result}`);
+    });
+
+    test("should convert when bindings to f-when directives", () => {
+        const template = html<WhenHost>`<template>${when(
+            x => x.visible,
+            html<WhenHost>`<span>${x => x.label}</span>`,
+        )}</template>`;
+        const result = convertTemplate(template, "fast-when");
+
+        assert.ok(result);
+        assert.ok(result.includes('<f-when value="{{visible}}">'), `got: ${result}`);
+        assert.ok(result.includes("<span>{{label}}</span>"), `got: ${result}`);
+        assert.ok(result.includes("</f-when>"), `got: ${result}`);
+    });
+
+    test("should convert nested when bindings", () => {
+        const template = html<WhenHost>`<template>${when(
+            x => x.visible,
+            html<WhenHost>`${when(
+                x => x.ready,
+                html<WhenHost>`<span>${x => x.label}</span>`,
+            )}`,
+        )}</template>`;
+        const result = convertTemplate(template, "fast-when-nested");
+
+        assert.ok(result);
+        assert.ok(result.includes('<f-when value="{{visible}}">'), `got: ${result}`);
+        assert.ok(result.includes('<f-when value="{{ready}}">'), `got: ${result}`);
+        assert.ok(result.includes("<span>{{label}}</span>"), `got: ${result}`);
+    });
+
+    test("should convert when bindings inside repeat item templates", () => {
+        const itemTemplate = html<RepeatItem>`<li>${when(
+            x => x.visible,
+            html<RepeatItem>`<span>${x => x.label}</span>`,
+        )}</li>`;
+        const template = html<RepeatHost>`<template><ul>${repeat(
+            x => x.items,
+            itemTemplate,
+        )}</ul></template>`;
+        const result = convertTemplate(template, "fast-repeat-when");
+
+        assert.ok(result);
+        assert.ok(
+            result.includes('<f-repeat value="{{item in items}}">'),
+            `got: ${result}`,
+        );
+        assert.ok(result.includes('<f-when value="{{item.visible}}">'), `got: ${result}`);
+        assert.ok(result.includes("<span>{{item.label}}</span>"), `got: ${result}`);
+    });
+
+    test("should convert repeat directives inside when bindings", () => {
+        const template = html<WhenHost>`<template>${when(
+            x => x.visible,
+            html<WhenHost>`<ul>${repeat(
+                x => x.items,
+                html<RepeatItem>`<li>${x => x.name}</li>`,
+            )}</ul>`,
+        )}</template>`;
+        const result = convertTemplate(template, "fast-when-repeat");
+
+        assert.ok(result);
+        assert.ok(result.includes('<f-when value="{{visible}}">'), `got: ${result}`);
+        assert.ok(
+            result.includes('<f-repeat value="{{item in items}}">'),
+            `got: ${result}`,
+        );
+        assert.ok(result.includes("<li>{{item.name}}</li>"), `got: ${result}`);
+    });
 });
 
 test.describe("generateFTemplates", () => {
diff --git a/packages/fast-test-harness/src/build/generate-templates.ts b/packages/fast-test-harness/src/build/generate-templates.ts
index 61d8f4d35d0..9f6064d2a3e 100644
--- a/packages/fast-test-harness/src/build/generate-templates.ts
+++ b/packages/fast-test-harness/src/build/generate-templates.ts
@@ -24,11 +24,14 @@ import {
     clientSideOpenExpression,
     closeExpression,
     eventArgAccessor,
+    executionContextAccessor,
     openExpression,
 } from "@microsoft/fast-element/declarative-utilities.js";
 import { installDomShim } from "./dom-shim.js";
 
 const stylesMarker = `${openExpression}styles${closeExpression}`;
+const unescapedOpenExpression = "{{{";
+const unescapedCloseExpression = "}}}";
 const templateOpenTagPattern = /<template(?:\s[^>]*)?\s*\/?>/i;
 const templateWrapperTagPattern = /<template(?:\s[^>]*)?\s*\/?>|<\/template\s*>/gi;
 
@@ -40,6 +43,10 @@ function wrapDefaultExpression(expression: string): string {
     return `${openExpression}${expression}${closeExpression}`;
 }
 
+function wrapUnescapedExpression(expression: string): string {
+    return `${unescapedOpenExpression}${expression}${unescapedCloseExpression}`;
+}
+
 function attributeDirective(name: string, value: string): string {
     return `${attributeDirectivePrefix}${name}="${wrapClientExpression(value)}"`;
 }
@@ -143,27 +150,87 @@ interface Factory {
     dataBinding?: {
         evaluate: (...args: any[]) => any;
     };
+    templateBinding?: {
+        evaluate: (...args: any[]) => any;
+    };
 }
 
-/**
- * Extract a readable binding expression from a factory's evaluate function.
- */
-function extractBindingExpression(factory: Factory): string {
-    if (!factory?.dataBinding?.evaluate) {
-        return "";
+interface ConvertTemplateOptions {
+    sourcePrefix?: string;
+    repeatDepth?: number;
+}
+
+interface ConditionalTrace {
+    paths: string[];
+    usedPrimitive: boolean;
+}
+
+interface ConditionalTraceResult extends ConditionalTrace {
+    template: ViewTemplate | null;
+}
+
+function stripTemplateWrapper(html: string): string {
+    return html.replace(templateWrapperTagPattern, "").trim();
+}
+
+function getRepeatItemName(repeatDepth: number): string {
+    return repeatDepth === 0 ? "item" : `item${repeatDepth}`;
+}
+
+function convertInnerHTMLWrappers(html: string): string {
+    return html.replace(
+        /<div\s+:innerHTML="\{\{([^"{}]+)\}\}"\s*>\s*<\/div>/g,
+        (_match: string, expression: string) => wrapUnescapedExpression(expression),
+    );
+}
+
+function normalizeBindingExpression(
+    expression: string,
+    options: ConvertTemplateOptions = {},
+): string {
+    let normalized = expression
+        .replace(/\bc\.event\b/g, eventArgAccessor)
+        .replace(/\bc\./g, `${executionContextAccessor}.`)
+        .replace(/\bc\b/g, executionContextAccessor);
+
+    if (options.sourcePrefix) {
+        normalized = normalized
+            .replace(/\bx\./g, `${options.sourcePrefix}.`)
+            .replace(/\bx\b/g, options.sourcePrefix);
+    } else {
+        normalized = normalized.replace(/\bx\./g, "");
     }
 
-    const fnStr = factory.dataBinding.evaluate.toString();
+    return normalized;
+}
+
+function extractExpression(
+    expression: (...args: any[]) => any,
+    options: ConvertTemplateOptions = {},
+): string {
+    const fnStr = expression.toString();
     const arrowMatch = fnStr.match(/=>\s*(.+)$/s);
     if (arrowMatch) {
-        let expr = arrowMatch[1].trim();
-        expr = expr.replace(/\bx\./g, "").replace(/c\.event\b/g, eventArgAccessor);
-        return expr;
+        return normalizeBindingExpression(arrowMatch[1].trim(), options);
     }
 
     return fnStr;
 }
 
+/**
+ * Extract a readable binding expression from a factory's evaluate function.
+ */
+function extractBindingExpression(
+    factory: Factory,
+    options: ConvertTemplateOptions = {},
+): string {
+    if (!factory?.dataBinding?.evaluate) {
+        return "";
+    }
+
+    return extractExpression(factory.dataBinding.evaluate, options);
+}
+
 /**
  * Extract the `filter elements(...)` suffix for a slotted or children
  * directive.
@@ -226,14 +293,181 @@ function tryInlineStaticTemplate(factory: Factory): string | null {
     return null;
 }
 
-/**
- * Convert a ViewTemplate's html string and factories into an
- * f-template HTML string.
- */
-export function convertTemplate(
-    viewTemplate: ViewTemplate,
-    componentName: string,
+function resolveStaticTemplate(
+    binding: ((...args: any[]) => any) | undefined,
+): ViewTemplate | null {
+    if (!binding) {
+        return null;
+    }
+
+    try {
+        const result = binding({}, {});
+        if (result && typeof result === "object" && "html" in result) {
+            return result as ViewTemplate;
+        }
+    } catch {
+        // Dynamic template bindings cannot be reconstructed statically.
+    }
+
+    return null;
+}
+
+function isViewTemplate(value: unknown): value is ViewTemplate {
+    return !!value && typeof value === "object" && "html" in value;
+}
+
+function createTraceValue(path: string, trace: ConditionalTrace): any {
+    return new Proxy(Object.create(null), {
+        get(_target, property) {
+            if (property === Symbol.toPrimitive) {
+                return () => {
+                    trace.usedPrimitive = true;
+                    return 1;
+                };
+            }
+
+            if (property === "valueOf") {
+                return () => {
+                    trace.usedPrimitive = true;
+                    return 1;
+                };
+            }
+
+            if (property === "toString") {
+                return () => path;
+            }
+
+            if (typeof property === "symbol") {
+                return undefined;
+            }
+
+            const nestedPath = `${path}.${property}`;
+            trace.paths.push(nestedPath);
+            return createTraceValue(nestedPath, trace);
+        },
+    });
+}
+
+function createTraceRoot(
+    trace: ConditionalTrace,
+    rootPrefix: string | undefined,
+    propertiesAreFalsy: boolean,
+): any {
+    return new Proxy(Object.create(null), {
+        get(_target, property) {
+            if (typeof property === "symbol") {
+                return undefined;
+            }
+
+            const path = rootPrefix ? `${rootPrefix}.${property}` : String(property);
+            trace.paths.push(path);
+
+            if (propertiesAreFalsy) {
+                return false;
+            }
+
+            return createTraceValue(path, trace);
+        },
+    });
+}
+
+function getSingleTracePath(trace: ConditionalTrace): string | null {
+    const leafPaths = trace.paths.filter(
+        path =>
+            !trace.paths.some(other => other !== path && other.startsWith(`${path}.`)),
+    );
+
+    return leafPaths.length === 1 ? leafPaths[0] : null;
+}
+
+function evaluateConditionalTrace(
+    factory: Factory,
+    options: ConvertTemplateOptions,
+    propertiesAreFalsy: boolean,
+): ConditionalTraceResult {
+    const trace: ConditionalTrace = { paths: [], usedPrimitive: false };
+    const source = createTraceRoot(trace, options.sourcePrefix, propertiesAreFalsy);
+    const context = createTraceRoot(trace, executionContextAccessor, propertiesAreFalsy);
+
+    try {
+        const result = factory.dataBinding?.evaluate(source, context);
+        return {
+            ...trace,
+            template: isViewTemplate(result) ? result : null,
+        };
+    } catch {
+        return { ...trace, template: null };
+    }
+}
+
+function convertRepeatDirective(
+    factory: Factory,
+    options: ConvertTemplateOptions,
+): string | null {
+    if (factory.constructor.name !== "RepeatDirective") {
+        return null;
+    }
+
+    const itemsExpression = extractBindingExpression(factory, options);
+    const itemTemplate = resolveStaticTemplate(factory.templateBinding?.evaluate);
+    if (!itemTemplate) {
+        return null;
+    }
+
+    const repeatOptions = factory.options ?? {};
+    const repeatDepth = options.repeatDepth ?? 0;
+    const itemName = getRepeatItemName(repeatDepth);
+    const positioningAttr = repeatOptions.positioning ? ' positioning="true"' : "";
+    const recycleAttr = repeatOptions.recycle === false ? ' recycle="false"' : "";
+    const content = stripTemplateWrapper(
+        convertTemplateHTML(itemTemplate, {
+            ...options,
+            sourcePrefix: itemName,
+            repeatDepth: repeatDepth + 1,
+        }),
+    );
+
+    return `<f-repeat value="${wrapDefaultExpression(`${itemName} in ${itemsExpression}`)}"${positioningAttr}${recycleAttr}>${content}</f-repeat>`;
+}
+
+function convertWhenDirective(
+    factory: Factory,
+    options: ConvertTemplateOptions,
 ): string | null {
+    if (factory.constructor.name !== "HTMLBindingDirective") {
+        return null;
+    }
+
+    const truthyTrace = evaluateConditionalTrace(factory, options, false);
+    const truthyPath = getSingleTracePath(truthyTrace);
+
+    if (truthyTrace.template && truthyPath && !truthyTrace.usedPrimitive) {
+        const falsyTrace = evaluateConditionalTrace(factory, options, true);
+        if (!falsyTrace.template && getSingleTracePath(falsyTrace) === truthyPath) {
+            const content = stripTemplateWrapper(
+                convertTemplateHTML(truthyTrace.template, options),
+            );
+            return `<f-when value="${wrapDefaultExpression(truthyPath)}">${content}</f-when>`;
+        }
+    }
+
+    const falsyTrace = evaluateConditionalTrace(factory, options, true);
+    const falsyPath = getSingleTracePath(falsyTrace);
+
+    if (falsyTrace.template && falsyPath && !falsyTrace.usedPrimitive) {
+        const content = stripTemplateWrapper(
+            convertTemplateHTML(falsyTrace.template, options),
+        );
+        return `<f-when value="${wrapDefaultExpression(`!${falsyPath}`)}">${content}</f-when>`;
+    }
+
+    return null;
+}
+
+function convertTemplateHTML(
+    viewTemplate: ViewTemplate,
+    options: ConvertTemplateOptions = {},
+): string {
     const { factories } = viewTemplate;
     const html =
         typeof viewTemplate.html === "string"
@@ -242,9 +476,7 @@ export function convertTemplate(
 
     const factoryEntries = Object.entries(factories);
     if (factoryEntries.length === 0) {
-        // No factories — pure static template.
-        const content = html.replace(templateWrapperTagPattern, "").trim();
-        return `<f-template name="${componentName}" shadowrootmode="open"><template>${stylesMarker}${content}</template></f-template>\n`;
+        return stripTemplateWrapper(html);
     }
 
     // Derive the binding marker prefix from the first factory key.
@@ -259,6 +491,20 @@ export function convertTemplate(
 
     let fContent = html;
 
+    // Structural repeat markers are emitted as comment nodes.
+    const repeatBindingRe = new RegExp(
+        `<!--${prefix}\\{(${prefix}-\\d+)\\}${prefix}-->`,
+        "g",
+    );
+    fContent = fContent.replace(repeatBindingRe, (match: string, factoryId: string) => {
+        const factory = factoryMap.get(factoryId);
+        if (!factory) {
+            return match;
+        }
+
+        return convertRepeatDirective(factory, options) ?? match;
+    });
+
     // Attribute-position markers → f-ref / f-slotted / f-children
     const attrBindingRe = new RegExp(
         `${prefix}-\\d+="${prefix}\\{(${prefix}-\\d+)\\}${prefix}"`,
@@ -289,15 +535,14 @@ export function convertTemplate(
                 typeof factory.options === "string"
                     ? factory.options
                     : factory.options?.property;
-            const filterStr = extractSlottedFilter(factory);
-            return attributeDirective("children", `${prop}${filterStr}`);
+            return attributeDirective("children", prop);
         }
         return match;
     });
 
     // Event bindings → @event="{handler(e)}"
     const eventBindingRe = new RegExp(
-        `(@[a-z]+)="${prefix}\\{(${prefix}-\\d+)\\}${prefix}"`,
+        `(@[^\\s=]+)="${prefix}\\{(${prefix}-\\d+)\\}${prefix}"`,
         "g",
     );
     fContent = fContent.replace(
@@ -307,7 +552,7 @@ export function convertTemplate(
             if (!factory) {
                 return match;
             }
-            const evalStr = extractBindingExpression(factory);
+            const evalStr = extractBindingExpression(factory, options);
             return `${aspect}="${wrapClientExpression(evalStr)}"`;
         },
     );
@@ -324,11 +569,13 @@ export function convertTemplate(
             if (!factory) {
                 return match;
             }
-            const evalStr = extractBindingExpression(factory);
+            const evalStr = extractBindingExpression(factory, options);
             return `${aspect}="${wrapDefaultExpression(evalStr)}"`;
         },
     );
 
+    fContent = convertInnerHTMLWrappers(fContent);
+
     // Attribute-value and content bindings → attr="{{propName}}" or inline HTML
     const valBindingRe = new RegExp(`${prefix}\\{(${prefix}-\\d+)\\}${prefix}`, "g");
     fContent = fContent.replace(valBindingRe, (match: string, factoryId: string) => {
@@ -337,15 +584,46 @@ export function convertTemplate(
             return match;
         }
 
+        const whenDirective = convertWhenDirective(factory, options);
+        if (whenDirective !== null) {
+            return whenDirective;
+        }
+
         const inlined = tryInlineStaticTemplate(factory);
         if (inlined !== null) {
             return inlined;
         }
 
-        const evalStr = extractBindingExpression(factory);
+        const evalStr = extractBindingExpression(factory, options);
         return wrapDefaultExpression(evalStr);
     });
 
+    return fContent;
+}
+
+/**
+ * Convert a ViewTemplate's html string and factories into an
+ * f-template HTML string.
+ */
+export function convertTemplate(
+    viewTemplate: ViewTemplate,
+    componentName: string,
+): string | null {
+    const { factories } = viewTemplate;
+    const html =
+        typeof viewTemplate.html === "string"
+            ? viewTemplate.html
+            : viewTemplate.html.innerHTML;
+
+    const factoryEntries = Object.entries(factories);
+    if (factoryEntries.length === 0) {
+        // No factories — pure static template.
+        const content = html.replace(templateWrapperTagPattern, "").trim();
+        return `<f-template name="${componentName}" shadowrootmode="open"><template>${stylesMarker}${content}</template></f-template>\n`;
+    }
+
+    const fContent = convertTemplateHTML(viewTemplate);
+
     let fInner = fContent.trim();
     if (!templateOpenTagPattern.test(fInner)) {
         fInner = `<template>${fInner}</template>`;
diff --git a/packages/fast-test-harness/src/build/generate-webui-templates.test.ts b/packages/fast-test-harness/src/build/generate-webui-templates.test.ts
index 3fee85bea9a..e1e43409675 100644
--- a/packages/fast-test-harness/src/build/generate-webui-templates.test.ts
+++ b/packages/fast-test-harness/src/build/generate-webui-templates.test.ts
@@ -153,6 +153,80 @@ test.describe("generateWebuiTemplates", () => {
         assert.ok(!html.includes("shadowrootdelegatesfocus"));
     });
 
+    test("should convert f-when directives to webui if directives", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "conditional.template.js"),
+            `export const template = {
+                html: '<template><f-when value="{{count > 0}}"><span>{{label}}</span></f-when></template>',
+                factories: {}
+            };`,
+        );
+
+        await generateWebuiTemplates({ cwd: tempDir, tagPrefix: "fast" });
+
+        const html = await readFile(
+            join(distDir, "conditional.template-webui.html"),
+            "utf8",
+        );
+        assert.ok(
+            html.includes('<if condition="count > 0"><span>{{label}}</span></if>'),
+            `got: ${html}`,
+        );
+        assert.ok(!html.includes("f-when"), `got: ${html}`);
+    });
+
+    test("should convert f-repeat directives to webui for directives", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "list.template.js"),
+            `export const template = {
+                html: '<template><ul><f-repeat value="{{item in items}}" positioning="true" recycle="false"><li>{{item.name}}</li></f-repeat></ul></template>',
+                factories: {}
+            };`,
+        );
+
+        await generateWebuiTemplates({ cwd: tempDir, tagPrefix: "fast" });
+
+        const html = await readFile(join(distDir, "list.template-webui.html"), "utf8");
+        assert.ok(
+            html.includes('<for each="item in items"><li>{{item.name}}</li></for>'),
+            `got: ${html}`,
+        );
+        assert.ok(!html.includes("f-repeat"), `got: ${html}`);
+        assert.ok(!html.includes("positioning"), `got: ${html}`);
+        assert.ok(!html.includes("recycle"), `got: ${html}`);
+    });
+
+    test("should convert nested f-when and f-repeat directives", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "nested.template.js"),
+            `export const template = {
+                html: '<template><f-when value="{{show}}"><f-repeat value="{{item in items}}"><p>{{item}}</p></f-repeat></f-when></template>',
+                factories: {}
+            };`,
+        );
+
+        await generateWebuiTemplates({ cwd: tempDir, tagPrefix: "fast" });
+
+        const html = await readFile(join(distDir, "nested.template-webui.html"), "utf8");
+        assert.ok(
+            html.includes(
+                '<if condition="show"><for each="item in items"><p>{{item}}</p></for></if>',
+            ),
+            `got: ${html}`,
+        );
+        assert.ok(!html.includes("f-when"), `got: ${html}`);
+        assert.ok(!html.includes("f-repeat"), `got: ${html}`);
+    });
+
     test("should strip the {{styles}} marker from output", async () => {
         const distDir = join(tempDir, "dist");
         await mkdir(distDir, { recursive: true });
diff --git a/packages/fast-test-harness/src/build/generate-webui-templates.ts b/packages/fast-test-harness/src/build/generate-webui-templates.ts
index e8b088ac11f..f8e0677bb35 100644
--- a/packages/fast-test-harness/src/build/generate-webui-templates.ts
+++ b/packages/fast-test-harness/src/build/generate-webui-templates.ts
@@ -7,6 +7,7 @@
  * different wrapper:
  * - `<template shadowrootmode="open">` instead of `<f-template name="...">`
  * - No `{{styles}}` placeholder (styles are linked externally)
+ * - `<f-when>` / `<f-repeat>` are converted to WebUI `<if>` / `<for>` blocks
  * - Shadow options (e.g. `shadowrootdelegatesfocus`) propagated from the
  *   companion `*.definition-async.js` module
  *
@@ -41,6 +42,155 @@ const escapedStylesMarker = new RegExp(
     "g",
 );
 
+function isTagBoundary(char: string): boolean {
+    return char === "" || /[\s>/]/.test(char);
+}
+
+function startsWithTag(html: string, index: number, tagName: string): boolean {
+    return (
+        html.startsWith(`<${tagName}`, index) &&
+        isTagBoundary(html[index + tagName.length + 1] ?? "")
+    );
+}
+
+function findTagEnd(html: string, start: number): number {
+    let quote: string | null = null;
+
+    for (let index = start; index < html.length; index++) {
+        const char = html[index];
+        if (quote) {
+            if (char === quote) {
+                quote = null;
+            }
+            continue;
+        }
+
+        if (char === '"' || char === "'") {
+            quote = char;
+            continue;
+        }
+
+        if (char === ">") {
+            return index;
+        }
+    }
+
+    return -1;
+}
+
+function extractQuotedAttribute(tag: string, name: string): string | null {
+    let index = 1;
+
+    while (index < tag.length) {
+        while (index < tag.length && /\s/.test(tag[index])) {
+            index++;
+        }
+
+        if (tag[index] === ">" || tag[index] === "/") {
+            break;
+        }
+
+        const nameStart = index;
+        while (index < tag.length && !/[\s=>/]/.test(tag[index])) {
+            index++;
+        }
+        const attrName = tag.slice(nameStart, index);
+
+        while (index < tag.length && /\s/.test(tag[index])) {
+            index++;
+        }
+
+        if (tag[index] !== "=") {
+            continue;
+        }
+
+        index++;
+        while (index < tag.length && /\s/.test(tag[index])) {
+            index++;
+        }
+
+        const quote = tag[index];
+        if (quote !== '"' && quote !== "'") {
+            continue;
+        }
+
+        const valueStart = index + 1;
+        const valueEnd = tag.indexOf(quote, valueStart);
+        if (valueEnd === -1) {
+            return null;
+        }
+
+        if (attrName === name) {
+            return tag.slice(valueStart, valueEnd);
+        }
+
+        index = valueEnd + 1;
+    }
+
+    return null;
+}
+
+function unwrapDefaultExpression(value: string): string | null {
+    const trimmed = value.trim();
+    if (!trimmed.startsWith(openExpression) || !trimmed.endsWith(closeExpression)) {
+        return null;
+    }
+
+    return trimmed.slice(openExpression.length, -closeExpression.length).trim();
+}
+
+function convertFastDirectivesToWebui(html: string): string {
+    let result = "";
+    let index = 0;
+
+    while (index < html.length) {
+        if (html.startsWith("</f-when>", index)) {
+            result += "</if>";
+            index += "</f-when>".length;
+            continue;
+        }
+
+        if (html.startsWith("</f-repeat>", index)) {
+            result += "</for>";
+            index += "</f-repeat>".length;
+            continue;
+        }
+
+        if (startsWithTag(html, index, "f-when")) {
+            const tagEnd = findTagEnd(html, index);
+            if (tagEnd !== -1) {
+                const tag = html.slice(index, tagEnd + 1);
+                const value = extractQuotedAttribute(tag, "value");
+                const expression = value ? unwrapDefaultExpression(value) : null;
+                if (expression !== null) {
+                    result += `<if condition="${expression}">`;
+                    index = tagEnd + 1;
+                    continue;
+                }
+            }
+        }
+
+        if (startsWithTag(html, index, "f-repeat")) {
+            const tagEnd = findTagEnd(html, index);
+            if (tagEnd !== -1) {
+                const tag = html.slice(index, tagEnd + 1);
+                const value = extractQuotedAttribute(tag, "value");
+                const expression = value ? unwrapDefaultExpression(value) : null;
+                if (expression !== null) {
+                    result += `<for each="${expression}">`;
+                    index = tagEnd + 1;
+                    continue;
+                }
+            }
+        }
+
+        result += html[index];
+        index++;
+    }
+
+    return result;
+}
+
 export interface GenerateWebuiTemplatesOptions {
     /**
      * Root directory of the package. Defaults to `process.cwd()`.
@@ -122,6 +272,9 @@ function fTemplateToWebui(
     // Remove {{styles}} placeholder.
     inner = inner.replace(escapedStylesMarker, "");
 
+    // Convert FAST declarative template directives to WebUI template directives.
+    inner = convertFastDirectivesToWebui(inner);
+
     // Replace the opening <template> tag with one that includes shadow attributes.
     const extraAttrs = Object.entries(shadowAttrs)
         .map(([k, v]) => (v ? ` ${k}="${v}"` : ` ${k}`))