diff --git a/change/@microsoft-fast-build-55a1f33b-494e-4e34-b3f9-57a8648e4a3a.json b/change/@microsoft-fast-build-55a1f33b-494e-4e34-b3f9-57a8648e4a3a.json
new file mode 100644
index 00000000000..13044ef5d4d
--- /dev/null
+++ b/change/@microsoft-fast-build-55a1f33b-494e-4e34-b3f9-57a8648e4a3a.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: auto-escape code samples inside `<code>` elements during SSR — braces (`{`/`}`) everywhere and the angle brackets of FAST directive tags (`<f-when>`, `<f-repeat>`) — so literal binding-like text and directive syntax render correctly while real HTML/custom elements inside `<code>` remain live DOM elements. Also exposes a new `escape_code_samples(html)` WASM export so build-time tooling can apply the same escape to author HTML that is injected into a rendered page outside the normal render pipeline.",
+  "packageName": "@microsoft/fast-build",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-html-93d1977d-5780-49d1-8ef2-9834af8fea3e.json b/change/@microsoft-fast-html-93d1977d-5780-49d1-8ef2-9834af8fea3e.json
new file mode 100644
index 00000000000..3187d923e6d
--- /dev/null
+++ b/change/@microsoft-fast-html-93d1977d-5780-49d1-8ef2-9834af8fea3e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: auto-escape `{` and `}` inside `<code>` elements so binding-like syntax in code samples renders as literal text (mirrors webui-press and the server-side `escape_code_sample_elements` pass in `@microsoft/fast-build`, which additionally handles `<f-when>`/`<f-repeat>` directive tags)",
+  "packageName": "@microsoft/fast-html",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/crates/microsoft-fast-build/DESIGN.md b/crates/microsoft-fast-build/DESIGN.md
index 3f118733182..b68e749815e 100644
--- a/crates/microsoft-fast-build/DESIGN.md
+++ b/crates/microsoft-fast-build/DESIGN.md
@@ -41,7 +41,7 @@ render_template(template, state_str)
 | Module | Role |
 |--------|------|
 | `lib.rs` | Public API surface — render functions, `pub use` re-exports, and config types |
-| `renderer.rs` | Thin entry points converting the public API into `render_node` calls |
+| `renderer.rs` | Thin entry points converting the public API into `render_node` calls. Preprocesses the top-level `template` string through `escape_code_sample_elements` so `{`/`}` characters (and the angle brackets of FAST directive tags such as `<f-when>` / `<f-repeat>`) inside any `<code>` element are entity-escaped before binding/directive scanning |
 | `node.rs` | The main rendering loop — scans for directives, handles attribute bindings in hydration mode |
 | `directive.rs` | `Directive` enum, `next_directive` scanner, and all directive renderers |
 | `content.rs` | `{{expr}}` and `{{{expr}}}` binding renderers, `html_escape` |
@@ -52,9 +52,10 @@ render_template(template, state_str)
 | `expression.rs` | Boolean expression evaluator for `<f-when value="{{…}}">` |
 | `hydration.rs` | `HydrationScope` — binding index tracking and named marker generation per template scope |
 | `json.rs` | Hand-rolled JSON parser producing `JsonValue` |
-| `locator.rs` | `Locator` struct — maps element names to template strings; glob scanner; `<f-template>` parser. Also captures the inner `<template>` element's attributes as **host attributes** for propagation onto the rendered host element opening tag. |
+| `locator.rs` | `Locator` struct — maps element names to template strings; glob scanner; `<f-template>` parser. Stored template bodies are first run through `escape_code_sample_elements` so `{`/`}` characters and the angle brackets of FAST directive tags (`<f-when>`, `<f-repeat>`) inside `<code>` elements are entity-escaped and therefore not interpreted as binding delimiters or directives. Also captures the inner `<template>` element's attributes as **host attributes** for propagation onto the rendered host element opening tag. |
+| `code_escape.rs` | `escape_code_sample_elements` — auto-escape preprocessor used by both `renderer.rs` and `locator.rs`. Walks the HTML and, inside every `<code>` element (including nested ones and attribute values of descendants), replaces `{` → `&#123;` and `}` → `&#125;` so that binding-like syntax in code samples renders literally. Additionally rewrites the `<` / `>` of every FAST directive tag (`<f-when>`, `</f-when>`, `<f-repeat>`, `</f-repeat>`) it finds inside `<code>` as `&lt;` / `&gt;`, so authors can write directives literally without manual entity escaping; tag-name matching is case-insensitive. Real HTML elements (`<button>`) and custom elements (`<my-widget>`) inside `<code>` keep their angle brackets and continue to render as live DOM elements. The brace half of the escape mirrors the JavaScript-side `escapeBracesInCodeElements` in `@microsoft/fast-html`; the directive-tag angle escape is server-only because the DOM serializer re-encodes `<`/`>` in text content so the client never sees a raw directive tag inside `<code>`. Modeled on Microsoft WebUI's `webui-press` markdown renderer, which auto-escapes the same characters inside code spans and code fences |
 | `error.rs` | `RenderError` enum with `Display` impl and helpers |
-| `wasm.rs` | WASM bindings (`#[cfg(target_arch = "wasm32")]`) — exposes `render`, `render_with_templates`, `render_entry_with_templates`, and `parse_f_templates` to JavaScript |
+| `wasm.rs` | WASM bindings (`#[cfg(target_arch = "wasm32")]`) — exposes `render`, `render_with_templates`, `render_entry_with_templates`, `parse_f_templates`, and `escape_code_samples` (a stand-alone wrapper around `escape_code_sample_elements` for build-time tooling that injects raw author HTML — for example `<f-template>` definitions — into a rendered page outside the normal `render_*` pipeline) to JavaScript |
 
 ---
 
diff --git a/crates/microsoft-fast-build/src/code_escape.rs b/crates/microsoft-fast-build/src/code_escape.rs
new file mode 100644
index 00000000000..2374c38d3d5
--- /dev/null
+++ b/crates/microsoft-fast-build/src/code_escape.rs
@@ -0,0 +1,718 @@
+//! Auto-escape FAST template syntax inside `<code>` elements so that
+//! code samples render as literal text without disabling real DOM
+//! elements that happen to live inside the sample.
+//!
+//! FAST templates that include code samples often contain literal text
+//! such as `{{greeting}}` or `<f-when value="…">…</f-when>` that the
+//! template parser would otherwise interpret as data bindings or
+//! directives. Mirroring the approach taken by Microsoft WebUI's
+//! `webui-press` markdown renderer (`crates/webui-press/src/markdown.rs`),
+//! this preprocessing pass walks the input HTML, finds every `<code>`
+//! element, and rewrites its content as follows:
+//!
+//! - Every `{` becomes `&#123;` and every `}` becomes `&#125;`, in
+//!   text *and* in attribute values of any descendant element. This
+//!   neutralises both the text-binding (`{{x}}`, `{{{x}}}`) and the
+//!   attribute-binding (`{x}`) delimiters everywhere inside the code
+//!   sample.
+//! - The `<` and `>` of every `<f-when>` / `</f-when>` /
+//!   `<f-repeat>` / `</f-repeat>` tag (open, close, or self-closing)
+//!   are rewritten as `&lt;` / `&gt;` so the FAST parser does not
+//!   match the directive substring. Non-directive elements — real
+//!   HTML elements (`<button>`, `<span>`) and custom elements
+//!   (`<my-widget>`) — are left intact so they continue to render
+//!   as real DOM elements inside the code sample.
+//!
+//! Existing `&`-prefixed entity references (`&amp;`, `&lt;`,
+//! `&#123;`, …) are deliberately **not** re-encoded so previously
+//! escaped content is preserved verbatim. The pass is a no-op for
+//! input that does not contain a `<code` substring, and is
+//! idempotent: a second pass over already-preprocessed HTML produces
+//! the same output (no unescaped braces remain, and no raw directive
+//! tags remain, inside any `<code>` element).
+//!
+//! ## Division of responsibility with the client-side parser
+//!
+//! The client-side `<f-template>` parser also applies a brace-only
+//! escape (`escapeBracesInCodeElements` in `@microsoft/fast-html`).
+//! That client pass is required because `&#123;` / `&#125;` entity
+//! references are *decoded* into literal `{` / `}` characters by the
+//! browser's HTML parser when the page is loaded, and the DOM
+//! serializer used by `.innerHTML` does not re-encode them — so a
+//! server-side brace escape alone would be undone by the time the
+//! client parses the template. `<` and `>`, by contrast, *are*
+//! re-encoded by the serializer (they're "must-escape" characters
+//! for text-node content), so escaping them server-side is
+//! sufficient — the client never sees a raw `<f-when>` tag inside
+//! `<code>` regardless of what the author originally wrote. The
+//! Rust crate is therefore solely responsible for directive-tag
+//! neutralisation; the JS pass only re-applies the brace escape.
+
+/// HTML void elements that have no content and therefore no matching
+/// close tag. Included for completeness in `parse_opening_tag` so a
+/// `<code />` style self-closing form is handled correctly even though
+/// the parser also recognises the explicit XHTML-style self-close.
+const VOID_ELEMENTS: &[&str] = &[
+    "area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta",
+    "param", "source", "track", "wbr",
+];
+
+const CODE_ELEMENT: &str = "code";
+
+/// FAST directive tag names whose `<` / `>` are rewritten when they
+/// appear inside a `<code>` element. The set is deliberately narrow:
+/// it must mirror the literal-substring patterns the `@microsoft/fast-html`
+/// runtime parser scans for (`syntax.ts` → `repeatDirectiveOpen` /
+/// `whenDirectiveOpen` etc.) so that no FAST directive can survive
+/// inside a code sample, while leaving every non-directive element
+/// (including user-authored custom elements) functional as part of
+/// the rendered sample.
+const DIRECTIVE_TAGS: &[&str] = &["f-when", "f-repeat"];
+
+/// Apply `<code>` code-sample escape preprocessing to an HTML string.
+/// Returns a new string with `{` / `}` characters replaced by their
+/// HTML numeric character references (`&#123;` / `&#125;`) inside every
+/// `<code>` element, and with the `<` / `>` of every FAST directive
+/// tag (`<f-when>`, `</f-when>`, `<f-repeat>`, `</f-repeat>`) inside
+/// `<code>` rewritten as `&lt;` / `&gt;`. Non-directive elements
+/// inside `<code>` keep their angle brackets so they render as real
+/// DOM elements. Content outside `<code>` is left untouched.
+pub fn escape_code_sample_elements(html: &str) -> String {
+    if !html.contains("<code") {
+        return html.to_string();
+    }
+
+    let bytes = html.as_bytes();
+    let mut result = String::with_capacity(html.len());
+    let mut pos = 0;
+
+    while pos < bytes.len() {
+        let lt = match find_byte(bytes, pos, b'<') {
+            Some(p) => p,
+            None => {
+                result.push_str(&html[pos..]);
+                break;
+            }
+        };
+
+        if html[lt..].starts_with("<!--") {
+            let end = html[lt + 4..]
+                .find("-->")
+                .map(|e| lt + 4 + e + 3)
+                .unwrap_or(html.len());
+            result.push_str(&html[pos..end]);
+            pos = end;
+            continue;
+        }
+
+        let opening = match parse_opening_tag(html, lt) {
+            Some(o) => o,
+            None => {
+                result.push_str(&html[pos..lt + 1]);
+                pos = lt + 1;
+                continue;
+            }
+        };
+
+        if opening.tag_name != CODE_ELEMENT {
+            result.push_str(&html[pos..opening.tag_end]);
+            pos = opening.tag_end;
+            continue;
+        }
+
+        result.push_str(&html[pos..opening.tag_end]);
+
+        if opening.is_self_closing {
+            pos = opening.tag_end;
+            continue;
+        }
+
+        let close_start =
+            find_matching_close_tag(html, opening.content_start, CODE_ELEMENT);
+        let inner = &html[opening.content_start..close_start];
+        result.push_str(&escape_code_sample_inner(inner));
+        pos = close_start;
+    }
+
+    result
+}
+
+struct OpeningTag {
+    tag_name: String,
+    tag_end: usize,
+    content_start: usize,
+    is_self_closing: bool,
+}
+
+fn find_byte(bytes: &[u8], start: usize, needle: u8) -> Option<usize> {
+    bytes[start..]
+        .iter()
+        .position(|&b| b == needle)
+        .map(|p| p + start)
+}
+
+fn is_attr_name_byte(b: u8) -> bool {
+    !matches!(
+        b,
+        b' ' | b'\t' | b'\n' | b'\r' | b'\x0C' | b'=' | b'>' | b'/'
+    )
+}
+
+fn parse_opening_tag(html: &str, pos: usize) -> Option<OpeningTag> {
+    let bytes = html.as_bytes();
+    if pos >= bytes.len() || bytes[pos] != b'<' {
+        return None;
+    }
+    let next = bytes.get(pos + 1).copied().unwrap_or(0);
+    if next == b'/' || next == b'!' || next == b'?' {
+        return None;
+    }
+    if !next.is_ascii_alphabetic() {
+        return None;
+    }
+
+    let mut name_end = pos + 1;
+    while name_end < bytes.len() {
+        let b = bytes[name_end];
+        if b.is_ascii_alphanumeric() || b == b'-' {
+            name_end += 1;
+        } else {
+            break;
+        }
+    }
+    let tag_name = html[pos + 1..name_end].to_ascii_lowercase();
+    if tag_name.is_empty() {
+        return None;
+    }
+
+    let mut cursor = name_end;
+
+    while cursor < bytes.len() {
+        while cursor < bytes.len() && bytes[cursor].is_ascii_whitespace() {
+            cursor += 1;
+        }
+        if cursor >= bytes.len() {
+            return None;
+        }
+        let b = bytes[cursor];
+        if b == b'>' {
+            break;
+        }
+        if b == b'/' && bytes.get(cursor + 1).copied() == Some(b'>') {
+            break;
+        }
+        while cursor < bytes.len() && is_attr_name_byte(bytes[cursor]) {
+            cursor += 1;
+        }
+        let mut after = cursor;
+        while after < bytes.len() && bytes[after].is_ascii_whitespace() {
+            after += 1;
+        }
+        if bytes.get(after).copied() == Some(b'=') {
+            cursor = after + 1;
+            while cursor < bytes.len() && bytes[cursor].is_ascii_whitespace() {
+                cursor += 1;
+            }
+            let quote = bytes.get(cursor).copied().unwrap_or(0);
+            if quote == b'"' || quote == b'\'' {
+                let q_end = find_byte(bytes, cursor + 1, quote);
+                cursor = q_end.map(|e| e + 1).unwrap_or(bytes.len());
+            } else {
+                while cursor < bytes.len()
+                    && !bytes[cursor].is_ascii_whitespace()
+                    && bytes[cursor] != b'>'
+                {
+                    cursor += 1;
+                }
+            }
+        }
+    }
+
+    let mut is_self_closing = false;
+    if bytes.get(cursor).copied() == Some(b'/') && bytes.get(cursor + 1).copied() == Some(b'>') {
+        is_self_closing = true;
+        cursor += 2;
+    } else if bytes.get(cursor).copied() == Some(b'>') {
+        cursor += 1;
+    } else {
+        return None;
+    }
+
+    if VOID_ELEMENTS.iter().any(|v| *v == tag_name) {
+        is_self_closing = true;
+    }
+
+    Some(OpeningTag {
+        tag_name,
+        tag_end: cursor,
+        content_start: cursor,
+        is_self_closing,
+    })
+}
+
+fn find_matching_close_tag(html: &str, content_start: usize, tag_name: &str) -> usize {
+    let bytes = html.as_bytes();
+    let mut depth = 1usize;
+    let mut pos = content_start;
+    let close_needle = format!("</{}", tag_name);
+
+    while pos < bytes.len() {
+        let lt = match find_byte(bytes, pos, b'<') {
+            Some(p) => p,
+            None => return html.len(),
+        };
+
+        if html[lt..].len() >= close_needle.len() {
+            let slice_lower = html[lt..lt + close_needle.len()].to_ascii_lowercase();
+            if slice_lower == close_needle {
+                let after = bytes.get(lt + close_needle.len()).copied().unwrap_or(0);
+                if after == b'>' || after.is_ascii_whitespace() {
+                    depth -= 1;
+                    if depth == 0 {
+                        return lt;
+                    }
+                    let gt = find_byte(bytes, lt, b'>');
+                    pos = gt.map(|e| e + 1).unwrap_or(html.len());
+                    continue;
+                }
+            }
+        }
+
+        if html[lt..].starts_with("<!--") {
+            let end = html[lt + 4..]
+                .find("-->")
+                .map(|e| lt + 4 + e + 3)
+                .unwrap_or(html.len());
+            pos = end;
+            continue;
+        }
+        let nb = bytes.get(lt + 1).copied().unwrap_or(0);
+        if nb == b'!' || nb == b'?' || nb == b'/' {
+            let gt = find_byte(bytes, lt, b'>');
+            pos = gt.map(|e| e + 1).unwrap_or(html.len());
+            continue;
+        }
+
+        match parse_opening_tag(html, lt) {
+            Some(opening) => {
+                if opening.tag_name == tag_name && !opening.is_self_closing {
+                    depth += 1;
+                }
+                pos = opening.tag_end;
+            }
+            None => {
+                pos = lt + 1;
+            }
+        }
+    }
+
+    html.len()
+}
+
+/// Two-pass escape for the inner content of a single `<code>` element.
+/// Pass 1 neutralises every brace; pass 2 rewrites the `<` / `>` of
+/// FAST directive tags only. The order does not matter for
+/// correctness — `parse_opening_tag` ignores `{` / `}` characters and
+/// the brace pass ignores `<` / `>` — but doing braces first keeps the
+/// directive scanner free of binding-syntax noise inside attribute
+/// values.
+fn escape_code_sample_inner(s: &str) -> String {
+    let with_braces = escape_braces_in_text(s);
+    escape_directive_tag_angles(&with_braces)
+}
+
+/// Byte-scan: find the next `{` or `}`, bulk-copy the rest. Mirrors
+/// the `emit_escaped` helper in `webui-press` (modulo `&`/`<`/`>`,
+/// which we intentionally leave alone here so pre-existing entity
+/// references are preserved verbatim and so non-directive markup
+/// continues to render as real elements).
+fn escape_braces_in_text(s: &str) -> String {
+    let bytes = s.as_bytes();
+    let mut out = String::with_capacity(s.len());
+    let mut start = 0;
+    for (i, &b) in bytes.iter().enumerate() {
+        let esc = match b {
+            b'{' => "&#123;",
+            b'}' => "&#125;",
+            _ => continue,
+        };
+        out.push_str(&s[start..i]);
+        out.push_str(esc);
+        start = i + 1;
+    }
+    out.push_str(&s[start..]);
+    out
+}
+
+/// Walk the input and, for every FAST directive tag (open, close, or
+/// self-closing) found, rewrite the entire tag with its `<` / `>`
+/// characters replaced by `&lt;` / `&gt;`. Any raw `<` or `>` inside
+/// the tag — for example the angle brackets of an operator in an
+/// attribute value — are also rewritten so the browser doesn't
+/// misparse the resulting text. Tags that are not FAST directives
+/// are left untouched.
+fn escape_directive_tag_angles(s: &str) -> String {
+    let bytes = s.as_bytes();
+    let mut out = String::with_capacity(s.len());
+    let mut pos = 0;
+
+    while pos < bytes.len() {
+        let lt = match find_byte(bytes, pos, b'<') {
+            Some(p) => p,
+            None => {
+                out.push_str(&s[pos..]);
+                break;
+            }
+        };
+        out.push_str(&s[pos..lt]);
+
+        if let Some(tag_end) = match_directive_tag(s, lt) {
+            out.push_str(&escape_html_angles(&s[lt..tag_end]));
+            pos = tag_end;
+        } else {
+            out.push('<');
+            pos = lt + 1;
+        }
+    }
+
+    out
+}
+
+/// Replace every `<` with `&lt;` and every `>` with `&gt;` in the
+/// input. Used to rewrite a complete directive tag (including any
+/// stray angle brackets that appear inside attribute values).
+fn escape_html_angles(s: &str) -> String {
+    let bytes = s.as_bytes();
+    let mut out = String::with_capacity(s.len());
+    let mut start = 0;
+    for (i, &b) in bytes.iter().enumerate() {
+        let esc = match b {
+            b'<' => "&lt;",
+            b'>' => "&gt;",
+            _ => continue,
+        };
+        out.push_str(&s[start..i]);
+        out.push_str(esc);
+        start = i + 1;
+    }
+    out.push_str(&s[start..]);
+    out
+}
+
+/// If `s[pos..]` begins with a FAST directive tag (open, close, or
+/// self-closing), returns `Some(tag_end)` where `tag_end` is the byte
+/// index immediately past the tag's closing `>`. Otherwise returns
+/// `None`. Tag name matching is ASCII-case-insensitive because
+/// browsers normalise HTML tag names to lowercase during parsing —
+/// an unescaped `<F-When>` would become a live `<f-when>` element
+/// after the DOM round-trip and re-activate the directive.
+fn match_directive_tag(s: &str, pos: usize) -> Option<usize> {
+    let bytes = s.as_bytes();
+    if bytes.get(pos).copied() != Some(b'<') {
+        return None;
+    }
+    let is_close = bytes.get(pos + 1).copied() == Some(b'/');
+    let name_start = if is_close { pos + 2 } else { pos + 1 };
+
+    let directive = DIRECTIVE_TAGS
+        .iter()
+        .copied()
+        .find(|d| slice_eq_ascii_ci(s, name_start, d))?;
+    let after_name = name_start + directive.len();
+    let next = bytes.get(after_name).copied().unwrap_or(0);
+
+    if is_close {
+        if !(next == b'>' || next.is_ascii_whitespace()) {
+            return None;
+        }
+        let mut cursor = after_name;
+        while cursor < bytes.len() {
+            match bytes[cursor] {
+                b'>' => return Some(cursor + 1),
+                b if b.is_ascii_whitespace() => cursor += 1,
+                _ => return None,
+            }
+        }
+        None
+    } else {
+        if !(next == b'>' || next == b'/' || next.is_ascii_whitespace()) {
+            return None;
+        }
+        parse_opening_tag(s, pos).map(|o| o.tag_end)
+    }
+}
+
+/// ASCII case-insensitive equality between `s[start..start + needle.len()]`
+/// and `needle`. `needle` must be ASCII-lowercase. Returns false if the
+/// slice is too short.
+fn slice_eq_ascii_ci(s: &str, start: usize, needle: &str) -> bool {
+    let bytes = s.as_bytes();
+    let n = needle.as_bytes();
+    if start + n.len() > bytes.len() {
+        return false;
+    }
+    for (i, &nb) in n.iter().enumerate() {
+        if bytes[start + i].to_ascii_lowercase() != nb {
+            return false;
+        }
+    }
+    true
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    // ---------------------------------------------------------------------
+    // Top-level passthrough / scope checks
+    // ---------------------------------------------------------------------
+
+    #[test]
+    fn passthrough_when_no_code_element() {
+        let input = "<div>{{foo}}</div>";
+        assert_eq!(escape_code_sample_elements(input), input);
+    }
+
+    #[test]
+    fn preserves_bindings_outside_code() {
+        let input = "<h1>{{a}}</h1><code>{{b}}</code><p>{{c}}</p>";
+        let expected =
+            "<h1>{{a}}</h1><code>&#123;&#123;b&#125;&#125;</code><p>{{c}}</p>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn preserves_directives_outside_code() {
+        // `<f-when>` outside any `<code>` element is left completely
+        // alone so real directives continue to work.
+        let input = "<f-when value=\"{{flag}}\">x</f-when>";
+        assert_eq!(escape_code_sample_elements(input), input);
+    }
+
+    #[test]
+    fn does_not_match_codepoint_tag() {
+        // A tag whose name *starts* with "code" but is something else
+        // must not be mistaken for `<code>` by the outer scanner.
+        let input = "<codepoint>{{x}}</codepoint>";
+        assert_eq!(escape_code_sample_elements(input), input);
+    }
+
+    // ---------------------------------------------------------------------
+    // Brace escape inside `<code>`
+    // ---------------------------------------------------------------------
+
+    #[test]
+    fn escapes_braces_inside_code() {
+        let input = "<code>{{greeting}}</code>";
+        let expected = "<code>&#123;&#123;greeting&#125;&#125;</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn escapes_single_brace_attribute_binding_text_inside_code() {
+        // The single-brace `{...}` attribute-binding syntax must also
+        // be neutralised so `button @click="{handler()}"` renders
+        // literally when written as text inside `<code>`.
+        let input = "<code>button @click=\"{handler()}\" /button</code>";
+        let expected =
+            "<code>button @click=\"&#123;handler()&#125;\" /button</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn code_with_attributes_on_the_code_element() {
+        let input = "<code class=\"hl\" lang=\"html\">{{x}}</code>";
+        let expected =
+            "<code class=\"hl\" lang=\"html\">&#123;&#123;x&#125;&#125;</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn self_closing_code_is_left_alone() {
+        // `<code />` has no content to escape; the opening tag is
+        // emitted as-is and a following sibling element is not touched.
+        let input = "<code /><p>{{x}}</p>";
+        let expected = "<code /><p>{{x}}</p>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    // ---------------------------------------------------------------------
+    // Directive-tag angle escape inside `<code>`
+    // ---------------------------------------------------------------------
+
+    #[test]
+    fn escapes_literal_f_when_directive_inside_code() {
+        // Authors can write a literal `<f-when>` inside `<code>`; both
+        // the angle brackets and the brace-binding syntax in the
+        // `value` attribute are neutralised.
+        let input = "<code><f-when value=\"{{flag}}\">wrapped</f-when></code>";
+        let expected = "<code>&lt;f-when value=\"&#123;&#123;flag&#125;&#125;\"&gt;wrapped&lt;/f-when&gt;</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn escapes_literal_f_repeat_directive_inside_code() {
+        let input =
+            "<code><f-repeat value=\"{{items}}\">i</f-repeat></code>";
+        let expected = "<code>&lt;f-repeat value=\"&#123;&#123;items&#125;&#125;\"&gt;i&lt;/f-repeat&gt;</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn escapes_self_closing_directive_inside_code() {
+        // The XHTML-style self-close form `<f-when … />` is also
+        // matched by the directive scanner.
+        let input = "<code><f-when value=\"{{flag}}\" /></code>";
+        let expected =
+            "<code>&lt;f-when value=\"&#123;&#123;flag&#125;&#125;\" /&gt;</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn escapes_uppercase_directive_tags_case_insensitively() {
+        // Browsers normalise HTML tag names to lowercase, so an
+        // unescaped `<F-When>` would become a live `<f-when>` element
+        // after the DOM round-trip and re-activate the directive. The
+        // server-side escape must therefore be case-insensitive.
+        let input = "<code><F-When value=\"{{flag}}\">x</F-When></code>";
+        let expected = "<code>&lt;F-When value=\"&#123;&#123;flag&#125;&#125;\"&gt;x&lt;/F-When&gt;</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn pre_escaped_directive_tags_inside_code_are_preserved() {
+        // If the author has already entity-encoded the angle brackets
+        // (carried over from older `&lt;f-when&gt;` authoring), the
+        // pass is a no-op for the angles — we don't re-encode `&` —
+        // and braces are still neutralised.
+        let input = "<code>&lt;f-when value=\"{{flag}}\"&gt;wrapped&lt;/f-when&gt;</code>";
+        let expected =
+            "<code>&lt;f-when value=\"&#123;&#123;flag&#125;&#125;\"&gt;wrapped&lt;/f-when&gt;</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn does_not_match_directive_name_prefix() {
+        // `<f-whenever>` must not be treated as `<f-when>` — only an
+        // exact directive name followed by `>`, `/`, or whitespace
+        // counts. The brace inside is still escaped because that
+        // pass runs everywhere inside `<code>`.
+        let input = "<code><f-whenever value=\"{{x}}\">y</f-whenever></code>";
+        let expected =
+            "<code><f-whenever value=\"&#123;&#123;x&#125;&#125;\">y</f-whenever></code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn escapes_directive_with_gt_inside_attribute_value() {
+        // `>` inside a quoted attribute value must be skipped by the
+        // tag-end scanner but *also* rewritten by the angle escape so
+        // the browser doesn't see a stray `>` in the entity-decoded
+        // text content of the surrounding `<code>` element.
+        let input = "<code><f-when value=\"x > 5\">y</f-when></code>";
+        let expected =
+            "<code>&lt;f-when value=\"x &gt; 5\"&gt;y&lt;/f-when&gt;</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn escapes_directive_with_lt_inside_attribute_value() {
+        // A raw `<` inside a quoted attribute value would otherwise be
+        // re-parsed by the browser as the start of a new tag once the
+        // outer entity is decoded; the angle escape rewrites it too.
+        let input = "<code><f-when value=\"a < b\">y</f-when></code>";
+        let expected =
+            "<code>&lt;f-when value=\"a &lt; b\"&gt;y&lt;/f-when&gt;</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    // ---------------------------------------------------------------------
+    // Real HTML elements / custom elements inside `<code>` survive
+    // ---------------------------------------------------------------------
+
+    #[test]
+    fn preserves_real_html_elements_inside_code() {
+        // A real `<button>` (or any non-directive HTML element) inside
+        // `<code>` keeps its angle brackets so the browser renders it
+        // as a live DOM element; only brace-binding text in its
+        // attributes is neutralised.
+        let input = "<code><button class=\"demo\">click</button></code>";
+        let expected =
+            "<code><button class=\"demo\">click</button></code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn preserves_custom_elements_inside_code() {
+        // Custom elements (`<my-widget>`) likewise survive — their
+        // angle brackets are not rewritten, but binding-like text in
+        // their attribute values is neutralised so the parser doesn't
+        // wire up a live binding to the rendered element.
+        let input =
+            "<code><my-widget data-x=\"{{value}}\">label</my-widget></code>";
+        let expected =
+            "<code><my-widget data-x=\"&#123;&#123;value&#125;&#125;\">label</my-widget></code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn handles_nested_code_with_real_inner_element() {
+        // The outer `<code>` scope is determined by depth tracking on
+        // the literal `<code>` / `</code>` tokens; the inner `<code>`
+        // is *not* a FAST directive so its angle brackets are kept,
+        // preserving the nested element. Braces in both scopes are
+        // still neutralised.
+        let input = "<code>outer {{x}} <code>inner {{y}}</code> tail</code>";
+        let expected = "<code>outer &#123;&#123;x&#125;&#125; <code>inner &#123;&#123;y&#125;&#125;</code> tail</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn mixed_real_element_and_directive_inside_code() {
+        // The `<button>` survives, the `<f-when>` is neutralised, and
+        // all brace bindings in either subtree are escaped.
+        let input = "<code><button>{{x}}</button>\
+                     <f-when value=\"{{flag}}\">y</f-when></code>";
+        let expected = "<code><button>&#123;&#123;x&#125;&#125;</button>\
+                        &lt;f-when value=\"&#123;&#123;flag&#125;&#125;\"&gt;y&lt;/f-when&gt;</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    // ---------------------------------------------------------------------
+    // Round-trip / robustness
+    // ---------------------------------------------------------------------
+
+    #[test]
+    fn preserves_existing_entity_references() {
+        // `&amp;` / `&lt;` etc. inside `<code>` must not be re-encoded
+        // (that would produce double-escaped `&amp;amp;` and break
+        // round-tripping for content the author already escaped).
+        let input = "<code>R&amp;D : &lt;tag&gt; : &#123;raw&#125;</code>";
+        let expected = "<code>R&amp;D : &lt;tag&gt; : &#123;raw&#125;</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn idempotent_for_directive_and_brace_content() {
+        // After one pass the directive tags carry entity-encoded
+        // angles and the braces are entity-encoded; a second pass
+        // finds nothing new to escape.
+        let input =
+            "<code><f-when value=\"{{x}}\">y</f-when></code>";
+        let once = escape_code_sample_elements(input);
+        let twice = escape_code_sample_elements(&once);
+        assert_eq!(once, twice);
+    }
+
+    #[test]
+    fn idempotent_for_real_elements_in_code() {
+        // Real elements inside `<code>` round-trip unchanged on the
+        // second pass — only the braces in their attributes are
+        // escaped on the first pass, and nothing else changes.
+        let input =
+            "<code><button class=\"demo\">click {{x}}</button></code>";
+        let once = escape_code_sample_elements(input);
+        let twice = escape_code_sample_elements(&once);
+        assert_eq!(once, twice);
+    }
+}
diff --git a/crates/microsoft-fast-build/src/lib.rs b/crates/microsoft-fast-build/src/lib.rs
index 13e33fa90d2..9aaf5f4ddc6 100644
--- a/crates/microsoft-fast-build/src/lib.rs
+++ b/crates/microsoft-fast-build/src/lib.rs
@@ -64,6 +64,7 @@ mod config;
 mod content;
 mod directive;
 mod hydration;
+mod code_escape;
 mod node;
 mod renderer;
 mod error;
diff --git a/crates/microsoft-fast-build/src/locator.rs b/crates/microsoft-fast-build/src/locator.rs
index 8081fe58e60..64187827468 100644
--- a/crates/microsoft-fast-build/src/locator.rs
+++ b/crates/microsoft-fast-build/src/locator.rs
@@ -2,6 +2,7 @@ use std::collections::HashMap;
 use std::path::Path;
 use crate::attribute::{find_tag_end, parse_element_attributes};
 use crate::error::RenderError;
+use crate::code_escape::escape_code_sample_elements;
 
 #[derive(Debug, Clone, PartialEq, Eq)]
 pub(crate) struct FTemplate {
@@ -83,7 +84,7 @@ impl Locator {
                 "expected exactly one entry for element; duplicates rejected above and entries are only created when a template is added",
             );
             templates.insert(element, TemplateDefinition {
-                content: template.content,
+                content: escape_code_sample_elements(&template.content),
                 shadowroot_attributes: template.shadowroot_attributes,
                 host_attributes: template.host_attributes,
             });
@@ -103,7 +104,7 @@ impl Locator {
         let templates = templates
             .into_iter()
             .map(|(name, content)| (name, TemplateDefinition {
-                content,
+                content: escape_code_sample_elements(&content),
                 shadowroot_attributes: Vec::new(),
                 host_attributes: Vec::new(),
             }))
@@ -132,7 +133,7 @@ impl Locator {
             .map(|(name, (content, shadowroot_attributes, host_attributes))| (
                 name,
                 TemplateDefinition {
-                    content,
+                    content: escape_code_sample_elements(&content),
                     shadowroot_attributes,
                     host_attributes,
                 },
@@ -151,7 +152,7 @@ impl Locator {
     /// be merged onto the host element opening tag.
     pub fn add_template(&mut self, element_name: &str, content: &str) {
         self.templates.insert(element_name.to_string(), TemplateDefinition {
-            content: content.to_string(),
+            content: escape_code_sample_elements(content),
             shadowroot_attributes: Vec::new(),
             host_attributes: Vec::new(),
         });
@@ -176,7 +177,7 @@ impl Locator {
         host_attrs: &[(String, Option<String>)],
     ) {
         self.templates.insert(element_name.to_string(), TemplateDefinition {
-            content: content.to_string(),
+            content: escape_code_sample_elements(content),
             shadowroot_attributes: collect_shadowroot_attributes(shadowroot_attrs),
             host_attributes: host_attrs.to_vec(),
         });
diff --git a/crates/microsoft-fast-build/src/renderer.rs b/crates/microsoft-fast-build/src/renderer.rs
index 10e38e1bc6a..0fdc5f94570 100644
--- a/crates/microsoft-fast-build/src/renderer.rs
+++ b/crates/microsoft-fast-build/src/renderer.rs
@@ -3,17 +3,20 @@ use crate::error::RenderError;
 use crate::config::RenderConfig;
 use crate::node::render_node;
 use crate::locator::Locator;
+use crate::code_escape::escape_code_sample_elements;
 
 pub fn render(template: &str, root: &JsonValue, config: Option<&RenderConfig>) -> Result<String, RenderError> {
     let default = RenderConfig::default();
     let config = config.unwrap_or(&default);
-    render_node(template, root, &[], None, None, false, config)
+    let preprocessed = escape_code_sample_elements(template);
+    render_node(&preprocessed, root, &[], None, None, false, config)
 }
 
 pub fn render_with_locator(template: &str, root: &JsonValue, locator: &Locator, config: Option<&RenderConfig>) -> Result<String, RenderError> {
     let default = RenderConfig::default();
     let config = config.unwrap_or(&default);
-    render_node(template, root, &[], Some(locator), None, false, config)
+    let preprocessed = escape_code_sample_elements(template);
+    render_node(&preprocessed, root, &[], Some(locator), None, false, config)
 }
 
 /// Render the top-level **entry HTML** — custom elements found at this level use
@@ -22,5 +25,6 @@ pub fn render_with_locator(template: &str, root: &JsonValue, locator: &Locator,
 pub fn render_entry_with_locator(template: &str, root: &JsonValue, locator: &Locator, config: Option<&RenderConfig>) -> Result<String, RenderError> {
     let default = RenderConfig::default();
     let config = config.unwrap_or(&default);
-    render_node(template, root, &[], Some(locator), None, true, config)
+    let preprocessed = escape_code_sample_elements(template);
+    render_node(&preprocessed, root, &[], Some(locator), None, true, config)
 }
diff --git a/crates/microsoft-fast-build/src/wasm.rs b/crates/microsoft-fast-build/src/wasm.rs
index aa8d8ac0dbc..661906d4508 100644
--- a/crates/microsoft-fast-build/src/wasm.rs
+++ b/crates/microsoft-fast-build/src/wasm.rs
@@ -76,6 +76,30 @@ pub fn render_entry_with_templates(
     .map_err(|e| JsValue::from_str(&e.to_string()))
 }
 
+/// Apply the FAST code-sample escape to an HTML string.
+///
+/// Walks the input HTML and, for every `<code>` element, escapes:
+///
+/// * curly braces (`{` → `&#123;`, `}` → `&#125;`) in text content and
+///   attribute values — so the FAST template parser does not interpret
+///   `{{ ... }}` / `{ ... }` inside code samples as bindings;
+/// * angle brackets of FAST directive tags (`<f-when>`, `</f-when>`,
+///   `<f-repeat>`, `</f-repeat>`, case-insensitive) — so those directive
+///   tags surface as literal text instead of being activated as real
+///   elements. Angle brackets of any other tag (`<button>`, custom
+///   elements, …) are left untouched so they keep rendering as live DOM.
+///
+/// Non-`<code>` regions of the input are returned verbatim. The function
+/// is idempotent — running it on an already-escaped string is a no-op.
+///
+/// Intended for build-time tooling that needs to inject author-written
+/// HTML containing `<code>` samples into a rendered page without going
+/// through the full `render_*` pipeline.
+#[wasm_bindgen]
+pub fn escape_code_samples(html: &str) -> String {
+    crate::code_escape::escape_code_sample_elements(html)
+}
+
 /// Parse all `<f-template>` elements from an HTML string.
 /// Returns a JSON array of template metadata objects,
 /// one per `<f-template>` element found. `name` is `null` when the element has
diff --git a/packages/fast-html/DESIGN.md b/packages/fast-html/DESIGN.md
index a9eb08f4934..7a46560a677 100644
--- a/packages/fast-html/DESIGN.md
+++ b/packages/fast-html/DESIGN.md
@@ -231,6 +231,27 @@ The declarative syntax is a superset of HTML with three binding delimiters:
 | `f-children="{prop}"` | Children attribute directive |
 | `f-ref="{prop}"` | Element ref attribute directive |
 
+### Code-sample auto-escape
+
+Any text or attribute value inside a `<code>` element has its `{` and `}` characters automatically replaced with the HTML numeric character references `&#123;` and `&#125;` before template parsing. As a result, binding delimiters (`{{...}}`, `{{{...}}}`, `{...}`) inside `<code>` are rendered as literal text rather than being interpreted as FAST bindings — making `<code>` blocks safe for embedding code samples that contain binding-like syntax.
+
+```html
+<h1>{{title}}</h1>
+<pre><code>span {{greeting}} /span</code></pre>
+```
+
+In the rendered DOM the `<h1>` binds to the `title` property, while the `<code>` displays the literal text `span {{greeting}} /span`.
+
+The server-side preprocessor (`escape_code_sample_elements` in `microsoft-fast-build`) additionally rewrites the `<` and `>` of every **FAST directive tag** (`<f-when>`, `</f-when>`, `<f-repeat>`, `</f-repeat>`) found inside `<code>` as `&lt;` and `&gt;`, so authors can write them literally:
+
+```html
+<pre><code><f-when value="{{flag}}">wrapped</f-when></code></pre>
+```
+
+renders the visible text `<f-when value="{{flag}}">wrapped</f-when>` without activating the directive. Tag-name matching is case-insensitive because browsers normalise HTML tag names to lowercase during parsing, so `<F-When>` would otherwise become a live `<f-when>` element after the DOM round-trip. Non-directive elements inside `<code>` — including real HTML elements (`<button>`) and custom elements (`<my-widget>`) — are deliberately **not** angle-escaped so they keep rendering as live DOM elements; only brace-binding syntax in their attribute values is neutralised.
+
+The brace escape runs in both the client-side `<f-template>` parser (`escapeBracesInCodeElements` in `utilities.ts`) and the server-side renderer (`escape_code_sample_elements` in `microsoft-fast-build`), guaranteeing identical binding positions between SSR output and client hydration. The directive-tag angle escape only needs to run on the server because the DOM serializer re-encodes `<`/`>` in text content (so the client never sees a raw `<f-when>` inside `<code>` regardless of what the page source contained). This approach is modeled on Microsoft WebUI's `webui-press` markdown renderer, which auto-escapes the same characters inside code spans and code fences.
+
 For full syntax reference see [README.md](./README.md).
 
 ---
diff --git a/packages/fast-html/README.md b/packages/fast-html/README.md
index ec89a3f89f9..3b884a47674 100644
--- a/packages/fast-html/README.md
+++ b/packages/fast-html/README.md
@@ -482,6 +482,28 @@ Example:
 {{{html}}}
 ```
 
+#### Code-sample auto-escape inside `<code>`
+
+Any text or attribute value inside a `<code>` element has its `{` and `}` characters automatically replaced with the HTML numeric character references `&#123;` and `&#125;` before template parsing. As a result, binding delimiters (`{{...}}`, `{{{...}}}`, `{...}`) inside `<code>` are rendered as literal text rather than being interpreted as FAST bindings — making `<code>` blocks safe for embedding code samples that contain binding-like syntax. No marker attribute is needed.
+
+In addition, the build-time renderer (`@microsoft/fast-build`) entity-escapes the `<` and `>` of every **FAST directive tag** (`<f-when>`, `</f-when>`, `<f-repeat>`, `</f-repeat>`) it finds inside `<code>`, so authors can write the directive literally without manually entity-encoding the angle brackets. Tag-name matching is case-insensitive. Non-directive elements inside `<code>` — real HTML elements such as `<button>` and custom elements such as `<my-widget>` — keep their angle brackets and continue to render as live DOM elements; only brace-binding syntax in their attribute values is neutralised.
+
+The brace escape is applied symmetrically by both the server-side renderer and the client-side `<f-template>` parser, so binding positions stay in sync between SSR and hydration. The directive-tag angle escape only needs to run on the server: the DOM serializer re-encodes `<`/`>` in text content, so the client-side parser never sees a raw `<f-when>` inside `<code>` regardless of what the page source contained. This behaviour mirrors how Microsoft WebUI's `webui-press` markdown renderer transparently escapes the same characters inside code spans and code fences.
+
+Example:
+```html
+<f-template name="docs-page">
+    <template>
+        <h1>{{title}}</h1>
+        <pre><code>span {{greeting}} /span</code></pre>
+        <pre><code><f-when value="{{flag}}">wrapped</f-when></code></pre>
+        <pre><code>Try: <button class="demo">click</button></code></pre>
+    </template>
+</f-template>
+```
+
+The `<h1>` binds to `title`, the first `<code>` displays the literal text `span {{greeting}} /span`, the second displays the literal text `<f-when value="{{flag}}">wrapped</f-when>`, and the third renders a live `<button>` element alongside the surrounding sample text.
+
 ### Writing Components
 
 When writing components with the intention of using the declarative HTML syntax, it is imperative that components are written with styling and rendering of the component to be less reliant on any JavaScript state management. An example of this is relying on `elementInterals` state to style a component.
diff --git a/packages/fast-html/scripts/build-fixtures.js b/packages/fast-html/scripts/build-fixtures.js
index 92a121c49ba..7622e9590ee 100644
--- a/packages/fast-html/scripts/build-fixtures.js
+++ b/packages/fast-html/scripts/build-fixtures.js
@@ -31,6 +31,14 @@ for (const fixtureName of fixtures) {
 
     // Step 2: inject <f-template> declarations from templates.html before <script>
     const fTemplates = readFileSync(templatesFile, "utf8").trim();
+    // Apply the same `<code>`-sample escape the entry HTML goes through, so
+    // author-written code samples inside `<f-template>` (literal `{{...}}`,
+    // `<f-when>`, `<f-repeat>`) survive into the rendered page as text
+    // instead of being interpreted by the client-side template parser.
+    const wasm = require(
+        require.resolve("@microsoft/fast-build/wasm/microsoft_fast_build.js"),
+    );
+    const escapedFTemplates = wasm.escape_code_samples(fTemplates);
     const rawHtml = readFileSync(outputFile, "utf8");
 
     if (!rawHtml.includes('<script type="module"')) {
@@ -41,7 +49,7 @@ for (const fixtureName of fixtures) {
 
     const html = rawHtml.replace(
         /(\s*)<script type="module"/,
-        `\n${fTemplates}\n$1<script type="module"`,
+        `\n${escapedFTemplates}\n$1<script type="module"`,
     );
 
     writeFileSync(outputFile, html);
diff --git a/packages/fast-html/src/components/template.ts b/packages/fast-html/src/components/template.ts
index 95203663a99..d3166916eb9 100644
--- a/packages/fast-html/src/components/template.ts
+++ b/packages/fast-html/src/components/template.ts
@@ -26,6 +26,7 @@ import {
     type ChainedExpression,
     contextPrefixDot,
     type DataBindingBehaviorConfig,
+    escapeBracesInCodeElements,
     eventArgAccessor,
     getBooleanBinding,
     getExpressionChain,
@@ -346,7 +347,9 @@ class TemplateElement extends FASTElement {
                 // Callback: Before template has been evaluated and assigned
                 TemplateElement.lifecycleCallbacks.templateWillUpdate?.(name);
 
-                const innerHTML = transformInnerHTML(this.innerHTML);
+                const innerHTML = transformInnerHTML(
+                    escapeBracesInCodeElements(this.innerHTML),
+                );
 
                 // Cache paths during template processing (pass undefined if observerMap is not available)
                 const { strings, values } = await this.resolveStringsAndValues(
diff --git a/packages/fast-html/src/components/utilities.ts b/packages/fast-html/src/components/utilities.ts
index cd49d159af4..28253d043d9 100644
--- a/packages/fast-html/src/components/utilities.ts
+++ b/packages/fast-html/src/components/utilities.ts
@@ -146,6 +146,288 @@ const startInnerHTMLDivLength = startInnerHTMLDiv.length;
 const endInnerHTMLDiv = `}}"></div>`;
 const endInnerHTMLDivLength = endInnerHTMLDiv.length;
 
+/**
+ * The name of the HTML element whose text and attribute content is
+ * automatically excluded from FAST declarative template parsing. Curly
+ * braces (`{` and `}`) appearing anywhere inside a `<code>` element are
+ * neutralised by replacing them with their HTML numeric character
+ * references (`&#123;`, `&#125;`) before the template parser scans the
+ * markup. The browser decodes the entities when rendering, so the
+ * literal characters still appear in the final output.
+ *
+ * This mirrors the approach used by Microsoft WebUI's markdown renderer
+ * (`webui-press` — `crates/webui-press/src/markdown.rs`) which also
+ * escapes braces inside `<code>` content so that example template
+ * snippets render literally instead of being interpreted as bindings.
+ *
+ * FAST directive tags (`<f-when>` and `<f-repeat>`) that appear
+ * literally inside `<code>` are entity-escaped by the server-side
+ * preprocessor (`escape_code_sample_elements` in `microsoft-fast-build`)
+ * before they reach the browser; the client-side `<f-template>` parser
+ * never sees a raw directive tag inside `<code>` because the DOM
+ * serializer re-encodes `<`/`>` in text content. Real HTML elements
+ * (e.g. `<button>`) and custom elements (e.g. `<my-widget>`) inside
+ * `<code>` are deliberately left untouched so they continue to render
+ * as live DOM elements alongside the surrounding sample text; only
+ * brace-binding syntax in their attribute values is neutralised.
+ */
+export const codeElementName = "code";
+
+const VOID_ELEMENTS = new Set([
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr",
+]);
+
+interface OpeningTagMatch {
+    tagName: string;
+    tagStart: number;
+    tagEnd: number;
+    contentStart: number;
+    isSelfClosing: boolean;
+}
+
+/**
+ * Parse an opening tag at `pos` (which points at `<`). Returns the parsed tag
+ * descriptor if `<` introduces an element opening tag, otherwise `null`
+ * (e.g. for `</tag>`, `<!--`, `<!doctype`, `<?...`, or end-of-input).
+ *
+ * The parser is tolerant of attribute values containing `>` only when they
+ * are quoted; quoted attribute values are correctly handled so that a `>`
+ * inside quotes does not terminate the tag.
+ */
+function parseOpeningTag(html: string, pos: number): OpeningTagMatch | null {
+    if (html.charAt(pos) !== "<") return null;
+    const next = html.charAt(pos + 1);
+    if (next === "/" || next === "!" || next === "?" || next === "") return null;
+    if (!/[A-Za-z]/.test(next)) return null;
+
+    let nameEnd = pos + 1;
+    while (nameEnd < html.length && /[A-Za-z0-9-]/.test(html.charAt(nameEnd))) {
+        nameEnd++;
+    }
+    const tagName = html.slice(pos + 1, nameEnd).toLowerCase();
+    if (tagName === "") return null;
+
+    let cursor = nameEnd;
+
+    while (cursor < html.length) {
+        while (cursor < html.length && /\s/.test(html.charAt(cursor))) cursor++;
+        const ch = html.charAt(cursor);
+        if (ch === ">" || ch === "" || (ch === "/" && html.charAt(cursor + 1) === ">")) {
+            break;
+        }
+        while (
+            cursor < html.length &&
+            !/[\s=>/]/.test(html.charAt(cursor)) &&
+            html.charAt(cursor) !== ""
+        ) {
+            cursor++;
+        }
+        let attrTerminator = cursor;
+        while (attrTerminator < html.length && /\s/.test(html.charAt(attrTerminator))) {
+            attrTerminator++;
+        }
+        if (html.charAt(attrTerminator) === "=") {
+            cursor = attrTerminator + 1;
+            while (cursor < html.length && /\s/.test(html.charAt(cursor))) cursor++;
+            const quote = html.charAt(cursor);
+            if (quote === '"' || quote === "'") {
+                const end = html.indexOf(quote, cursor + 1);
+                cursor = end === -1 ? html.length : end + 1;
+            } else {
+                while (cursor < html.length && !/[\s>]/.test(html.charAt(cursor))) {
+                    cursor++;
+                }
+            }
+        }
+    }
+
+    let isSelfClosing = false;
+    if (html.charAt(cursor) === "/" && html.charAt(cursor + 1) === ">") {
+        isSelfClosing = true;
+        cursor += 2;
+    } else if (html.charAt(cursor) === ">") {
+        cursor += 1;
+    } else {
+        return null;
+    }
+
+    return {
+        tagName,
+        tagStart: pos,
+        tagEnd: cursor,
+        contentStart: cursor,
+        isSelfClosing: isSelfClosing || VOID_ELEMENTS.has(tagName),
+    };
+}
+
+/**
+ * Find the position of the matching close tag for an element opened at
+ * `contentStart` with name `tagName`. Returns the index of the `<` of the
+ * matching `</tagName>` close tag, or `html.length` if no matching tag is
+ * found (in which case the entire remaining input is treated as the
+ * element's content). Nested same-name elements are tracked via a depth
+ * counter so the matching close tag is correctly identified.
+ */
+function findMatchingCloseTag(
+    html: string,
+    contentStart: number,
+    tagName: string,
+): number {
+    let depth = 1;
+    let pos = contentStart;
+    const closeNeedle = `</${tagName}`;
+
+    while (pos < html.length) {
+        const lt = html.indexOf("<", pos);
+        if (lt === -1) return html.length;
+
+        const lowerSlice = html.slice(lt, lt + closeNeedle.length).toLowerCase();
+        if (lowerSlice === closeNeedle) {
+            const charAfter = html.charAt(lt + closeNeedle.length);
+            if (charAfter === ">" || /\s/.test(charAfter)) {
+                depth--;
+                if (depth === 0) return lt;
+                const gt = html.indexOf(">", lt);
+                pos = gt === -1 ? html.length : gt + 1;
+                continue;
+            }
+        }
+
+        if (html.startsWith("<!--", lt)) {
+            const end = html.indexOf("-->", lt + 4);
+            pos = end === -1 ? html.length : end + 3;
+            continue;
+        }
+        if (html.charAt(lt + 1) === "!" || html.charAt(lt + 1) === "?") {
+            const end = html.indexOf(">", lt);
+            pos = end === -1 ? html.length : end + 1;
+            continue;
+        }
+        if (html.charAt(lt + 1) === "/") {
+            const end = html.indexOf(">", lt);
+            pos = end === -1 ? html.length : end + 1;
+            continue;
+        }
+
+        const opening = parseOpeningTag(html, lt);
+        if (opening === null) {
+            pos = lt + 1;
+            continue;
+        }
+        if (opening.tagName === tagName && !opening.isSelfClosing) {
+            depth++;
+        }
+        pos = opening.tagEnd;
+    }
+
+    return html.length;
+}
+
+/**
+ * Escape FAST brace characters inside a `<code>` element's content so the
+ * template parser does not detect them as bindings. Curly braces are
+ * replaced with their HTML numeric character references (`&#123;`,
+ * `&#125;`). The browser decodes these entities when rendering, so the
+ * literal characters still appear in the final output.
+ *
+ * Only `{` and `}` are handled here; `<` / `>` neutralisation is the
+ * responsibility of the server-side preprocessor
+ * (`escape_code_sample_elements` in `microsoft-fast-build`). The reason
+ * for the split is that `<` / `>` are re-encoded by the DOM serializer
+ * used by `.innerHTML` (they're "must-escape" characters) so the
+ * server-side escape survives the page → DOM → innerHTML round-trip,
+ * whereas the numeric references for `{` / `}` are decoded into literal
+ * braces and not re-encoded — so the brace escape has to be re-applied
+ * on the client before the binding scan runs.
+ */
+function escapeBracesInCodeContent(content: string): string {
+    return content.replace(/[{}]/g, c => (c === "{" ? "&#123;" : "&#125;"));
+}
+
+/**
+ * Preprocess an HTML string by escaping FAST brace characters inside every
+ * `<code>` element. Mirrors part of the brace/angle-bracket escaping
+ * behaviour of Microsoft WebUI's `webui-press` markdown renderer so that
+ * example template snippets inside `<code>` render literally instead of
+ * being interpreted as bindings.
+ *
+ * Nested `<code>` elements are handled via depth tracking. The pass is
+ * idempotent because `{` / `}` inside an already-processed `<code>` have
+ * been replaced with entities, so a second pass finds nothing to escape.
+ *
+ * This is the client-side half of a two-stage escape — see the JSDoc on
+ * `escapeBracesInCodeContent` for why `<` / `>` are handled exclusively
+ * on the server.
+ */
+export function escapeBracesInCodeElements(innerHTML: string): string {
+    if (innerHTML.indexOf("<code") === -1) {
+        return innerHTML;
+    }
+
+    let pos = 0;
+    let result = "";
+
+    while (pos < innerHTML.length) {
+        const lt = innerHTML.indexOf("<", pos);
+        if (lt === -1) {
+            result += innerHTML.slice(pos);
+            break;
+        }
+
+        if (innerHTML.startsWith("<!--", lt)) {
+            const end = innerHTML.indexOf("-->", lt + 4);
+            const tail = end === -1 ? innerHTML.length : end + 3;
+            result += innerHTML.slice(pos, tail);
+            pos = tail;
+            continue;
+        }
+
+        const opening = parseOpeningTag(innerHTML, lt);
+        if (opening === null) {
+            result += innerHTML.slice(pos, lt + 1);
+            pos = lt + 1;
+            continue;
+        }
+
+        if (opening.tagName !== codeElementName) {
+            result += innerHTML.slice(pos, opening.tagEnd);
+            pos = opening.tagEnd;
+            continue;
+        }
+
+        result += innerHTML.slice(pos, opening.tagEnd);
+
+        if (opening.isSelfClosing) {
+            pos = opening.tagEnd;
+            continue;
+        }
+
+        const closeStart = findMatchingCloseTag(
+            innerHTML,
+            opening.contentStart,
+            codeElementName,
+        );
+        const innerContent = innerHTML.slice(opening.contentStart, closeStart);
+        result += escapeBracesInCodeContent(innerContent);
+        pos = closeStart;
+    }
+
+    return result;
+}
+
 const LogicalOperator = {
     AND: "&&",
     OR: "||",
diff --git a/packages/fast-html/test/fixtures/code-sample/code-sample.spec.ts b/packages/fast-html/test/fixtures/code-sample/code-sample.spec.ts
new file mode 100644
index 00000000000..cd8ea2b7198
--- /dev/null
+++ b/packages/fast-html/test/fixtures/code-sample/code-sample.spec.ts
@@ -0,0 +1,101 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("code sample auto-escape", () => {
+    test.beforeEach(async ({ page }) => {
+        const hydrationCompleted = page.waitForFunction(
+            () => (window as any).hydrationCompleted === true,
+        );
+        await page.goto("/fixtures/code-sample/");
+        await hydrationCompleted;
+    });
+
+    test("bindings outside <code> still resolve", async ({ page }) => {
+        const boundHeading = page.locator("code-display #bound");
+        await expect(boundHeading).toHaveText("Hello");
+
+        const afterParagraph = page.locator("code-display #after");
+        await expect(afterParagraph).toHaveText("Hello world");
+    });
+
+    test("double-brace text inside <code> is preserved literally", async ({ page }) => {
+        const codeBlock = page.locator("code-display #sample code");
+        await expect(codeBlock).toHaveText("span {{greeting}} /span");
+    });
+
+    test("literal <f-when> tag inside <code> is preserved as text", async ({ page }) => {
+        const codeBlock = page.locator("code-display #sample-directive code");
+        await expect(codeBlock).toHaveText('<f-when value="{{flag}}">wrapped</f-when>');
+
+        // The directive must not have been activated as a real element.
+        const directive = codeBlock.locator("f-when");
+        await expect(directive).toHaveCount(0);
+    });
+
+    test("uppercase <F-When> tag inside <code> is also escaped", async ({ page }) => {
+        // Browsers normalise tag names to lowercase, so an unescaped
+        // `<F-When>` would otherwise become a live `<f-when>` element
+        // after DOM round-trip and re-activate the directive.
+        const codeBlock = page.locator("code-display #sample-directive-uppercase code");
+        await expect(codeBlock).toHaveText('<F-When value="{{flag}}">cased</F-When>');
+        const directive = codeBlock.locator("f-when");
+        await expect(directive).toHaveCount(0);
+    });
+
+    test("literal <f-repeat> tag inside <code> is preserved as text", async ({
+        page,
+    }) => {
+        const codeBlock = page.locator("code-display #sample-directive-repeat code");
+        await expect(codeBlock).toHaveText('<f-repeat value="{{items}}">i</f-repeat>');
+        const directive = codeBlock.locator("f-repeat");
+        await expect(directive).toHaveCount(0);
+    });
+
+    test("single-brace attribute-binding text inside <code> is preserved literally", async ({
+        page,
+    }) => {
+        const codeBlock = page.locator("code-display #sample-client code");
+        await expect(codeBlock).toHaveText('button @click="{handler()}" /button');
+    });
+
+    test("real <button> element inside <code> renders as a live DOM element", async ({
+        page,
+    }) => {
+        const codeBlock = page.locator("code-display #sample-real-button code");
+        // Surrounding text plus the button's text are both visible.
+        await expect(codeBlock).toHaveText("Try: {{greeting}}");
+
+        // The button is a real child element — not text — and its
+        // binding-like attribute is preserved as literal characters
+        // rather than being wired up as a FAST binding.
+        const button = codeBlock.locator("button.demo-btn");
+        await expect(button).toHaveCount(1);
+        await expect(button).toHaveText("{{greeting}}");
+        await expect(button).toHaveAttribute("data-x", "{{greeting}}");
+    });
+
+    test("real custom element inside <code> renders as a live DOM element", async ({
+        page,
+    }) => {
+        const codeBlock = page.locator("code-display #sample-custom-element code");
+        await expect(codeBlock).toHaveText("Use: label");
+
+        const widget = codeBlock.locator("my-demo-widget");
+        await expect(widget).toHaveCount(1);
+        await expect(widget).toHaveText("label");
+        await expect(widget).toHaveAttribute("data-x", "{{greeting}}");
+    });
+
+    test("no hydration errors occur with literal binding-like text", async ({ page }) => {
+        const errors: string[] = await page.evaluate(
+            () => (window as any).__hydrationErrors || [],
+        );
+        const hydrationErrors = errors.filter(
+            (msg: string) =>
+                msg.includes("Hydration") ||
+                msg.includes("hydration") ||
+                msg.includes("Binding") ||
+                msg.includes("binding"),
+        );
+        expect(hydrationErrors).toHaveLength(0);
+    });
+});
diff --git a/packages/fast-html/test/fixtures/code-sample/entry.html b/packages/fast-html/test/fixtures/code-sample/entry.html
new file mode 100644
index 00000000000..b7e338b9618
--- /dev/null
+++ b/packages/fast-html/test/fixtures/code-sample/entry.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+    </head>
+    <body>
+        <code-display></code-display>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>
diff --git a/packages/fast-html/test/fixtures/code-sample/fast-build.config.json b/packages/fast-html/test/fixtures/code-sample/fast-build.config.json
new file mode 100644
index 00000000000..c291972cdad
--- /dev/null
+++ b/packages/fast-html/test/fixtures/code-sample/fast-build.config.json
@@ -0,0 +1,6 @@
+{
+    "entry": "entry.html",
+    "state": "state.json",
+    "output": "index.html",
+    "templates": "templates.html"
+}
diff --git a/packages/fast-html/test/fixtures/code-sample/index.html b/packages/fast-html/test/fixtures/code-sample/index.html
new file mode 100644
index 00000000000..d4cd6675821
--- /dev/null
+++ b/packages/fast-html/test/fixtures/code-sample/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+    </head>
+    <body>
+        <code-display><template shadowrootmode="open" shadowroot="open"><h1 id="bound"><!--fe-b$$start$$0$$greeting-0$$fe-b-->Hello<!--fe-b$$end$$0$$greeting-0$$fe-b--></h1>
+        <pre id="sample"><code>span &#123;&#123;greeting&#125;&#125; /span</code></pre>
+        <pre id="sample-directive"><code>&lt;f-when value="&#123;&#123;flag&#125;&#125;"&gt;wrapped&lt;/f-when&gt;</code></pre>
+        <pre id="sample-directive-uppercase"><code>&lt;F-When value="&#123;&#123;flag&#125;&#125;"&gt;cased&lt;/F-When&gt;</code></pre>
+        <pre id="sample-directive-repeat"><code>&lt;f-repeat value="&#123;&#123;items&#125;&#125;"&gt;i&lt;/f-repeat&gt;</code></pre>
+        <pre id="sample-client"><code>button @click="&#123;handler()&#125;" /button</code></pre>
+        <pre id="sample-real-button"><code>Try: <button class="demo-btn" data-x="&#123;&#123;greeting&#125;&#125;">&#123;&#123;greeting&#125;&#125;</button></code></pre>
+        <pre id="sample-custom-element"><code>Use: <my-demo-widget data-x="&#123;&#123;greeting&#125;&#125;">label</my-demo-widget></code></pre>
+        <p id="after"><!--fe-b$$start$$1$$greeting-1$$fe-b-->Hello<!--fe-b$$end$$1$$greeting-1$$fe-b--> world</p></template></code-display>
+<f-template name="code-display">
+    <template>
+        <h1 id="bound">{{greeting}}</h1>
+        <pre id="sample"><code>span &#123;&#123;greeting&#125;&#125; /span</code></pre>
+        <pre id="sample-directive"><code>&lt;f-when value="&#123;&#123;flag&#125;&#125;"&gt;wrapped&lt;/f-when&gt;</code></pre>
+        <pre id="sample-directive-uppercase"><code>&lt;F-When value="&#123;&#123;flag&#125;&#125;"&gt;cased&lt;/F-When&gt;</code></pre>
+        <pre id="sample-directive-repeat"><code>&lt;f-repeat value="&#123;&#123;items&#125;&#125;"&gt;i&lt;/f-repeat&gt;</code></pre>
+        <pre id="sample-client"><code>button @click="&#123;handler()&#125;" /button</code></pre>
+        <pre id="sample-real-button"><code>Try: <button class="demo-btn" data-x="&#123;&#123;greeting&#125;&#125;">&#123;&#123;greeting&#125;&#125;</button></code></pre>
+        <pre id="sample-custom-element"><code>Use: <my-demo-widget data-x="&#123;&#123;greeting&#125;&#125;">label</my-demo-widget></code></pre>
+        <p id="after">{{greeting}} world</p>
+    </template>
+</f-template>
+
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>
diff --git a/packages/fast-html/test/fixtures/code-sample/main.ts b/packages/fast-html/test/fixtures/code-sample/main.ts
new file mode 100644
index 00000000000..69566c382c4
--- /dev/null
+++ b/packages/fast-html/test/fixtures/code-sample/main.ts
@@ -0,0 +1,28 @@
+import { FASTElement, observable } from "@microsoft/fast-element";
+import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
+
+class CodeDisplay extends FASTElement {
+    @observable
+    greeting: string = "Hello";
+}
+RenderableFASTElement(CodeDisplay).defineAsync({
+    name: "code-display",
+    templateOptions: "defer-and-hydrate",
+});
+
+(window as any).__hydrationErrors = [];
+const originalConsoleError = console.error;
+console.error = (...args: any[]) => {
+    (window as any).__hydrationErrors.push(
+        args.map(a => (typeof a === "string" ? a : String(a))).join(" "),
+    );
+    originalConsoleError.apply(console, args);
+};
+
+TemplateElement.config({
+    hydrationComplete() {
+        (window as any).hydrationCompleted = true;
+    },
+}).define({
+    name: "f-template",
+});
diff --git a/packages/fast-html/test/fixtures/code-sample/state.json b/packages/fast-html/test/fixtures/code-sample/state.json
new file mode 100644
index 00000000000..a95135e5d40
--- /dev/null
+++ b/packages/fast-html/test/fixtures/code-sample/state.json
@@ -0,0 +1,3 @@
+{
+    "greeting": "Hello"
+}
diff --git a/packages/fast-html/test/fixtures/code-sample/templates.html b/packages/fast-html/test/fixtures/code-sample/templates.html
new file mode 100644
index 00000000000..57f949a1bcf
--- /dev/null
+++ b/packages/fast-html/test/fixtures/code-sample/templates.html
@@ -0,0 +1,13 @@
+<f-template name="code-display">
+    <template>
+        <h1 id="bound">{{greeting}}</h1>
+        <pre id="sample"><code>span {{greeting}} /span</code></pre>
+        <pre id="sample-directive"><code><f-when value="{{flag}}">wrapped</f-when></code></pre>
+        <pre id="sample-directive-uppercase"><code><F-When value="{{flag}}">cased</F-When></code></pre>
+        <pre id="sample-directive-repeat"><code><f-repeat value="{{items}}">i</f-repeat></code></pre>
+        <pre id="sample-client"><code>button @click="{handler()}" /button</code></pre>
+        <pre id="sample-real-button"><code>Try: <button class="demo-btn" data-x="{{greeting}}">{{greeting}}</button></code></pre>
+        <pre id="sample-custom-element"><code>Use: <my-demo-widget data-x="{{greeting}}">label</my-demo-widget></code></pre>
+        <p id="after">{{greeting}} world</p>
+    </template>
+</f-template>