diff --git a/packages/base/address.gts b/packages/base/address.gts
index 479631383b4..032de202e05 100644
--- a/packages/base/address.gts
+++ b/packages/base/address.gts
@@ -3,6 +3,7 @@ import StringField from './string';
 import CountryField from './country';
 import MapPinIcon from '@cardstack/boxel-icons/map-pin';
 import { EntityDisplayWithIcon } from '@cardstack/boxel-ui/components';
+import { markdownEscape } from '@cardstack/boxel-ui/helpers';
 
 function getAddressRows(
   addressLine1: string | undefined,
@@ -92,4 +93,29 @@ export default class AddressField extends FieldDef {
   };
 
   static atom = Atom;
+
+  // CS-10786: emit the address as a CommonMark hard-break-delimited block so
+  // downstream consumers preserve line structure. Each logical row is
+  // markdown-escaped individually so e.g. a `#` in an apartment label
+  // doesn't become a heading.
+  static markdown = class Markdown extends Component<typeof AddressField> {
+    get text() {
+      let rows = getAddressRows(
+        this.args.model?.addressLine1,
+        this.args.model?.addressLine2,
+        this.args.model?.city,
+        this.args.model?.state,
+        this.args.model?.postalCode,
+        this.args.model?.country?.name,
+        this.args.model?.poBoxNumber,
+      );
+      if (rows.length === 0) {
+        return '';
+      }
+      // Two-space-then-newline = CommonMark hard break, matching the
+      // TextAreaField markdown convention.
+      return rows.map((r) => markdownEscape(r)).join('  \n');
+    }
+    <template>{{this.text}}</template>
+  };
 }
diff --git a/packages/base/base64-image.gts b/packages/base/base64-image.gts
index 06a8d96ab67..928b1f0b8ae 100644
--- a/packages/base/base64-image.gts
+++ b/packages/base/base64-image.gts
@@ -8,6 +8,7 @@ import {
   primitive,
   useIndexBasedKey,
 } from './card-api';
+import { markdownEscape } from '@cardstack/boxel-ui/helpers';
 import { tracked } from '@glimmer/tracking';
 import { on } from '@ember/modifier';
 import { fn } from '@ember/helper';
@@ -321,6 +322,23 @@ export default class Base64ImageField extends FieldDef {
     </template>
   };
   static embedded = Base64ImageField.isolated;
+
+  // CS-10786: never emit the raw base64 payload — it bloats the document
+  // and is useless to downstream consumers. Emit a placeholder that names
+  // the alt text if available, mirroring MaybeBase64Field's behavior.
+  static markdown = class Markdown extends Component<typeof Base64ImageField> {
+    get text() {
+      if (!this.args.model?.base64) {
+        return '';
+      }
+      let alt = this.args.model?.altText;
+      if (alt) {
+        return `[binary image: ${markdownEscape(alt)}]`;
+      }
+      return '[binary image]';
+    }
+    <template>{{this.text}}</template>
+  };
 }
 
 // from "ember-css-url"
diff --git a/packages/base/big-integer.gts b/packages/base/big-integer.gts
index be1cdb3fec4..40589cfe6f8 100644
--- a/packages/base/big-integer.gts
+++ b/packages/base/big-integer.gts
@@ -1,7 +1,7 @@
 import { primitive, Component, FieldDef } from './card-api';
 import { BoxelInput } from '@cardstack/boxel-ui/components';
 import { TextInputValidator } from './text-input-validator';
-import { not } from '@cardstack/boxel-ui/helpers';
+import { markdownEscape, not } from '@cardstack/boxel-ui/helpers';
 import Number99SmallIcon from '@cardstack/boxel-icons/number-99-small';
 import {
   fieldSerializer,
@@ -64,4 +64,18 @@ export default class BigIntegerField extends FieldDef {
   static embedded = View;
   static atom = View;
   static edit = Edit;
+
+  // CS-10786: serialize the bigint to a decimal string and escape it — the
+  // leading `-` of a negative value would otherwise look like a bullet
+  // marker at line start.
+  static markdown = class Markdown extends Component<typeof this> {
+    get text() {
+      let value = this.args.model;
+      if (value == null) {
+        return '';
+      }
+      return markdownEscape(BigIntegerSerializer.serialize(value));
+    }
+    <template>{{this.text}}</template>
+  };
 }
diff --git a/packages/base/boolean.gts b/packages/base/boolean.gts
index 8d355624b6d..d7e16a75c43 100644
--- a/packages/base/boolean.gts
+++ b/packages/base/boolean.gts
@@ -40,6 +40,16 @@ export default class BooleanField extends FieldDef {
   static embedded = View;
   static atom = View;
 
+  // CS-10786: emit `true`/`false` literally. The primitive is already safe
+  // (neither `true` nor `false` is a markdown metacharacter), and `null`/
+  // `undefined` resolves to empty string.
+  static markdown = class Markdown extends Component<typeof this> {
+    get text() {
+      return this.args.model == null ? '' : String(this.args.model);
+    }
+    <template>{{this.text}}</template>
+  };
+
   static edit = class Edit extends Component<typeof this> {
     <template>
       <div data-test-radio-group={{@fieldName}}>
diff --git a/packages/base/brand-functional-palette.gts b/packages/base/brand-functional-palette.gts
index 745ce204a52..3a248f12d99 100644
--- a/packages/base/brand-functional-palette.gts
+++ b/packages/base/brand-functional-palette.gts
@@ -2,6 +2,7 @@ import { GridContainer, Swatch } from '@cardstack/boxel-ui/components';
 import {
   buildCssVariableName,
   entriesToCssRuleMap,
+  markdownEscape,
 } from '@cardstack/boxel-ui/helpers';
 
 import { field, contains, Component, getFields, FieldDef } from './card-api';
@@ -94,4 +95,33 @@ export default class BrandFunctionalPalette extends FieldDef {
     }
     return entriesToCssRuleMap(this.cssVariableFields);
   }
+
+  // CS-10787: emit a bulleted list of the palette entries with their CSS
+  // color values in inline code. Skips empty slots so the output stays
+  // compact.
+  static markdown = class Markdown extends Component<
+    typeof BrandFunctionalPalette
+  > {
+    get text() {
+      let model = this.args.model;
+      if (!model) {
+        return '';
+      }
+      let rows: string[] = [];
+      let pairs: { key: keyof typeof model; label: string }[] = [
+        { key: 'primary', label: 'Primary' },
+        { key: 'secondary', label: 'Secondary' },
+        { key: 'accent', label: 'Accent' },
+        { key: 'light', label: 'Light' },
+        { key: 'dark', label: 'Dark' },
+      ];
+      for (let { key, label } of pairs) {
+        let value = model[key] as string | undefined;
+        if (!value) continue;
+        rows.push(`- ${markdownEscape(label)}: \`${value}\``);
+      }
+      return rows.join('\n');
+    }
+    <template>{{this.text}}</template>
+  };
 }
diff --git a/packages/base/brand-logo.gts b/packages/base/brand-logo.gts
index 01e93a1484b..fe975c1f4b2 100644
--- a/packages/base/brand-logo.gts
+++ b/packages/base/brand-logo.gts
@@ -1,6 +1,7 @@
 import { FieldContainer, GridContainer } from '@cardstack/boxel-ui/components';
 import {
   entriesToCssRuleMap,
+  markdownEscape,
   type CssRuleMap,
 } from '@cardstack/boxel-ui/helpers';
 
@@ -14,6 +15,7 @@ import {
   getFieldDescription,
 } from './card-api';
 import { buildCssVariableName } from '@cardstack/boxel-ui/helpers';
+import { markdownLink } from './markdown-helpers';
 import {
   type CssVariableField,
   type CssVariableFieldEntry,
@@ -308,6 +310,26 @@ export class MarkField extends URLField {
       </style>
     </template>
   };
+
+  // CS-10787: render the mark as a markdown image — the URL is the asset,
+  // and the alt text is empty (callers set alt via context).
+  static markdown = class Markdown extends Component<typeof MarkField> {
+    get text() {
+      let url = this.args.model;
+      if (!url) {
+        return '';
+      }
+      let encoded: string;
+      try {
+        encoded = encodeURI(url);
+      } catch {
+        encoded = url;
+      }
+      encoded = encoded.replace(/\(/g, '%28').replace(/\)/g, '%29');
+      return `![](${encoded})`;
+    }
+    <template>{{this.text}}</template>
+  };
 }
 
 export default class BrandLogo extends FieldDef {
@@ -388,4 +410,46 @@ export default class BrandLogo extends FieldDef {
   }
 
   static embedded = Embedded;
+
+  // CS-10787: emit a bulleted list of the logo URLs that are actually
+  // populated. Skips empty slots so the output stays compact.
+  static markdown = class Markdown extends Component<typeof BrandLogo> {
+    get text() {
+      let model = this.args.model;
+      if (!model) {
+        return '';
+      }
+      let rows: { label: string; url: string }[] = [];
+      let pairs: { key: keyof typeof model; label: string }[] = [
+        { key: 'primaryMark1', label: 'Primary mark (light)' },
+        { key: 'primaryMark2', label: 'Primary mark (dark)' },
+        { key: 'primaryMarkGreyscale1', label: 'Primary mark greyscale (light)' },
+        { key: 'primaryMarkGreyscale2', label: 'Primary mark greyscale (dark)' },
+        { key: 'secondaryMark1', label: 'Secondary mark (light)' },
+        { key: 'secondaryMark2', label: 'Secondary mark (dark)' },
+        {
+          key: 'secondaryMarkGreyscale1',
+          label: 'Secondary mark greyscale (light)',
+        },
+        {
+          key: 'secondaryMarkGreyscale2',
+          label: 'Secondary mark greyscale (dark)',
+        },
+        { key: 'socialMediaProfileIcon', label: 'Social media icon' },
+      ];
+      for (let { key, label } of pairs) {
+        let url = model[key] as string | undefined;
+        if (url) {
+          rows.push({ label, url });
+        }
+      }
+      if (!rows.length) {
+        return '';
+      }
+      return rows
+        .map(({ label, url }) => `- ${markdownEscape(label)}: ${markdownLink(url, url)}`)
+        .join('\n');
+    }
+    <template>{{this.text}}</template>
+  };
 }
diff --git a/packages/base/card-api.gts b/packages/base/card-api.gts
index 3d7dea9f99f..b232895faa9 100644
--- a/packages/base/card-api.gts
+++ b/packages/base/card-api.gts
@@ -3,7 +3,11 @@ import GlimmerComponent from '@glimmer/component';
 import { isEqual } from 'lodash';
 import { WatchedArray } from './watched-array';
 import { BoxelInput, CopyButton } from '@cardstack/boxel-ui/components';
-import { type MenuItemOptions, not } from '@cardstack/boxel-ui/helpers';
+import {
+  markdownEscape,
+  type MenuItemOptions,
+  not,
+} from '@cardstack/boxel-ui/helpers';
 import {
   getBoxComponent,
   type BoxComponent,
@@ -105,6 +109,8 @@ import DefaultHeadTemplate from './default-templates/head';
 import MissingTemplate from './default-templates/missing-template';
 import FieldDefEditTemplate from './default-templates/field-edit';
 import MarkdownTemplate from './default-templates/markdown';
+import DefaultMarkdownFallbackTemplate from './default-templates/markdown-fallback';
+import { markdownImage } from './markdown-helpers';
 import FileDefEditTemplate from './default-templates/file-def-edit';
 import ImageDefAtomTemplate from './default-templates/image-def-atom';
 import ImageDefEmbeddedTemplate from './default-templates/image-def-embedded';
@@ -2365,6 +2371,11 @@ export class FieldDef extends BaseDef {
   static edit: BaseDefComponent = FieldDefEditTemplate;
   static atom: BaseDefComponent = DefaultAtomViewTemplate;
   static fitted: BaseDefComponent = MissingTemplate;
+  // Default `markdown` fallback (CS-10784): renders the field's HTML embedded
+  // template into a hidden source container, then converts it to markdown via
+  // turndown (registered on `globalThis` by `packages/host`). Subclasses can
+  // override `static markdown` to author bespoke markdown directly.
+  static markdown: BaseDefComponent = DefaultMarkdownFallbackTemplate;
 }
 
 export class ReadOnlyField extends FieldDef {
@@ -2376,6 +2387,12 @@ export class ReadOnlyField extends FieldDef {
   static edit = class Edit extends Component<typeof this> {
     <template>{{@model}}</template>
   };
+  // CS-10785: emit plain text, escaped so markdown metacharacters in the
+  // raw string (e.g. `*`, `#`, `1.`) don't trigger formatting when the
+  // value is interpolated into a surrounding markdown document.
+  static markdown = class Markdown extends Component<typeof this> {
+    <template>{{markdownEscape @model}}</template>
+  };
 }
 
 export class StringField extends FieldDef {
@@ -2398,6 +2415,15 @@ export class StringField extends FieldDef {
   static atom = class Atom extends Component<typeof this> {
     <template>{{@model}}</template>
   };
+  // CS-10785: plain text, escaped. Same rationale as ReadOnlyField.
+  // Explicit `BaseDefComponent` annotation so subclass overrides (e.g.
+  // TextAreaField, MarkdownField, MaybeBase64Field) aren't forced to
+  // structurally match this inline class shape.
+  static markdown: BaseDefComponent = class Markdown extends Component<
+    typeof this
+  > {
+    <template>{{markdownEscape @model}}</template>
+  };
 }
 
 // TODO: This is a simple workaround until the thumbnailURL is converted into an actual image field
@@ -2415,6 +2441,24 @@ export class MaybeBase64Field extends StringField {
     </template>
   };
   static atom = MaybeBase64Field.embedded;
+  // CS-10785: suppress embedded base64 payloads from the markdown emission —
+  // they're never useful to downstream markdown consumers and would blow up
+  // the output size. Non-base64 strings are escaped like a StringField.
+  static markdown = class Markdown extends Component<typeof this> {
+    get isBase64() {
+      return this.args.model?.startsWith('data:');
+    }
+    get escaped() {
+      return markdownEscape(this.args.model);
+    }
+    <template>
+      {{#if this.isBase64}}
+        [binary content]
+      {{else}}
+        {{this.escaped}}
+      {{/if}}
+    </template>
+  };
 }
 
 export class TextAreaField extends StringField {
@@ -2431,6 +2475,22 @@ export class TextAreaField extends StringField {
       />
     </template>
   };
+  // CS-10785: escape the content and convert single `\n` to a CommonMark
+  // hard-break (`  \n`) so a multi-line text area renders as stacked lines
+  // rather than collapsing into one paragraph. Empty-line paragraph breaks
+  // (`\n\n`) are preserved — the regex touches every newline, producing
+  // `  \n  \n`, which is still a valid paragraph separator.
+  // Explicit `BaseDefComponent` annotation so subclass overrides (e.g.
+  // CSSField) aren't forced to structurally match this inline class shape.
+  static markdown: BaseDefComponent = class Markdown extends Component<
+    typeof this
+  > {
+    get escapedWithBreaks() {
+      let escaped = markdownEscape(this.args.model);
+      return escaped.replace(/\n/g, '  \n');
+    }
+    <template>{{this.escapedWithBreaks}}</template>
+  };
 }
 
 // enumField has moved to packages/base/enum.gts
@@ -2484,6 +2544,26 @@ export class CSSField extends TextAreaField {
       </style>
     </template>
   };
+  // CS-10785: emit the CSS in a fenced code block with a `css` info string.
+  // The fence is computed as the longest run of backticks in the content
+  // plus one (minimum 3), so embedded triple-backtick sequences in CSS
+  // content can't prematurely close the block. Content itself is not
+  // escaped — inside a fenced block, CommonMark treats it as literal.
+  static markdown = class Markdown extends Component<typeof this> {
+    get fenced() {
+      let value = this.args.model ?? '';
+      let longestRun = 0;
+      let match = value.match(/`+/g);
+      if (match) {
+        for (let run of match) {
+          if (run.length > longestRun) longestRun = run.length;
+        }
+      }
+      let fence = '`'.repeat(Math.max(3, longestRun + 1));
+      return `${fence}css\n${value}\n${fence}`;
+    }
+    <template>{{this.fenced}}</template>
+  };
 }
 
 export class MarkdownField extends StringField {
@@ -2513,6 +2593,13 @@ export class MarkdownField extends StringField {
       />
     </template>
   };
+  // CS-10785: raw markdown passthrough. Content is already authored as
+  // markdown, so interpolating a value with `#`, `*`, etc. must NOT
+  // double-escape. This overrides the StringField inherited `static
+  // markdown` to suppress escaping.
+  static markdown = class Markdown extends Component<typeof MarkdownField> {
+    <template>{{@model}}</template>
+  };
 }
 
 export function deserializeForUI(value: string | number | null): number | null {
@@ -2562,6 +2649,13 @@ export class NumberField extends FieldDef {
       NumberSerializer.validate,
     );
   };
+  // CS-10785: render the number as text. `markdownEscape` handles the null/
+  // undefined case (empty string) and also protects against line-start
+  // `1.`/`2.` etc. being interpreted as ordered list markers when this
+  // value gets interpolated into a larger markdown document.
+  static markdown = class Markdown extends Component<typeof this> {
+    <template>{{markdownEscape @model}}</template>
+  };
 }
 
 export interface SerializedFileDef {
@@ -2624,6 +2718,13 @@ export class FileDef extends BaseDef {
   static isolated = this.embedded;
   static atom = this.embedded;
   static edit: BaseDefComponent = FileDefEditTemplate;
+  // Default `markdown` fallback (CS-10784): inherits from FieldDef but
+  // restated explicitly so this class's own slot is set rather than relying on
+  // prototype lookup — the format-resolution code reads slots via bracket
+  // notation on the resolved class (`(cls as any)[format]`), which traverses
+  // the prototype chain, but having an own property keeps subclass overrides
+  // less surprising.
+  static markdown: BaseDefComponent = DefaultMarkdownFallbackTemplate;
 
   static async extractAttributes(
     url: string,
@@ -2708,6 +2809,27 @@ export class ImageDef extends FileDef {
   static atom: BaseDefComponent = ImageDefAtomTemplate;
   static embedded: BaseDefComponent = ImageDefEmbeddedTemplate;
   static fitted: BaseDefComponent = ImageDefFittedTemplate;
+
+  // CS-10787: emit a markdown image reference. If no URL is available we
+  // fall back to a placeholder that names the image — useful to downstream
+  // consumers (e.g. an LLM ingesting the markdown) without a broken link.
+  static markdown: BaseDefComponent = class Markdown extends Component<
+    typeof ImageDef
+  > {
+    get text() {
+      let model = this.args.model;
+      if (!model) {
+        return '';
+      }
+      let url = model.url ?? model.sourceUrl ?? '';
+      let name = model.name ?? '';
+      if (!url && !name) {
+        return '';
+      }
+      return markdownImage(name, url);
+    }
+    <template>{{this.text}}</template>
+  };
 }
 
 export class CardInfoField extends FieldDef {
@@ -2793,6 +2915,11 @@ export class CardDef extends BaseDef {
   static edit: BaseDefComponent = DefaultCardDefTemplate;
   static atom: BaseDefComponent = DefaultAtomViewTemplate;
   static head: BaseDefComponent = DefaultHeadTemplate;
+  // Default `markdown` fallback (CS-10784): renders the card's HTML isolated
+  // template into a hidden source container, then converts it to markdown via
+  // turndown (registered on `globalThis` by `packages/host`). Subclasses can
+  // override `static markdown` to author bespoke markdown directly.
+  static markdown: BaseDefComponent = DefaultMarkdownFallbackTemplate;
 
   static prefersWideFormat = false; // whether the card is full-width in the stack
   static headerColor: string | null = null; // set string color value if the stack-item header has a background color
diff --git a/packages/base/code-ref.gts b/packages/base/code-ref.gts
index e9689949a31..e69e18b9251 100644
--- a/packages/base/code-ref.gts
+++ b/packages/base/code-ref.gts
@@ -98,6 +98,36 @@ export default class CodeRefField extends FieldDef {
   static [fieldSerializer] = 'code-ref';
   static embedded = class Embedded extends BaseView {};
   static edit = EditView;
+
+  // CS-10786: emit the code reference as an inline code span — `module/name`
+  // is the canonical serialization. Wrapping in backticks avoids having to
+  // escape any module-path characters.
+  static markdown = class Markdown extends Component<typeof CodeRefField> {
+    get text() {
+      let model = this.args.model;
+      if (!model?.module || !model?.name) {
+        return '';
+      }
+      // Combine module + name into the same string the edit input shows,
+      // then wrap in a fence of sufficient width to contain any backticks
+      // in the module path.
+      let raw = `${model.module}/${model.name}`;
+      let longestRun = 0;
+      let match = raw.match(/`+/g);
+      if (match) {
+        for (let run of match) {
+          if (run.length > longestRun) longestRun = run.length;
+        }
+      }
+      let fence = '`'.repeat(Math.max(1, longestRun + 1));
+      // Pad with spaces when the content starts/ends with a backtick so the
+      // inline-code-span parser doesn't consume the delimiter.
+      let needsPad =
+        raw.startsWith('`') || raw.endsWith('`') || /^\s|\s$/.test(raw);
+      return needsPad ? `${fence} ${raw} ${fence}` : `${fence}${raw}${fence}`;
+    }
+    <template>{{this.text}}</template>
+  };
 }
 
 export class AbsoluteCodeRefField extends CodeRefField {
diff --git a/packages/base/color.gts b/packages/base/color.gts
index 296b9067480..4ccbe56259d 100644
--- a/packages/base/color.gts
+++ b/packages/base/color.gts
@@ -4,7 +4,7 @@ import {
   Swatch,
   ColorPicker,
 } from '@cardstack/boxel-ui/components';
-import { not } from '@cardstack/boxel-ui/helpers';
+import { markdownEscape, not } from '@cardstack/boxel-ui/helpers';
 import PaintBucket from '@cardstack/boxel-icons/paint-bucket';
 
 // TypeScript configuration interface
@@ -55,4 +55,14 @@ export default class ColorField extends StringField {
   static atom = View;
   static fitted = View;
   static edit = EditView;
+
+  // CS-10786: escape the hex string. A leading `#` at line start would be
+  // interpreted as an ATX heading by CommonMark; `markdownEscape` emits
+  // `\#` to prevent that.
+  static markdown = class Markdown extends Component<typeof this> {
+    get text() {
+      return markdownEscape(this.args.model);
+    }
+    <template>{{this.text}}</template>
+  };
 }
diff --git a/packages/base/coordinate.gts b/packages/base/coordinate.gts
index d42983381bb..ab7040fb99e 100644
--- a/packages/base/coordinate.gts
+++ b/packages/base/coordinate.gts
@@ -1,9 +1,27 @@
 import NumberField from './number';
-import { contains, FieldDef, field } from './card-api';
+import { contains, FieldDef, field, Component } from './card-api';
+import { markdownEscape } from '@cardstack/boxel-ui/helpers';
 
 export default class CoordinateField extends FieldDef {
   @field x = contains(NumberField);
   @field y = contains(NumberField);
 
   static displayName = 'Coordinate';
+
+  // CS-10786: emit `(x, y)` with numeric components escaped to avoid a
+  // negative-number leading dash being read as a bullet marker at line
+  // start. Empty when both components are null.
+  static markdown = class Markdown extends Component<typeof CoordinateField> {
+    get text() {
+      let x = this.args.model?.x;
+      let y = this.args.model?.y;
+      if (x == null && y == null) {
+        return '';
+      }
+      let xs = x == null ? '' : markdownEscape(String(x));
+      let ys = y == null ? '' : markdownEscape(String(y));
+      return `(${xs}, ${ys})`;
+    }
+    <template>{{this.text}}</template>
+  };
 }
diff --git a/packages/base/country.gts b/packages/base/country.gts
index 3103c061715..ef402eadea3 100644
--- a/packages/base/country.gts
+++ b/packages/base/country.gts
@@ -3,6 +3,7 @@ import StringField from './string';
 import World from '@cardstack/boxel-icons/world';
 import MapPinned from '@cardstack/boxel-icons/map-pinned';
 import { BoxelSelect } from '@cardstack/boxel-ui/components';
+import { markdownEscape } from '@cardstack/boxel-ui/helpers';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { restartableTask } from 'ember-concurrency';
@@ -119,6 +120,16 @@ export default class CountryField extends FieldDef {
       {{@model.name}}
     </template>
   };
+
+  // CS-10786: the country's display name, markdown-escaped. The ISO code is
+  // omitted — downstream markdown consumers care about the human-readable
+  // label; the code is available programmatically on the field.
+  static markdown = class Markdown extends Component<typeof this> {
+    get text() {
+      return markdownEscape(this.args.model?.name);
+    }
+    <template>{{this.text}}</template>
+  };
 }
 
 export class CardWithCountryField extends CardDef {
diff --git a/packages/base/css-value.gts b/packages/base/css-value.gts
index 5a933dad91a..48799a826dc 100644
--- a/packages/base/css-value.gts
+++ b/packages/base/css-value.gts
@@ -17,4 +17,28 @@ export default class CSSValueField extends StringField {
       </style>
     </template>
   };
+
+  // CS-10787: render CSS values inside inline code delimiters so they're
+  // clearly identifiable as literal values. Wraps in a backtick fence wide
+  // enough to contain any backticks in the value.
+  static markdown = class Markdown extends Component<typeof CSSValueField> {
+    get text() {
+      let value = this.args.model;
+      if (!value) {
+        return '';
+      }
+      let longestRun = 0;
+      let match = value.match(/`+/g);
+      if (match) {
+        for (let run of match) {
+          if (run.length > longestRun) longestRun = run.length;
+        }
+      }
+      let fence = '`'.repeat(Math.max(1, longestRun + 1));
+      let needsPad =
+        value.startsWith('`') || value.endsWith('`') || /^\s|\s$/.test(value);
+      return needsPad ? `${fence} ${value} ${fence}` : `${fence}${value}${fence}`;
+    }
+    <template>{{this.text}}</template>
+  };
 }
diff --git a/packages/base/csv-file-def.gts b/packages/base/csv-file-def.gts
index 97c9f631ccc..2c9a2732e57 100644
--- a/packages/base/csv-file-def.gts
+++ b/packages/base/csv-file-def.gts
@@ -16,6 +16,7 @@ import {
   type ByteStream,
   type SerializedFile,
 } from './file-api';
+import { fencedCodeBlock } from './markdown-helpers';
 
 const EXCERPT_MAX_LENGTH = 500;
 
@@ -551,6 +552,21 @@ export class CsvFileDef extends FileDef {
   static atom: BaseDefComponent = Atom;
   static head: BaseDefComponent = Head;
 
+  // CS-10787: emit the CSV source as a fenced `csv` code block. Empty
+  // content produces an empty string.
+  static markdown: BaseDefComponent = class Markdown extends Component<
+    typeof CsvFileDef
+  > {
+    get text() {
+      let content = this.args.model?.content;
+      if (!content) {
+        return '';
+      }
+      return fencedCodeBlock(content, 'csv');
+    }
+    <template>{{this.text}}</template>
+  };
+
   static async extractAttributes(
     url: string,
     getStream: () => Promise<ByteStream>,
diff --git a/packages/base/date-range-field.gts b/packages/base/date-range-field.gts
index 77418900c74..9ead82a6e36 100644
--- a/packages/base/date-range-field.gts
+++ b/packages/base/date-range-field.gts
@@ -13,6 +13,7 @@ import { on } from '@ember/modifier';
 import { fn } from '@ember/helper';
 import CalendarIcon from '@cardstack/boxel-icons/calendar';
 import { cn } from '@cardstack/boxel-ui/helpers';
+import { formatDateRangeForMarkdown } from './markdown-helpers';
 
 const Format = new Intl.DateTimeFormat('en-US', {
   year: 'numeric',
@@ -183,6 +184,18 @@ export default class DateRangeField extends FieldDef {
       <@fields.start /> - <@fields.end />
     </template>
   };
+
+  // CS-10786: consistent markdown-escaped range output. Uses the shared
+  // helper so formatting matches DateField/DateTimeField.
+  static markdown = class Markdown extends Component<typeof this> {
+    get formatted() {
+      return formatDateRangeForMarkdown(
+        this.args.model.start,
+        this.args.model.end,
+      );
+    }
+    <template>{{this.formatted}}</template>
+  };
 }
 
 interface DateRangeConfig {
diff --git a/packages/base/date.gts b/packages/base/date.gts
index e5fc2cce09d..923863e15c2 100644
--- a/packages/base/date.gts
+++ b/packages/base/date.gts
@@ -10,6 +10,7 @@ import {
   getSerializer,
   isValidDate,
 } from '@cardstack/runtime-common';
+import { formatDateForMarkdown } from './markdown-helpers';
 
 // The Intl API is supported in all modern browsers. In older ones, we polyfill
 // it in the application route at app startup.
@@ -44,6 +45,17 @@ export default class DateField extends FieldDef {
   static embedded = View;
   static atom = View;
 
+  // CS-10786: emit a consistently-formatted, markdown-escaped date so the
+  // value doesn't introduce accidental formatting when interpolated into a
+  // surrounding markdown document. Empty string for null/invalid dates so
+  // downstream tooling gets a valid (if terse) markdown document.
+  static markdown = class Markdown extends Component<typeof this> {
+    get formatted() {
+      return formatDateForMarkdown(this.args.model);
+    }
+    <template>{{this.formatted}}</template>
+  };
+
   static edit = class Edit extends Component<typeof this> {
     <template>
       <BoxelInput
diff --git a/packages/base/datetime.gts b/packages/base/datetime.gts
index 42d69e48081..cc48b0ddb2a 100644
--- a/packages/base/datetime.gts
+++ b/packages/base/datetime.gts
@@ -9,6 +9,7 @@ import {
   DatetimeSerializer,
   isValidDate,
 } from '@cardstack/runtime-common';
+import { formatDateTimeForMarkdown } from './markdown-helpers';
 
 // The Intl API is supported in all modern browsers. In older ones, we polyfill
 // it in the application route at app startup.
@@ -47,6 +48,14 @@ export default class DateTimeField extends FieldDef {
   static embedded = View;
   static atom = View;
 
+  // CS-10786: consistent markdown-escaped date+time output.
+  static markdown = class Markdown extends Component<typeof this> {
+    get formatted() {
+      return formatDateTimeForMarkdown(this.args.model);
+    }
+    <template>{{this.formatted}}</template>
+  };
+
   static edit = class Edit extends Component<typeof this> {
     <template>
       <BoxelInput
diff --git a/packages/base/default-templates/markdown-fallback.gts b/packages/base/default-templates/markdown-fallback.gts
new file mode 100644
index 00000000000..ae87517c0ce
--- /dev/null
+++ b/packages/base/default-templates/markdown-fallback.gts
@@ -0,0 +1,165 @@
+import { scheduleOnce } from '@ember/runloop';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { modifier } from 'ember-modifier';
+
+import type { ComponentLike } from '@glint/template';
+
+import type {
+  BaseDef,
+  BaseDefComponent,
+  CardDef,
+  FieldsTypeFor,
+  Format,
+} from '../card-api';
+import { DefaultFormatsProvider } from '../field-component';
+
+// Default `static markdown` template used by `CardDef`, `FieldDef`, and
+// `FileDef` when a subclass does not override it (CS-10784).
+//
+// Strategy:
+//   1. Render the HTML fallback format (isolated for cards, embedded for
+//      fields) into a hidden "source" container. `DefaultFormatsProvider`
+//      overrides the markdown format-recursion so `<@fields.x />` inside
+//      the fallback uses HTML formats, not recursive markdown.
+//   2. A modifier reads the source container's `innerHTML` after render,
+//      invokes the host-provided `globalThis.__boxelHtmlToMarkdown`
+//      converter (see `packages/host/app/lib/html-to-markdown.ts`), and
+//      stores the result in tracked state.
+//   3. The converted markdown is emitted into a `[data-markdown-output]`
+//      container, which the prerender pipeline targets for `textContent`
+//      extraction.
+//
+// The converter lives in the host bundle so `packages/base` has zero
+// direct dependency on turndown — critical for the "card code must not
+// run on the server" constraint, since realm-server never needs to pull
+// turndown into its graph.
+
+type HtmlToMarkdownFn = (html: string) => string;
+
+function resolveConverter(): HtmlToMarkdownFn | undefined {
+  if (typeof globalThis === 'undefined') {
+    return undefined;
+  }
+  let fn = (globalThis as any).__boxelHtmlToMarkdown;
+  return typeof fn === 'function' ? fn : undefined;
+}
+
+interface FallbackArgs {
+  cardOrField: typeof BaseDef;
+  model: CardDef;
+  fields: FieldsTypeFor<CardDef>;
+  format: Format;
+}
+
+export default class DefaultMarkdownFallbackTemplate extends Component<{
+  Args: FallbackArgs;
+}> {
+  @tracked markdown = '';
+
+  private get isField(): boolean {
+    let cls = this.args.cardOrField as any;
+    // `FileDef` is both a field (`isFieldDef`) and a file def. Its embedded
+    // template is its isolated template (see card-api.gts), so treating it
+    // as a field here picks up the same output either way.
+    return Boolean(cls?.isFieldDef);
+  }
+
+  private get fallbackFormat(): Format {
+    return this.isField ? 'embedded' : 'isolated';
+  }
+
+  // We invoke the resolved format component with only the four args the
+  // fallback knows about (`model`, `fields`, `format`, `cardOrField`); the
+  // strict `BaseDefComponent` signature would also require the full
+  // `SignatureFor<...>` shape (`set`, `fieldName`, `createCard`, etc.). Those
+  // are normally injected by `getBoxComponent`'s wrapper, not by hand here —
+  // so we narrow the return type to a `ComponentLike` that matches the args
+  // we actually pass. The runtime resolution still returns the same class.
+  private get FallbackComponent(): ComponentLike<{ Args: FallbackArgs }> {
+    // FieldDef has no `isolated` slot — only `embedded`/`atom`/`fitted`/`edit`.
+    // CardDef and FileDef both define `isolated`. Pick the right slot
+    // dynamically so the angle-bracket invocation below works for all three.
+    let cls = this.args.cardOrField as unknown as Record<
+      string,
+      BaseDefComponent
+    >;
+    return (this.isField ? cls.embedded : cls.isolated) as ComponentLike<{
+      Args: FallbackArgs;
+    }>;
+  }
+
+  private get nestedDefaultFormats() {
+    // Provide HTML defaults so `<@fields.x />` inside the fallback renders
+    // HTML components instead of recursing back into markdown. The defaults
+    // are the same regardless of the outer container — fields render
+    // `embedded` and linked cards render `fitted`, mirroring what a typical
+    // `isolated`/`embedded` host would request.
+    return { fieldDef: 'embedded' as Format, cardDef: 'fitted' as Format };
+  }
+
+  private captureAndConvert = modifier((element: HTMLElement) => {
+    let convert = () => {
+      if (!element.isConnected) {
+        return;
+      }
+      let converter = resolveConverter();
+      let html = element.innerHTML;
+      let next = converter
+        ? converter(html)
+        : (element.textContent ?? '').trim();
+      if (next !== this.markdown) {
+        this.markdown = next;
+      }
+    };
+
+    // Defer the first conversion to afterRender so Glimmer is not mid-commit
+    // when we read the DOM. `scheduleOnce` coalesces repeated schedule calls
+    // within the same runloop tick.
+    let schedule = () => scheduleOnce('afterRender', this, convert);
+    schedule();
+
+    if (typeof MutationObserver === 'undefined') {
+      return;
+    }
+
+    // Re-convert when the fallback DOM mutates (async data resolves, linked
+    // cards load, etc.). The prerender pipeline polls for stability, so the
+    // eventual steady-state markdown is what ends up captured.
+    let observer = new MutationObserver(schedule);
+    observer.observe(element, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+    return () => observer.disconnect();
+  });
+
+  <template>
+    <div
+      class='markdown-fallback-source'
+      aria-hidden='true'
+      data-markdown-fallback-source
+      {{this.captureAndConvert}}
+    >
+      <DefaultFormatsProvider @value={{this.nestedDefaultFormats}}>
+        <this.FallbackComponent
+          @model={{@model}}
+          @fields={{@fields}}
+          @format={{this.fallbackFormat}}
+          @cardOrField={{@cardOrField}}
+        />
+      </DefaultFormatsProvider>
+    </div>
+    <div data-markdown-output>{{this.markdown}}</div>
+    <style scoped>
+      .markdown-fallback-source {
+        /* Hide the HTML source tree from interactive viewers; the modifier
+           still reads its `innerHTML` before conversion. Prerender extracts
+           text from `[data-markdown-output]` specifically, so the hidden
+           source does not contaminate the captured markdown. */
+        display: none;
+      }
+    </style>
+  </template>
+}
diff --git a/packages/base/email.gts b/packages/base/email.gts
index b6c1e92d8e3..728dbc1dd94 100644
--- a/packages/base/email.gts
+++ b/packages/base/email.gts
@@ -9,6 +9,7 @@ import {
   type EmailFormatValidationError,
 } from '@cardstack/boxel-ui/helpers';
 import { fieldSerializer } from '@cardstack/runtime-common';
+import { markdownLink } from './markdown-helpers';
 
 import MailIcon from '@cardstack/boxel-icons/mail';
 
@@ -67,4 +68,18 @@ export default class EmailField extends StringField {
       </style>
     </template>
   };
+
+  // CS-10786: emit a markdown `mailto:` link. Text and href are escaped /
+  // URL-encoded by `markdownLink` to keep special characters in the local
+  // part (e.g. `+`, `.`, unlikely-but-possible `[`) from breaking parsing.
+  static markdown = class Markdown extends Component<typeof EmailField> {
+    get text() {
+      let value = this.args.model;
+      if (value == null || value === '') {
+        return '';
+      }
+      return markdownLink(value, `mailto:${value}`);
+    }
+    <template>{{this.text}}</template>
+  };
 }
diff --git a/packages/base/enum.gts b/packages/base/enum.gts
index b8a6f45781e..0dcbbfe8ee9 100644
--- a/packages/base/enum.gts
+++ b/packages/base/enum.gts
@@ -4,7 +4,7 @@ import { BoxelSelect } from '@cardstack/boxel-ui/components';
 import { getField } from '@cardstack/runtime-common';
 import { resolveFieldConfiguration } from './field-support';
 import type { FieldDefConstructor } from './card-api';
-import { not } from '@cardstack/boxel-ui/helpers';
+import { markdownEscape, not } from '@cardstack/boxel-ui/helpers';
 
 // enumField factory moved out of card-api: creates a FieldDef subclass with
 // editor/atom wired to read options via configuration.enum.*
@@ -181,6 +181,26 @@ function enumField<BaseT extends FieldDefConstructor>(
       </template>
     };
 
+    // CS-10787: render the matching option's label (not its raw value), so
+    // enum fields read naturally in markdown output. Falls back to the
+    // string form of the model when no option matches.
+    static markdown = class Markdown extends GlimmerComponent<any> {
+      get text() {
+        let v = this.args.model as any;
+        if (v == null) {
+          return '';
+        }
+        let cfg = this.args.configuration as
+          | { enum?: { options?: any[] } }
+          | undefined;
+        let opts = normalizeEnumOptions(cfg?.enum?.options ?? []);
+        let match = opts.find((o) => isEqual(o.value, v));
+        let display = match?.label ?? String(v);
+        return markdownEscape(display);
+      }
+      <template>{{this.text}}</template>
+    };
+
     static edit = class Edit extends GlimmerComponent<any> {
       get options() {
         let cfg = this.args.configuration as
diff --git a/packages/base/ethereum-address.gts b/packages/base/ethereum-address.gts
index c155fdabc75..17bfa5b40b8 100644
--- a/packages/base/ethereum-address.gts
+++ b/packages/base/ethereum-address.gts
@@ -1,7 +1,7 @@
 import { primitive, Component, useIndexBasedKey, FieldDef } from './card-api';
 import { BoxelInput } from '@cardstack/boxel-ui/components';
 import { TextInputValidator } from './text-input-validator';
-import { not } from '@cardstack/boxel-ui/helpers';
+import { markdownEscape, not } from '@cardstack/boxel-ui/helpers';
 import CurrencyEthereum from '@cardstack/boxel-icons/currency-ethereum';
 import {
   fieldSerializer,
@@ -52,4 +52,14 @@ export default class EthereumAddressField extends FieldDef {
   static embedded = View;
   static atom = View;
   static edit = Edit;
+
+  // CS-10786: addresses are hex strings (`0x...`) — no metacharacters in the
+  // typical output, but pass through `markdownEscape` defensively so an
+  // invalid or future-format value can't escape into surrounding markdown.
+  static markdown = class Markdown extends Component<typeof this> {
+    get text() {
+      return markdownEscape(this.args.model);
+    }
+    <template>{{this.text}}</template>
+  };
 }
diff --git a/packages/base/field-component.gts b/packages/base/field-component.gts
index 019d6457b9c..7fe3ad08040 100644
--- a/packages/base/field-component.gts
+++ b/packages/base/field-component.gts
@@ -318,6 +318,8 @@ export function getBoxComponent(
                             fieldName=field.name
                           }}
                           style={{getThemeStyles card}}
+                          data-boxel-card-id={{card.id}}
+                          data-boxel-card-format={{effectiveFormats.cardDef}}
                           data-test-card={{card.id}}
                           data-test-card-format={{effectiveFormats.cardDef}}
                           data-test-field-component-card
@@ -541,6 +543,11 @@ function defaultFieldFormats(containingFormat: Format): FieldFormats {
       return { fieldDef: 'atom', cardDef: 'atom' };
     case 'head':
       return { fieldDef: 'head', cardDef: 'head' };
+    case 'markdown':
+      // Recurse in the same format: `<@fields.x />` inside a markdown template
+      // should delegate to the child's markdown template, not embedded/fitted
+      // HTML, so the composed output is uniformly markdown text.
+      return { fieldDef: 'markdown', cardDef: 'markdown' };
     default:
       return { fieldDef: 'embedded', cardDef: 'fitted' };
   }
diff --git a/packages/base/gts-file-def.gts b/packages/base/gts-file-def.gts
index 4dd4bd473c2..61e5113b8dc 100644
--- a/packages/base/gts-file-def.gts
+++ b/packages/base/gts-file-def.gts
@@ -4,4 +4,6 @@ export class GtsFileDef extends TsFileDef {
   static displayName = 'GTS Module';
   static acceptTypes = '.gts';
   static validExtensions = new Set(['.gts']);
+  // CS-10787: identify GTS content to markdown consumers.
+  static markdownLanguage = 'gts';
 }
diff --git a/packages/base/json-file-def.gts b/packages/base/json-file-def.gts
index cc9c44a3e8d..05e59eb6e02 100644
--- a/packages/base/json-file-def.gts
+++ b/packages/base/json-file-def.gts
@@ -14,6 +14,7 @@ import {
   type ByteStream,
   type SerializedFile,
 } from './file-api';
+import { fencedCodeBlock } from './markdown-helpers';
 
 const EXCERPT_MAX_LENGTH = 500;
 
@@ -498,6 +499,21 @@ export class JsonFileDef extends FileDef {
   static atom: BaseDefComponent = Atom;
   static head: BaseDefComponent = Head;
 
+  // CS-10787: emit the JSON source as a fenced `json` code block. Empty
+  // content produces an empty string.
+  static markdown: BaseDefComponent = class Markdown extends Component<
+    typeof JsonFileDef
+  > {
+    get text() {
+      let content = this.args.model?.content;
+      if (!content) {
+        return '';
+      }
+      return fencedCodeBlock(content, 'json');
+    }
+    <template>{{this.text}}</template>
+  };
+
   static async extractAttributes(
     url: string,
     getStream: () => Promise<ByteStream>,
diff --git a/packages/base/llm-model.gts b/packages/base/llm-model.gts
index f5892fb32da..f64a27aad9c 100644
--- a/packages/base/llm-model.gts
+++ b/packages/base/llm-model.gts
@@ -1,6 +1,7 @@
 import { Component } from './card-api';
 import StringField from './string';
 import { BoxelSelect } from '@cardstack/boxel-ui/components';
+import { markdownEscape } from '@cardstack/boxel-ui/helpers';
 import { DEFAULT_LLM_ID_TO_NAME } from '@cardstack/runtime-common';
 
 const LLM_MODEL_OPTIONS = Object.entries(DEFAULT_LLM_ID_TO_NAME).map(
@@ -44,4 +45,20 @@ class LLMModelEdit extends Component<typeof LLMModelField> {
 export default class LLMModelField extends StringField {
   static displayName = 'LLM Model';
   static edit = LLMModelEdit;
+
+  // CS-10786: prefer the human-readable label when we recognize the model
+  // id, falling back to the id itself. Escaped so any metacharacters in the
+  // label don't leak into the document.
+  static markdown = class Markdown extends Component<typeof LLMModelField> {
+    get text() {
+      let value = this.args.model;
+      if (value == null || value === '') {
+        return '';
+      }
+      let label =
+        (DEFAULT_LLM_ID_TO_NAME as Record<string, string>)[value] ?? value;
+      return markdownEscape(label);
+    }
+    <template>{{this.text}}</template>
+  };
 }
diff --git a/packages/base/markdown-file-def.gts b/packages/base/markdown-file-def.gts
index f4801efba0d..e786fa2cbc1 100644
--- a/packages/base/markdown-file-def.gts
+++ b/packages/base/markdown-file-def.gts
@@ -467,6 +467,18 @@ export class MarkdownDef extends FileDef {
   static atom: BaseDefComponent = Atom;
   static head: BaseDefComponent = Head;
 
+  // CS-10787: markdown files already are markdown, so pass the content
+  // through verbatim rather than wrapping in a fenced block that would
+  // double-render when consumed.
+  static markdown: BaseDefComponent = class Markdown extends Component<
+    typeof MarkdownDef
+  > {
+    get text() {
+      return this.args.model?.content ?? '';
+    }
+    <template>{{this.text}}</template>
+  };
+
   static async extractAttributes(
     url: string,
     getStream: () => Promise<ByteStream>,
diff --git a/packages/base/markdown-helpers.ts b/packages/base/markdown-helpers.ts
new file mode 100644
index 00000000000..ca055cf5b40
--- /dev/null
+++ b/packages/base/markdown-helpers.ts
@@ -0,0 +1,254 @@
+// CS-10786: Shared helpers for `static markdown` templates on specialized
+// fields. Centralized here so all fields agree on date formatting and link
+// construction, and so future adjustments happen in one place.
+
+import { markdownEscape } from '@cardstack/boxel-ui/helpers';
+import { isValidDate } from '@cardstack/runtime-common';
+
+// Date formatting shared by DateField, DateTimeField, and DateRangeField so
+// their markdown output is consistent. Matches the existing `en-US` `{year:
+// numeric, month: short, day: numeric}` pattern already used by each field's
+// HTML view; DateTime appends hour/minute.
+const MARKDOWN_DATE_FORMAT = new Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+});
+
+const MARKDOWN_DATETIME_FORMAT = new Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+  hour12: true,
+  hour: 'numeric',
+  minute: '2-digit',
+});
+
+// Markdown strings returned from these helpers are always pre-escaped: any
+// metacharacters in the formatted output (e.g. commas in dates are fine, but
+// `*`/`_`/`#` could appear in locale-specific variants) are run through
+// `markdownEscape`. Callers can interpolate the result directly into a
+// surrounding markdown document.
+
+export function formatDateForMarkdown(value: Date | null | undefined): string {
+  if (value == null || !isValidDate(value)) {
+    return '';
+  }
+  return markdownEscape(MARKDOWN_DATE_FORMAT.format(value));
+}
+
+export function formatDateTimeForMarkdown(
+  value: Date | null | undefined,
+): string {
+  if (value == null || !isValidDate(value)) {
+    return '';
+  }
+  return markdownEscape(MARKDOWN_DATETIME_FORMAT.format(value));
+}
+
+export function formatDateRangeForMarkdown(
+  start: Date | null | undefined,
+  end: Date | null | undefined,
+): string {
+  let startText = formatDateForMarkdown(start);
+  let endText = formatDateForMarkdown(end);
+  if (!startText && !endText) {
+    return '';
+  }
+  // `–` (en-dash) would be nicer typography, but keep it ASCII-friendly so
+  // downstream markdown tooling doesn't have to normalize. The `-` below is
+  // literal; it's not at line start, so `markdownEscape`'s bullet-marker rule
+  // does not apply.
+  return `${startText} - ${endText}`;
+}
+
+// Build a markdown inline link: `[escaped text](encoded href)`. The text is
+// run through `markdownEscape` so any metacharacters in the visible text
+// don't break formatting; the href is passed through `encodeURI` to quote
+// whitespace and other unsafe characters without over-encoding already-
+// percent-encoded URLs.
+export function markdownLink(
+  text: string | null | undefined,
+  href: string | null | undefined,
+): string {
+  let safeText = markdownEscape(text ?? '');
+  let rawHref = href ?? '';
+  let encodedHref: string;
+  try {
+    encodedHref = encodeURI(rawHref);
+  } catch {
+    encodedHref = rawHref;
+  }
+  // Parentheses inside a URL break the markdown link syntax; escape them.
+  encodedHref = encodedHref.replace(/\(/g, '%28').replace(/\)/g, '%29');
+  return `[${safeText}](${encodedHref})`;
+}
+
+// CS-10797: Convenience helpers for rendering linksTo / linksToMany
+// relationships as markdown links. Template authors call these explicitly;
+// they are not wired into default markdown rendering.
+
+// Minimal shape expected from a linked card — keeps this module free of
+// heavyweight card-api imports.
+interface CardLike {
+  id?: string;
+  cardTitle?: string;
+}
+
+// Returns `[text](card.id)` for a single linked card. Falls back to
+// `card.cardTitle` when `text` is omitted. Returns `''` for null/undefined
+// cards so callers can handle placeholders themselves.
+export function markdownLinkForCard(
+  card: CardLike | null | undefined,
+  text?: string,
+): string {
+  if (!card) {
+    return '';
+  }
+  let linkText = text ?? card.cardTitle ?? '';
+  return markdownLink(linkText, card.id);
+}
+
+interface MarkdownLinksForCardsOptions {
+  style?: 'list' | 'inline';
+  text?: (card: CardLike) => string;
+}
+
+// Renders an array of linked cards as markdown links.
+// `style: 'list'` (default) emits `- [Title](id)` per line.
+// `style: 'inline'` emits comma-separated `[A](idA), [B](idB)`.
+// Null entries in the array are skipped. Empty / all-null arrays return `''`.
+export function markdownLinksForCards(
+  cards: (CardLike | null | undefined)[] | null | undefined,
+  options?: MarkdownLinksForCardsOptions,
+): string {
+  if (!cards) {
+    return '';
+  }
+  let style = options?.style ?? 'list';
+  let textFn = options?.text;
+  let links: string[] = [];
+  for (let card of cards) {
+    if (!card) continue;
+    let linkText = textFn ? textFn(card) : undefined;
+    let link = markdownLinkForCard(card, linkText);
+    if (link) {
+      links.push(link);
+    }
+  }
+  if (links.length === 0) {
+    return '';
+  }
+  if (style === 'inline') {
+    return links.join(', ');
+  }
+  return links.map((l) => `- ${l}`).join('\n');
+}
+
+// CS-10797: Convenience helpers for embedding cards using BFM (Boxel File
+// Model) syntax. Inline embeds render the card inline (`:card[URL]`), block
+// embeds render on their own line (`::card[URL]` or `::card[URL | spec]`).
+
+interface MarkdownEmbedOptions {
+  // 'inline' produces `:card[URL]`, 'block' produces `::card[URL]`.
+  // Default: 'block'.
+  kind?: 'inline' | 'block';
+  // Size specifier appended after `|` in block embeds (e.g. 'fitted 250x40',
+  // 'isolated', 'strip'). Ignored for inline embeds.
+  size?: string;
+}
+
+// Returns a BFM card-reference directive for a single card.
+// Returns `''` for null/undefined cards.
+export function markdownEmbedForCard(
+  card: CardLike | null | undefined,
+  options?: MarkdownEmbedOptions,
+): string {
+  if (!card?.id) {
+    return '';
+  }
+  let kind = options?.kind ?? 'block';
+  if (kind === 'inline') {
+    return `:card[${card.id}]`;
+  }
+  let size = options?.size;
+  if (size) {
+    return `::card[${card.id} | ${size}]`;
+  }
+  return `::card[${card.id}]`;
+}
+
+interface MarkdownEmbedsOptions extends MarkdownEmbedOptions {
+  // Separator between embeds. Defaults to '\n\n' for block, ', ' for inline.
+  separator?: string;
+}
+
+// Renders an array of cards as BFM card-reference directives.
+// Null entries are skipped. Empty / all-null arrays return `''`.
+export function markdownEmbedsForCards(
+  cards: (CardLike | null | undefined)[] | null | undefined,
+  options?: MarkdownEmbedsOptions,
+): string {
+  if (!cards) {
+    return '';
+  }
+  let embeds: string[] = [];
+  for (let card of cards) {
+    let embed = markdownEmbedForCard(card, options);
+    if (embed) {
+      embeds.push(embed);
+    }
+  }
+  if (embeds.length === 0) {
+    return '';
+  }
+  let kind = options?.kind ?? 'block';
+  let separator = options?.separator ?? (kind === 'inline' ? ' ' : '\n\n');
+  return embeds.join(separator);
+}
+
+// CS-10787: Build a fenced code block. The fence is made of at least three
+// backticks, expanded to be longer than any run of backticks in the content
+// so the fence isn't prematurely closed. An optional language identifier
+// labels the block for syntax highlighting consumers.
+export function fencedCodeBlock(
+  content: string | null | undefined,
+  language?: string,
+): string {
+  let body = content ?? '';
+  let longestRun = 0;
+  let match = body.match(/`+/g);
+  if (match) {
+    for (let run of match) {
+      if (run.length > longestRun) longestRun = run.length;
+    }
+  }
+  let fence = '`'.repeat(Math.max(3, longestRun + 1));
+  let lang = language ? language : '';
+  // Ensure the body ends with a newline so the closing fence sits on its own
+  // line. CommonMark allows omission, but normalizing avoids surprises.
+  let normalized = body.endsWith('\n') ? body : `${body}\n`;
+  return `${fence}${lang}\n${normalized}${fence}`;
+}
+
+// CS-10787: Build a markdown image reference `![alt](url)` with proper
+// escaping/encoding. If url is missing, fall back to a plain placeholder so
+// downstream consumers still get something meaningful.
+export function markdownImage(
+  alt: string | null | undefined,
+  url: string | null | undefined,
+): string {
+  if (!url) {
+    let safeAlt = markdownEscape(alt ?? '');
+    return safeAlt ? `[binary image: ${safeAlt}]` : '[binary image]';
+  }
+  let safeAlt = markdownEscape(alt ?? '');
+  let encodedHref: string;
+  try {
+    encodedHref = encodeURI(url);
+  } catch {
+    encodedHref = url;
+  }
+  encodedHref = encodedHref.replace(/\(/g, '%28').replace(/\)/g, '%29');
+  return `![${safeAlt}](${encodedHref})`;
+}
diff --git a/packages/base/menu-items.ts b/packages/base/menu-items.ts
index cf5b41a800d..6b75ff9b305 100644
--- a/packages/base/menu-items.ts
+++ b/packages/base/menu-items.ts
@@ -4,6 +4,7 @@ import {
   type MenuItemOptions,
 } from '@cardstack/boxel-ui/helpers';
 
+import CopyCardAsMarkdownCommand from '@cardstack/boxel-host/commands/copy-card-as-markdown';
 import CopyCardCommand from '@cardstack/boxel-host/commands/copy-card';
 import GenerateExampleCardsCommand from '@cardstack/boxel-host/commands/generate-example-cards';
 import OpenCreateListingModalCommand from '@cardstack/boxel-host/commands/open-create-listing-modal';
@@ -27,6 +28,7 @@ import { resolveAdoptsFrom } from '@cardstack/runtime-common';
 
 import CodeIcon from '@cardstack/boxel-icons/code';
 import ArrowLeft from '@cardstack/boxel-icons/arrow-left';
+import ClipboardCopy from '@cardstack/boxel-icons/clipboard-copy';
 import Eye from '@cardstack/boxel-icons/eye';
 import LinkIcon from '@cardstack/boxel-icons/link';
 import Trash2Icon from '@cardstack/boxel-icons/trash-2';
@@ -72,6 +74,15 @@ export function getDefaultCardMenuItems(
     });
   }
   if (params.menuContext === 'interact') {
+    menuItems.push({
+      label: 'Copy as Markdown',
+      action: () =>
+        new CopyCardAsMarkdownCommand(params.commandContext).execute({
+          cardId,
+        }),
+      icon: ClipboardCopy,
+      disabled: !cardId,
+    });
     if (
       !isRealmIndexCard(card) && // workspace index card cannot be deleted
       cardId &&
diff --git a/packages/base/percentage.gts b/packages/base/percentage.gts
index e4264e98821..95e01640097 100644
--- a/packages/base/percentage.gts
+++ b/packages/base/percentage.gts
@@ -1,5 +1,6 @@
 import { Component } from './card-api';
 import NumberField from './number';
+import { markdownEscape } from '@cardstack/boxel-ui/helpers';
 
 import PercentageIcon from '@cardstack/boxel-icons/square-percentage';
 
@@ -40,4 +41,16 @@ export default class PercentageField extends NumberField {
       {{/if}}
     </template>
   };
+
+  // CS-10786: emit `NN%` escaped — a leading negative would look like a
+  // bullet marker at line start, and `markdownEscape` handles that.
+  static markdown = class Markdown extends Component<typeof PercentageField> {
+    get text() {
+      if (this.args.model == null) {
+        return '';
+      }
+      return markdownEscape(displayPercentage(this.args.model));
+    }
+    <template>{{this.text}}</template>
+  };
 }
diff --git a/packages/base/phone-number.gts b/packages/base/phone-number.gts
index 785c5aac233..dc75af6c454 100644
--- a/packages/base/phone-number.gts
+++ b/packages/base/phone-number.gts
@@ -19,10 +19,12 @@ import {
   RadioInput,
 } from '@cardstack/boxel-ui/components';
 import {
+  markdownEscape,
   not,
   type NormalizePhoneFormatResult,
 } from '@cardstack/boxel-ui/helpers';
 import { fieldSerializer, PhoneSerializer } from '@cardstack/runtime-common';
+import { markdownLink } from './markdown-helpers';
 
 import PhoneIcon from '@cardstack/boxel-icons/phone';
 
@@ -152,6 +154,27 @@ export default class PhoneNumberField extends FieldDef {
       return parsed?.number?.international ?? null;
     }
   };
+
+  // CS-10786: emit a markdown link `[formatted number](tel:+E164)` when the
+  // value parses, otherwise escape the raw text. `markdownLink` handles text
+  // escaping and URL-encoding for us.
+  static markdown = class Markdown extends Component<typeof this> {
+    get text() {
+      let value = this.args.model;
+      if (value == null || value === '') {
+        return '';
+      }
+      let parsed = parseForDisplay(value);
+      if (parsed?.number?.international && parsed?.number?.rfc3966) {
+        return markdownLink(
+          parsed.number.international,
+          parsed.number.rfc3966,
+        );
+      }
+      return markdownEscape(value);
+    }
+    <template>{{this.text}}</template>
+  };
 }
 
 class PhoneNumberTypeEdit extends Component<typeof PhoneNumberType> {
diff --git a/packages/base/realm.gts b/packages/base/realm.gts
index b7f68c64fc2..220dd3dae1c 100644
--- a/packages/base/realm.gts
+++ b/packages/base/realm.gts
@@ -1,5 +1,6 @@
 import { Component } from './card-api';
 import StringField from './string';
+import { markdownLink } from './markdown-helpers';
 import {
   BoxelDropdown,
   BoxelInput,
@@ -167,4 +168,17 @@ export default class RealmField extends StringField {
   static displayName = 'Realm';
   static icon = World;
   static edit = EditComponent;
+
+  // CS-10787: emit the realm URL as a markdown link (self-linked, since we
+  // don't have the realm's name accessible from just the primitive URL).
+  static markdown = class Markdown extends Component<typeof RealmField> {
+    get text() {
+      let url = this.args.model;
+      if (!url) {
+        return '';
+      }
+      return markdownLink(url, url);
+    }
+    <template>{{this.text}}</template>
+  };
 }
diff --git a/packages/base/response-field.gts b/packages/base/response-field.gts
index 1c86aacaf23..6385e545aad 100644
--- a/packages/base/response-field.gts
+++ b/packages/base/response-field.gts
@@ -1,6 +1,31 @@
-import { primitive, FieldDef } from './card-api';
+import { Component, primitive, FieldDef } from './card-api';
+import { markdownEscape } from '@cardstack/boxel-ui/helpers';
 
 export default class ResponseField extends FieldDef {
   static displayName = 'Response';
   static [primitive]: Response;
+
+  // CS-10787: emit a short placeholder describing the HTTP response. The raw
+  // Response object isn't markdown-representable, so we summarize by status
+  // line when present and emit nothing otherwise.
+  static markdown = class Markdown extends Component<typeof ResponseField> {
+    get text() {
+      let model = this.args.model;
+      if (!model) {
+        return '';
+      }
+      let status = typeof model.status === 'number' ? model.status : undefined;
+      let statusText = typeof model.statusText === 'string'
+        ? model.statusText
+        : '';
+      if (status == null) {
+        return '[HTTP response]';
+      }
+      let summary = statusText
+        ? `${status} ${statusText}`
+        : String(status);
+      return `[HTTP response: ${markdownEscape(summary)}]`;
+    }
+    <template>{{this.text}}</template>
+  };
 }
diff --git a/packages/base/rich-markdown.gts b/packages/base/rich-markdown.gts
index 6f64f6caf5c..ff7b02a1ea1 100644
--- a/packages/base/rich-markdown.gts
+++ b/packages/base/rich-markdown.gts
@@ -100,6 +100,16 @@ export class RichMarkdownField extends FieldDef {
     </template>
   };
 
+  // CS-10786: author-authored markdown passes through verbatim — double-
+  // escaping would corrupt the user's formatting. Mirrors MarkdownField's
+  // approach.
+  static markdown = class Markdown extends Component<typeof this> {
+    get text() {
+      return this.args.model?.content ?? '';
+    }
+    <template>{{this.text}}</template>
+  };
+
   static edit = class Edit extends Component<typeof this> {
     _modeState = new TrackedObject({ value: 'compose' as 'compose' | 'source' | 'preview' });
 
diff --git a/packages/base/structured-theme-variables.gts b/packages/base/structured-theme-variables.gts
index 4fa87a6ec4f..58809ac0c70 100644
--- a/packages/base/structured-theme-variables.gts
+++ b/packages/base/structured-theme-variables.gts
@@ -3,6 +3,7 @@ import {
   buildCssVariableName,
   dasherize,
   entriesToCssRuleMap,
+  markdownEscape,
   type CssVariableEntry,
   type CssRuleMap,
 } from '@cardstack/boxel-ui/helpers';
@@ -142,6 +143,33 @@ export class ThemeTypographyField extends FieldDef {
     return entriesToCssRuleMap(this.cssVariableFields);
   }
 
+  // CS-10787: emit a small header + bulleted entries section for each
+  // populated typography slot. Delegates the per-slot rendering to
+  // TypographyField.markdown by emitting its text directly.
+  static markdown = class Markdown extends Component<
+    typeof ThemeTypographyField
+  > {
+    get text() {
+      let model = this.args.model;
+      if (!model) {
+        return '';
+      }
+      let entries = model.cssVariableFields ?? [];
+      if (!entries.length) {
+        return '';
+      }
+      let rows: string[] = [];
+      for (let { name, value } of entries) {
+        if (!value) continue;
+        rows.push(
+          `- ${markdownEscape(name ?? '')}: \`${value}\``,
+        );
+      }
+      return rows.join('\n');
+    }
+    <template>{{this.text}}</template>
+  };
+
   static embedded = class Embedded extends Component<typeof this> {
     <template>
       <section class='theme-typography'>
@@ -604,4 +632,27 @@ export default class ThemeVarField extends FieldDef {
   }
 
   static embedded: BaseDefComponent = Embedded;
+
+  // CS-10787: emit a bulleted list of populated CSS variables — each entry
+  // is the CSS variable name paired with its value in inline code. Empty
+  // slots are skipped.
+  static markdown = class Markdown extends Component<typeof ThemeVarField> {
+    get text() {
+      let model = this.args.model;
+      if (!model) {
+        return '';
+      }
+      let entries = model.cssVariableFields ?? [];
+      if (!entries.length) {
+        return '';
+      }
+      let rows: string[] = [];
+      for (let { name, value } of entries) {
+        if (!value) continue;
+        rows.push(`- ${markdownEscape(name ?? '')}: \`${value}\``);
+      }
+      return rows.join('\n');
+    }
+    <template>{{this.text}}</template>
+  };
 }
diff --git a/packages/base/structured-theme.gts b/packages/base/structured-theme.gts
index 29808f0df98..dfb9b43ea98 100644
--- a/packages/base/structured-theme.gts
+++ b/packages/base/structured-theme.gts
@@ -12,6 +12,7 @@ import {
   generateCssVariables,
   parseCssGroups,
   extractCssVariables,
+  markdownEscape,
   sanitizeHtmlSafe,
   type CssRuleMap,
 } from '@cardstack/boxel-ui/helpers';
@@ -310,6 +311,56 @@ export default class StructuredTheme extends Theme {
 
   static isolated: BaseDefComponent = Isolated;
 
+  // CS-10787: emit a compact structured summary of the theme — title,
+  // description, version, and the sub-field renderings for typography and
+  // root variables. Avoids the noisy HTML-to-markdown fallback output
+  // produced by the dashboard isolated template.
+  static markdown: BaseDefComponent = class Markdown extends Component<
+    typeof StructuredTheme
+  > {
+    get text() {
+      let model = this.args.model;
+      if (!model) {
+        return '';
+      }
+      let parts: string[] = [];
+      let title = model.cardTitle;
+      if (title) {
+        parts.push(`# ${markdownEscape(title)}`);
+      }
+      if (model.cardDescription) {
+        parts.push(markdownEscape(model.cardDescription));
+      }
+      if (model.version) {
+        parts.push(`Version: \`${model.version}\``);
+      }
+      let typographyEntries = model.typography?.cssVariableFields ?? [];
+      if (typographyEntries.length) {
+        parts.push('## Typography');
+        let rows: string[] = [];
+        for (let { name, value } of typographyEntries) {
+          if (!value) continue;
+          rows.push(`- ${markdownEscape(name ?? '')}: \`${value}\``);
+        }
+        if (rows.length) {
+          parts.push(rows.join('\n'));
+        }
+      }
+      let rootEntries = model.rootVariables?.cssVariableFields ?? [];
+      let rootRows: string[] = [];
+      for (let { name, value } of rootEntries) {
+        if (!value) continue;
+        rootRows.push(`- ${markdownEscape(name ?? '')}: \`${value}\``);
+      }
+      if (rootRows.length) {
+        parts.push('## Root Variables');
+        parts.push(rootRows.join('\n'));
+      }
+      return parts.join('\n\n');
+    }
+    <template>{{this.text}}</template>
+  };
+
   static embedded = class Embedded extends Component<typeof this> {
     <template>
       <article class='structured-theme-embedded'>
diff --git a/packages/base/text-file-def.gts b/packages/base/text-file-def.gts
index 461475fc788..c76f9994466 100644
--- a/packages/base/text-file-def.gts
+++ b/packages/base/text-file-def.gts
@@ -13,6 +13,7 @@ import {
   type ByteStream,
   type SerializedFile,
 } from './file-api';
+import { fencedCodeBlock } from './markdown-helpers';
 
 const TEXT_EXTENSIONS = new Set(['.txt', '.text']);
 const EXCERPT_MAX_LENGTH = 500;
@@ -360,6 +361,22 @@ export class TextFileDef extends FileDef {
   static atom: BaseDefComponent = Atom;
   static head: BaseDefComponent = Head;
 
+  // CS-10787: plain-text files emit as an unlabeled fenced code block so
+  // arbitrary content (including markdown-looking text) doesn't get re-
+  // interpreted as formatting by downstream consumers.
+  static markdown: BaseDefComponent = class Markdown extends Component<
+    typeof TextFileDef
+  > {
+    get text() {
+      let content = this.args.model?.content;
+      if (!content) {
+        return '';
+      }
+      return fencedCodeBlock(content);
+    }
+    <template>{{this.text}}</template>
+  };
+
   static async extractAttributes(
     url: string,
     getStream: () => Promise<ByteStream>,
diff --git a/packages/base/ts-file-def.gts b/packages/base/ts-file-def.gts
index 7dab14a1183..9a2fc1f1652 100644
--- a/packages/base/ts-file-def.gts
+++ b/packages/base/ts-file-def.gts
@@ -14,6 +14,7 @@ import {
   type ByteStream,
   type SerializedFile,
 } from './file-api';
+import { fencedCodeBlock } from './markdown-helpers';
 import { highlightTs } from './ts-highlight';
 export { highlightTs } from './ts-highlight';
 
@@ -430,6 +431,10 @@ export class TsFileDef extends FileDef {
   static icon = FileCodeIcon;
   static acceptTypes = '.ts';
   static validExtensions = new Set(['.ts']);
+  // CS-10787: language tag written into fenced code blocks in the markdown
+  // representation. Subclasses (e.g. GtsFileDef) override this to identify
+  // themselves to markdown renderers.
+  static markdownLanguage = 'ts';
 
   @field title = contains(StringField);
   @field excerpt = contains(StringField);
@@ -441,6 +446,24 @@ export class TsFileDef extends FileDef {
   static atom: BaseDefComponent = Atom;
   static head: BaseDefComponent = Head;
 
+  // CS-10787: emit the source as a fenced code block labeled with the
+  // subclass's `markdownLanguage` (overridden by GtsFileDef). Empty content
+  // produces an empty string.
+  static markdown: BaseDefComponent = class Markdown extends Component<
+    typeof TsFileDef
+  > {
+    get text() {
+      let content = this.args.model?.content;
+      if (!content) {
+        return '';
+      }
+      let ctor = this.args.model?.constructor as typeof TsFileDef | undefined;
+      let lang = ctor?.markdownLanguage ?? TsFileDef.markdownLanguage;
+      return fencedCodeBlock(content, lang);
+    }
+    <template>{{this.text}}</template>
+  };
+
   static async extractAttributes(
     this: typeof TsFileDef,
     url: string,
diff --git a/packages/base/typography.gts b/packages/base/typography.gts
index 91133226399..c8d517caf2f 100644
--- a/packages/base/typography.gts
+++ b/packages/base/typography.gts
@@ -1,4 +1,5 @@
 import {
+  markdownEscape,
   sanitizeHtmlSafe,
   type CssVariableEntry,
 } from '@cardstack/boxel-ui/helpers';
@@ -115,4 +116,32 @@ export default class TypographyField extends FieldDef {
   }
 
   static embedded = TypographyEmbedded;
+
+  // CS-10787: render the typography settings as a compact bulleted list of
+  // non-empty properties, each value wrapped in inline code for clarity.
+  static markdown = class Markdown extends Component<typeof TypographyField> {
+    get text() {
+      let model = this.args.model;
+      if (!model) {
+        return '';
+      }
+      let rows: string[] = [];
+      let labels: { key: keyof typeof model; label: string }[] = [
+        { key: 'fontFamily', label: 'Font family' },
+        { key: 'fontSize', label: 'Font size' },
+        { key: 'fontWeight', label: 'Font weight' },
+        { key: 'lineHeight', label: 'Line height' },
+      ];
+      for (let { key, label } of labels) {
+        let value = model[key] as string | undefined;
+        if (!value) continue;
+        rows.push(`- ${markdownEscape(label)}: \`${value}\``);
+      }
+      if (model.sampleText) {
+        rows.push(`- Sample text: ${markdownEscape(model.sampleText)}`);
+      }
+      return rows.join('\n');
+    }
+    <template>{{this.text}}</template>
+  };
 }
diff --git a/packages/base/url.gts b/packages/base/url.gts
index e1805082795..a3b90d97c7a 100644
--- a/packages/base/url.gts
+++ b/packages/base/url.gts
@@ -1,8 +1,9 @@
 import { StringField, Component, field, CardDef, contains } from './card-api';
 import { BoxelInput } from '@cardstack/boxel-ui/components';
-import { not } from '@cardstack/boxel-ui/helpers';
+import { markdownEscape, not } from '@cardstack/boxel-ui/helpers';
 
 import ExternalLink from '@cardstack/boxel-icons/external-link';
+import { markdownLink } from './markdown-helpers';
 
 export default class UrlField extends StringField {
   static icon = ExternalLink;
@@ -46,6 +47,22 @@ export default class UrlField extends StringField {
       </style>
     </template>
   };
+
+  // CS-10786: emit a markdown link when the URL parses; otherwise fall back
+  // to an escaped plain string so invalid values still render safely.
+  static markdown = class Markdown extends Component<typeof UrlField> {
+    get text() {
+      let value = this.args.model;
+      if (value == null || value === '') {
+        return '';
+      }
+      if (isValidUrl(value)) {
+        return markdownLink(value, value);
+      }
+      return markdownEscape(value);
+    }
+    <template>{{this.text}}</template>
+  };
 }
 
 function isValidUrl(urlString: string): boolean {
diff --git a/packages/base/website.gts b/packages/base/website.gts
index e0f35afd0f6..59d63092aeb 100644
--- a/packages/base/website.gts
+++ b/packages/base/website.gts
@@ -2,6 +2,8 @@ import WorldWwwIcon from '@cardstack/boxel-icons/world-www';
 import UrlField from './url';
 import { Component } from './card-api';
 import { EntityDisplayWithIcon } from '@cardstack/boxel-ui/components';
+import { markdownEscape } from '@cardstack/boxel-ui/helpers';
+import { markdownLink } from './markdown-helpers';
 
 const domainWithPath = (urlString: string | null) => {
   if (!urlString) {
@@ -64,6 +66,23 @@ export default class WebsiteField extends UrlField {
       </style>
     </template>
   };
+
+  // CS-10786: show `[domain/path](full-url)` for valid URLs — the atom/
+  // embedded templates hide the scheme for readability, and we preserve that
+  // choice for markdown output too. Invalid URLs fall back to escaped text.
+  static markdown = class Markdown extends Component<typeof WebsiteField> {
+    get text() {
+      let value = this.args.model;
+      if (value == null || value === '') {
+        return '';
+      }
+      if (isValidUrl(value)) {
+        return markdownLink(domainWithPath(value), value);
+      }
+      return markdownEscape(value);
+    }
+    <template>{{this.text}}</template>
+  };
 }
 
 function isValidUrl(urlString: string): boolean {
diff --git a/packages/boxel-cli/tests/helpers/integration.ts b/packages/boxel-cli/tests/helpers/integration.ts
index 3c7d2426707..afbe4e2fb97 100644
--- a/packages/boxel-cli/tests/helpers/integration.ts
+++ b/packages/boxel-cli/tests/helpers/integration.ts
@@ -38,6 +38,7 @@ const noopPrerenderer: Prerenderer = {
     embeddedHTML: null,
     fittedHTML: null,
     iconHTML: null,
+    markdown: null,
     error: {
       type: 'instance-error' as const,
       error: {
diff --git a/packages/boxel-ui/addon/src/helpers.ts b/packages/boxel-ui/addon/src/helpers.ts
index 3040d8b3c6a..aede220ee49 100644
--- a/packages/boxel-ui/addon/src/helpers.ts
+++ b/packages/boxel-ui/addon/src/helpers.ts
@@ -24,6 +24,7 @@ import formatOrdinal from './helpers/format-ordinal.ts';
 import formatPeriod from './helpers/format-period.ts';
 import formatRelativeTime from './helpers/format-relative-time.ts';
 import { generateCssVariables } from './helpers/generate-css-variables.ts';
+import { markdownEscape } from './helpers/markdown-escape.ts';
 import { add, divide, multiply, subtract } from './helpers/math-helpers.ts';
 import menuDivider, { MenuDivider } from './helpers/menu-divider.ts';
 import menuItem, {
@@ -101,6 +102,7 @@ export {
   gte,
   lt,
   lte,
+  markdownEscape,
   MenuDivider,
   menuDivider,
   MenuItem,
diff --git a/packages/boxel-ui/addon/src/helpers/markdown-escape.ts b/packages/boxel-ui/addon/src/helpers/markdown-escape.ts
new file mode 100644
index 00000000000..dfe173fb2b9
--- /dev/null
+++ b/packages/boxel-ui/addon/src/helpers/markdown-escape.ts
@@ -0,0 +1,36 @@
+// Escape CommonMark + GFM metacharacters so user-supplied content can be
+// safely interpolated into a markdown template (`static markdown`) without
+// accidentally triggering formatting. The returned plain string is HTML-
+// escaped by Glimmer in the DOM, then the prerender textContent-extraction
+// step (see CS-10782) decodes those entities so the markdown parser sees
+// the backslash escapes and renders the input as literal text.
+
+// Characters that are always escaped. Includes:
+//   \  `  *  _       — emphasis / inline code
+//   [ ] ( )           — links / images
+//   < >               — HTML / autolink / blockquote (line-start case handled
+//                        incidentally by unconditional escape)
+//   |                 — GFM table separator
+//   ~                 — GFM strikethrough
+//   !                 — image marker (before `[`)
+//   #                 — ATX headings (line-start, but safe to escape anywhere)
+//   + -               — unordered list markers (line-start, but safe to
+//                        escape anywhere; `\+` and `\-` render as `+`/`-`)
+const ESCAPE_CHARS = /[\\`*_[\]()<>|~!#+-]/g;
+
+// Numeric list prefixes like `1.` or `42.` at the start of a (possibly
+// indented) line. `)` is already covered by ESCAPE_CHARS, so `1)` becomes
+// `1\)` via the always-escape pass.
+const NUMERIC_LIST_PREFIX = /^(\s*\d+)\./gm;
+
+export function markdownEscape(input: unknown): string {
+  if (input == null) {
+    return '';
+  }
+  let str = typeof input === 'string' ? input : String(input);
+  let escaped = str.replace(ESCAPE_CHARS, (c) => `\\${c}`);
+  escaped = escaped.replace(NUMERIC_LIST_PREFIX, '$1\\.');
+  return escaped;
+}
+
+export default markdownEscape;
diff --git a/packages/boxel-ui/test-app/tests/unit/markdown-escape-test.ts b/packages/boxel-ui/test-app/tests/unit/markdown-escape-test.ts
new file mode 100644
index 00000000000..3fe696f7878
--- /dev/null
+++ b/packages/boxel-ui/test-app/tests/unit/markdown-escape-test.ts
@@ -0,0 +1,150 @@
+import { module, test } from 'qunit';
+
+import { markdownEscape } from '@cardstack/boxel-ui/helpers';
+
+// markdownEscape emits CommonMark backslash escapes. Per the CommonMark spec
+// (https://spec.commonmark.org/0.30/#backslash-escapes), any ASCII punctuation
+// character that is backslash-escaped renders as the literal character. These
+// unit tests verify that the helper emits the correct `\X` sequence for each
+// metacharacter the spec treats as escapable — which is equivalent to a
+// round-trip guarantee that the escaped output, parsed as markdown, yields
+// the literal input text.
+
+module('Unit | markdown-escape', function () {
+  test('escapes asterisks (emphasis / bold / list)', function (assert) {
+    assert.strictEqual(markdownEscape('*bold*'), '\\*bold\\*');
+    assert.strictEqual(markdownEscape('**strong**'), '\\*\\*strong\\*\\*');
+  });
+
+  test('escapes underscores (emphasis / bold)', function (assert) {
+    assert.strictEqual(markdownEscape('_em_'), '\\_em\\_');
+    assert.strictEqual(markdownEscape('__strong__'), '\\_\\_strong\\_\\_');
+  });
+
+  test('escapes backticks (inline code / fences)', function (assert) {
+    assert.strictEqual(markdownEscape('`code`'), '\\`code\\`');
+    assert.strictEqual(markdownEscape('```'), '\\`\\`\\`');
+  });
+
+  test('escapes `#` (ATX headings)', function (assert) {
+    assert.strictEqual(markdownEscape('# Heading'), '\\# Heading');
+    assert.strictEqual(markdownEscape('## Sub'), '\\#\\# Sub');
+    // `#` inside text is also escaped — `\#` renders as `#` literal, which
+    // is harmless and avoids false-positive headings when a line happens to
+    // begin with `#` after trimming.
+    assert.strictEqual(markdownEscape('room #4'), 'room \\#4');
+  });
+
+  test('escapes `-` (unordered list / setext h2 / thematic break)', function (assert) {
+    assert.strictEqual(markdownEscape('- item'), '\\- item');
+    assert.strictEqual(markdownEscape('---'), '\\-\\-\\-');
+    // Mid-text hyphens are also escaped; `\-` renders as `-`.
+    assert.strictEqual(markdownEscape('sign-in'), 'sign\\-in');
+  });
+
+  test('escapes `+` (unordered list marker)', function (assert) {
+    assert.strictEqual(markdownEscape('+ item'), '\\+ item');
+    assert.strictEqual(markdownEscape('a + b'), 'a \\+ b');
+  });
+
+  test('escapes `>` (blockquote / HTML bracket)', function (assert) {
+    assert.strictEqual(markdownEscape('> quote'), '\\> quote');
+    assert.strictEqual(markdownEscape('a > b'), 'a \\> b');
+  });
+
+  test('escapes `[` and `]` (link / image text)', function (assert) {
+    assert.strictEqual(markdownEscape('[link](url)'), '\\[link\\]\\(url\\)');
+  });
+
+  test('escapes `(` and `)` (link / image URL)', function (assert) {
+    assert.strictEqual(markdownEscape('(paren)'), '\\(paren\\)');
+  });
+
+  test('escapes `!` (image marker)', function (assert) {
+    assert.strictEqual(markdownEscape('![alt](src)'), '\\!\\[alt\\]\\(src\\)');
+    assert.strictEqual(markdownEscape('Wow!'), 'Wow\\!');
+  });
+
+  test('escapes `|` (GFM table separator)', function (assert) {
+    assert.strictEqual(markdownEscape('a | b'), 'a \\| b');
+    assert.strictEqual(markdownEscape('| h |'), '\\| h \\|');
+  });
+
+  test('escapes `\\` (backslash)', function (assert) {
+    assert.strictEqual(markdownEscape('\\'), '\\\\');
+    assert.strictEqual(markdownEscape('a\\b'), 'a\\\\b');
+    // A literal `\*` in the source should become `\\\*` so the parser sees
+    // an escaped backslash followed by an escaped asterisk — preserving the
+    // original two characters as literals.
+    assert.strictEqual(markdownEscape('\\*'), '\\\\\\*');
+  });
+
+  test('escapes `<` and `>` (HTML / autolink brackets)', function (assert) {
+    assert.strictEqual(
+      markdownEscape('<script>alert(1)</script>'),
+      '\\<script\\>alert\\(1\\)\\</script\\>',
+    );
+    assert.strictEqual(
+      markdownEscape('<https://example.com>'),
+      '\\<https://example.com\\>',
+    );
+  });
+
+  test('escapes numeric list prefixes at line start (e.g. `1.`)', function (assert) {
+    assert.strictEqual(markdownEscape('1. first'), '1\\. first');
+    assert.strictEqual(markdownEscape('42. answer'), '42\\. answer');
+    // Multi-line: each line-start numeric prefix gets escaped.
+    assert.strictEqual(markdownEscape('1. one\n2. two'), '1\\. one\n2\\. two');
+    // Indented list is also escaped (leading whitespace preserved).
+    assert.strictEqual(markdownEscape('  3. indented'), '  3\\. indented');
+    // Periods mid-sentence are NOT escaped — they are only meaningful as list
+    // markers when at line start after digits.
+    assert.strictEqual(markdownEscape('v1.2.3'), 'v1.2.3');
+    assert.strictEqual(markdownEscape('End of sentence.'), 'End of sentence.');
+  });
+
+  test('escapes numeric list prefixes with `)` via always-escape', function (assert) {
+    // `)` is always escaped, so `1)` at any position becomes `1\)`.
+    assert.strictEqual(markdownEscape('1) first'), '1\\) first');
+  });
+
+  test('escapes `~` (GFM strikethrough)', function (assert) {
+    assert.strictEqual(markdownEscape('~~del~~'), '\\~\\~del\\~\\~');
+  });
+
+  test('handles null input by returning empty string', function (assert) {
+    assert.strictEqual(markdownEscape(null), '');
+  });
+
+  test('handles undefined input by returning empty string', function (assert) {
+    assert.strictEqual(markdownEscape(undefined), '');
+  });
+
+  test('coerces non-string inputs via String()', function (assert) {
+    assert.strictEqual(markdownEscape(42), '42');
+    assert.strictEqual(markdownEscape(true), 'true');
+    assert.strictEqual(markdownEscape(false), 'false');
+    // Numbers containing a `.` are coerced to string but the `.` is only
+    // escaped at line start after digits — which applies here.
+    assert.strictEqual(markdownEscape(1.5), '1\\.5');
+  });
+
+  test('returns empty string for empty string input', function (assert) {
+    assert.strictEqual(markdownEscape(''), '');
+  });
+
+  test('leaves safe characters untouched', function (assert) {
+    assert.strictEqual(
+      markdownEscape('Hello world, how are you today?'),
+      'Hello world, how are you today?',
+    );
+  });
+
+  test('handles combined metacharacters without double-escaping', function (assert) {
+    // Input with many metacharacters — verify each is escaped exactly once.
+    let input = '# Title *bold* _em_ `code` [link](url) | ~strike~';
+    let expected =
+      '\\# Title \\*bold\\* \\_em\\_ \\`code\\` \\[link\\]\\(url\\) \\| \\~strike\\~';
+    assert.strictEqual(markdownEscape(input), expected);
+  });
+});
diff --git a/packages/experiments-realm/BlogPost/mad-as-a-hatter.json b/packages/experiments-realm/BlogPost/mad-as-a-hatter.json
index e354f8ef2ce..1dc5e60b2f4 100644
--- a/packages/experiments-realm/BlogPost/mad-as-a-hatter.json
+++ b/packages/experiments-realm/BlogPost/mad-as-a-hatter.json
@@ -1,26 +1,44 @@
 {
   "data": {
+    "meta": {
+      "adoptsFrom": {
+        "name": "BlogPost",
+        "module": "../blog-post"
+      }
+    },
     "type": "card",
     "attributes": {
-      "headline": "Mad As a Hatter",
-      "slug": "mad-as-a-hatter",
       "body": "## Where it all begins\n\nThis is a story of a man named [Brady](https://eightiesforbrady.com), who was bringing up three very lovely girls under the rule of the Queen of Hearts.",
+      "slug": "mad-as-a-hatter",
+      "cardInfo": {
+        "name": null,
+        "notes": null,
+        "summary": null,
+        "cardThumbnailURL": "https://images.unsplash.com/photo-1551422788-18e2a1f5bb88?q=80&w=3087&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      },
+      "headline": "Mad As a Hatter",
       "publishDate": "2034-11-20T18:00:00.000Z",
       "featuredImage": {
-        "imageUrl": "https://images.unsplash.com/photo-1551422788-18e2a1f5bb88?q=80&w=3087&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-        "credit": null,
-        "caption": "We're all mad here.",
-        "altText": "",
         "size": "contain",
+        "width": null,
+        "credit": null,
         "height": 400,
-        "width": null
-      },
-      "cardInfo": {
-        "summary": null,
-        "cardThumbnailURL": "https://images.unsplash.com/photo-1551422788-18e2a1f5bb88?q=80&w=3087&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        "altText": "",
+        "caption": "We're all mad here.",
+        "imageUrl": "https://images.unsplash.com/photo-1551422788-18e2a1f5bb88?q=80&w=3087&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
       }
     },
     "relationships": {
+      "blog": {
+        "links": {
+          "self": null
+        }
+      },
+      "editors": {
+        "links": {
+          "self": null
+        }
+      },
       "authors.0": {
         "links": {
           "self": "../Author/alice-enwunder"
@@ -36,22 +54,21 @@
           "self": "../Author/0b9c06fd-3833-4947-a0b8-ac24b8e71ee7"
         }
       },
-      "blog": {
+      "categories": {
         "links": {
           "self": null
         }
       },
-      "editors": {
+      "cardInfo.theme": {
+        "links": {
+          "self": null
+        }
+      },
+      "cardInfo.cardThumbnail": {
         "links": {
           "self": null
         }
-      }
-    },
-    "meta": {
-      "adoptsFrom": {
-        "module": "../blog-post",
-        "name": "BlogPost"
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/experiments-realm/Spec/fields/rating-field.json b/packages/experiments-realm/Spec/fields/rating-field.json
index e21b3b3d986..2374d7bb22d 100644
--- a/packages/experiments-realm/Spec/fields/rating-field.json
+++ b/packages/experiments-realm/Spec/fields/rating-field.json
@@ -1,19 +1,56 @@
 {
   "data": {
+    "meta": {
+      "fields": {
+        "containedExamples": [
+          {
+            "adoptsFrom": {
+              "module": "../../ratings-summary",
+              "name": "RatingsSummary"
+            }
+          }
+        ]
+      },
+      "adoptsFrom": {
+        "name": "Spec",
+        "module": "https://cardstack.com/base/spec"
+      }
+    },
     "type": "card",
     "attributes": {
-      "cardTitle": "Rating Summary Field",
-      "specType": "field",
       "ref": {
-        "module": "../../ratings-summary",
-        "name": "RatingsSummary"
-      }
+        "name": "RatingsSummary",
+        "module": "../../ratings-summary"
+      },
+      "readMe": null,
+      "cardInfo": {
+        "name": null,
+        "notes": null,
+        "summary": null,
+        "cardThumbnailURL": null
+      },
+      "specType": "field",
+      "cardTitle": "Rating Summary Field",
+      "cardDescription": null,
+      "containedExamples": [
+        {
+          "average": 4.4,
+          "count": 57,
+          "isEditable": false
+        }
+      ]
     },
-    "meta": {
-      "adoptsFrom": {
-        "module": "https://cardstack.com/base/spec",
-        "name": "Spec"
+    "relationships": {
+      "cardInfo.theme": {
+        "links": {
+          "self": null
+        }
+      },
+      "cardInfo.cardThumbnail": {
+        "links": {
+          "self": null
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/experiments-realm/blog-post.gts b/packages/experiments-realm/blog-post.gts
index 5cc9a2ff8bb..c23d034ccfa 100644
--- a/packages/experiments-realm/blog-post.gts
+++ b/packages/experiments-realm/blog-post.gts
@@ -23,6 +23,13 @@ import { formatDatetime, BlogApp as BlogAppCard } from './blog-app';
 import { BlogCategory, categoryStyle } from './blog-category';
 import { User } from './user';
 import { markdownToHtml } from '@cardstack/runtime-common/marked-sync';
+import {
+  markdownLinkForCard,
+  markdownLinksForCards,
+  markdownEmbedsForCards,
+  markdownImage,
+  formatDateTimeForMarkdown,
+} from 'https://cardstack.com/base/markdown-helpers';
 
 class EmbeddedTemplate extends Component<typeof BlogPost> {
   <template>
@@ -707,6 +714,59 @@ export class BlogPost extends CardDef {
 
   static embedded = EmbeddedTemplate;
   static fitted = FittedTemplate;
+
+  static markdown = class Markdown extends Component<typeof this> {
+    get header(): string {
+      let parts: string[] = [];
+      parts.push(`# ${this.args.model.cardTitle ?? 'Untitled'}`);
+      if (this.args.model.cardDescription) {
+        parts.push(`*${this.args.model.cardDescription}*`);
+      }
+      let authors = markdownLinksForCards(this.args.model.authors, {
+        style: 'inline',
+      });
+      let publishDate = formatDateTimeForMarkdown(
+        this.args.model.publishDate ?? undefined,
+      );
+      let byline: string[] = [];
+      if (authors) byline.push(`By ${authors}`);
+      if (publishDate) byline.push(publishDate);
+      if (byline.length) parts.push(byline.join(' | '));
+      let categories = markdownLinksForCards(this.args.model.categories, {
+        style: 'inline',
+      });
+      if (categories) parts.push(`Categories: ${categories}`);
+      let blog = markdownLinkForCard(this.args.model.blog);
+      if (blog) parts.push(`Blog: ${blog}`);
+      let image = this.args.model.featuredImage?.imageUrl;
+      if (image) {
+        parts.push(
+          markdownImage(this.args.model.cardTitle ?? 'Featured image', image),
+        );
+      }
+      return parts.join('\n\n');
+    }
+    get footer(): string {
+      let parts: string[] = [];
+      let editors = markdownLinksForCards(this.args.model.editors, {
+        style: 'inline',
+      });
+      if (editors) parts.push(`*Edited by ${editors}*`);
+      let authorEmbeds = markdownEmbedsForCards(this.args.model.authors, {
+        size: 'strip',
+      });
+      if (authorEmbeds) {
+        parts.push(`---\n\n## About the Authors\n\n${authorEmbeds}`);
+      }
+      return parts.join('\n\n');
+    }
+    <template>{{this.header}}
+
+{{@model.body}}
+
+{{this.footer}}</template>
+  };
+
   static isolated = class Isolated extends Component<typeof this> {
     <template>
       <article>
diff --git a/packages/experiments-realm/ratings-summary.gts b/packages/experiments-realm/ratings-summary.gts
index 27cae9be6f9..ef272be10d5 100644
--- a/packages/experiments-realm/ratings-summary.gts
+++ b/packages/experiments-realm/ratings-summary.gts
@@ -201,6 +201,25 @@ export class RatingsSummary extends FieldDef {
     </template>
   };
 
+  static markdown = class Markdown extends Component<typeof this> {
+    get stars(): string {
+      let rating = this.args.model.average ?? 0;
+      let full = Math.floor(rating);
+      let half = rating % 1 >= 0.5 ? 1 : 0;
+      let empty = 5 - full - half;
+      return '★'.repeat(full) + (half ? '⯨' : '') + '☆'.repeat(empty);
+    }
+    get label(): string {
+      let rating = this.args.model.average;
+      if (!rating) return '☆☆☆☆☆ No rating';
+      let count = this.args.model.count;
+      let out = `${this.stars} ${rating}/5`;
+      if (count) out += ` (${count} reviews)`;
+      return out;
+    }
+    <template>{{this.label}}</template>
+  };
+
   static atom = class Atom extends Component<typeof this> {
     <template>
       {{#if @model.average}}
diff --git a/packages/host/app/commands/copy-card-as-markdown.ts b/packages/host/app/commands/copy-card-as-markdown.ts
new file mode 100644
index 00000000000..6e535cddce6
--- /dev/null
+++ b/packages/host/app/commands/copy-card-as-markdown.ts
@@ -0,0 +1,41 @@
+import { service } from '@ember/service';
+
+import { isTesting } from '@embroider/macros';
+
+import { SupportedMimeType } from '@cardstack/runtime-common';
+
+import type * as BaseCommandModule from 'https://cardstack.com/base/command';
+
+import HostBaseCommand from '../lib/host-base-command';
+
+import type NetworkService from '../services/network';
+
+export default class CopyCardAsMarkdownCommand extends HostBaseCommand<
+  typeof BaseCommandModule.CardIdCard,
+  undefined
+> {
+  @service declare private network: NetworkService;
+
+  description = 'Copy a card as markdown to the clipboard';
+  static actionVerb = 'Copy';
+
+  async getInputType() {
+    let commandModule = await this.loadCommandModule();
+    return commandModule.CardIdCard;
+  }
+
+  requireInputFields = ['cardId'];
+
+  protected async run(input: BaseCommandModule.CardIdCard): Promise<undefined> {
+    let response = await this.network.authedFetch(input.cardId, {
+      headers: { Accept: SupportedMimeType.Markdown },
+    });
+    if (response.ok) {
+      let markdown = await response.text();
+      if (!isTesting()) {
+        await navigator.clipboard.writeText(markdown);
+      }
+    }
+    return undefined;
+  }
+}
diff --git a/packages/host/app/commands/index.ts b/packages/host/app/commands/index.ts
index ebe33dd1597..69712b8863d 100644
--- a/packages/host/app/commands/index.ts
+++ b/packages/host/app/commands/index.ts
@@ -11,6 +11,7 @@ import * as CancelIndexingJobCommandModule from './cancel-indexing-job';
 import * as CheckCorrectnessCommandModule from './check-correctness';
 import * as CopyAndEditCommandModule from './copy-and-edit';
 import * as CopyCardToRealmModule from './copy-card';
+import * as CopyCardAsMarkdownCommandModule from './copy-card-as-markdown';
 import * as CopyCardToStackCommandModule from './copy-card-to-stack';
 import * as CopyFileToRealmCommandModule from './copy-file-to-realm';
 import * as CopySourceCommandModule from './copy-source';
@@ -96,6 +97,10 @@ export function shimHostCommands(virtualNetwork: VirtualNetwork) {
     '@cardstack/boxel-host/commands/apply-search-replace-block',
     ApplySearchReplaceBlockCommandModule,
   );
+  virtualNetwork.shimModule(
+    '@cardstack/boxel-host/commands/copy-card-as-markdown',
+    CopyCardAsMarkdownCommandModule,
+  );
   virtualNetwork.shimModule(
     '@cardstack/boxel-host/commands/copy-card',
     CopyCardToRealmModule,
@@ -396,6 +401,7 @@ export const HostCommandClasses: (typeof HostBaseCommand<any, any>)[] = [
   ApplySearchReplaceBlockCommandModule.default,
   ApplyMarkdownEditCommandModule.default,
   AskAiCommandModule.default,
+  CopyCardAsMarkdownCommandModule.default,
   CopyCardToRealmModule.default,
   CopyCardToStackCommandModule.default,
   CopyFileToRealmCommandModule.default,
diff --git a/packages/host/app/components/card-prerender.gts b/packages/host/app/components/card-prerender.gts
index 7bb3cf1b109..cb146a66642 100644
--- a/packages/host/app/components/card-prerender.gts
+++ b/packages/host/app/components/card-prerender.gts
@@ -290,6 +290,7 @@ export default class CardPrerender extends Component {
         let iconHTML = null;
         let embeddedHTML: Record<string, string> | null = null;
         let fittedHTML: Record<string, string> | null = null;
+        let markdown: string | null = null;
         try {
           let subsequentRenderOptions =
             omitOneTimeOptions(initialRenderOptions);
@@ -316,6 +317,12 @@ export default class CardPrerender extends Component {
             url,
             subsequentRenderOptions,
           );
+          markdown = await this.renderHTML.perform(
+            url,
+            'markdown',
+            0,
+            subsequentRenderOptions,
+          );
           if (meta?.types) {
             embeddedHTML = await this.renderAncestors.perform(
               url,
@@ -358,6 +365,7 @@ export default class CardPrerender extends Component {
           embeddedHTML,
           fittedHTML,
           iconHTML,
+          markdown,
           ...(error ? { error } : {}),
         };
       } finally {
@@ -476,6 +484,7 @@ export default class CardPrerender extends Component {
       let iconHTML: string | null = null;
       let embeddedHTML: Record<string, string> | null = null;
       let fittedHTML: Record<string, string> | null = null;
+      let markdown: string | null = null;
 
       try {
         let subsequentRenderOptions = omitOneTimeOptions(initialRenderOptions);
@@ -498,6 +507,12 @@ export default class CardPrerender extends Component {
           subsequentRenderOptions,
         );
         iconHTML = await this.renderIcon.perform(url, subsequentRenderOptions);
+        markdown = await this.renderHTML.perform(
+          url,
+          'markdown',
+          0,
+          subsequentRenderOptions,
+        );
         if (types?.length) {
           embeddedHTML = await this.renderAncestors.perform(
             url,
@@ -539,6 +554,7 @@ export default class CardPrerender extends Component {
         embeddedHTML,
         fittedHTML,
         iconHTML,
+        markdown,
         ...(error ? { error } : {}),
       };
     },
diff --git a/packages/host/app/components/operator-mode/code-submode/playground/playground-panel.gts b/packages/host/app/components/operator-mode/code-submode/playground/playground-panel.gts
index 23299299b8e..7d49f662c33 100644
--- a/packages/host/app/components/operator-mode/code-submode/playground/playground-panel.gts
+++ b/packages/host/app/components/operator-mode/code-submode/playground/playground-panel.gts
@@ -146,7 +146,13 @@ export default class PlaygroundPanel extends Component<Signature> {
     return moduleId;
   });
 
-  private fieldFormats: Format[] = ['embedded', 'fitted', 'atom', 'edit'];
+  private fieldFormats: Format[] = [
+    'embedded',
+    'fitted',
+    'atom',
+    'edit',
+    'markdown',
+  ];
   private fileDefFormats: Format[] = ['isolated', 'embedded', 'fitted', 'atom'];
   #creationError = false;
   #currentModuleId: string | undefined;
@@ -1149,7 +1155,7 @@ export default class PlaygroundPanel extends Component<Signature> {
         bottom: var(--playground-padding);
         border: 1px solid var(--boxel-450);
         margin: 0 auto;
-        width: 380px;
+        width: 460px;
         max-width: 100%;
         justify-content: space-between;
 
diff --git a/packages/host/app/components/operator-mode/code-submode/playground/playground-preview.gts b/packages/host/app/components/operator-mode/code-submode/playground/playground-preview.gts
index 892a7f676c5..61efcb537ea 100644
--- a/packages/host/app/components/operator-mode/code-submode/playground/playground-preview.gts
+++ b/packages/host/app/components/operator-mode/code-submode/playground/playground-preview.gts
@@ -13,6 +13,7 @@ import {
 
 import CardRenderer from '@cardstack/host/components/card-renderer';
 import FittedFormatGallery from '@cardstack/host/components/operator-mode/preview-panel/fitted-format-gallery';
+import MarkdownPreview from '@cardstack/host/components/operator-mode/preview-panel/markdown-preview';
 import type { EnhancedRealmInfo } from '@cardstack/host/services/realm';
 
 import type {
@@ -84,6 +85,10 @@ const PlaygroundPreview: TemplateOnlyComponent<Signature> = <template>
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
       veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
       commodo consequat.</div>
+  {{else if (eq @format 'markdown')}}
+    <CardContainer>
+      <MarkdownPreview @card={{@card}} />
+    </CardContainer>
   {{else if (eq @format 'fitted')}}
     <FittedFormatGallery
       @card={{@card}}
diff --git a/packages/host/app/components/operator-mode/overlays.gts b/packages/host/app/components/operator-mode/overlays.gts
index ea193339691..259e8f2841d 100644
--- a/packages/host/app/components/operator-mode/overlays.gts
+++ b/packages/host/app/components/operator-mode/overlays.gts
@@ -97,6 +97,7 @@ export default class Overlays extends Component<OverlaySignature> {
       .base-overlay {
         width: 100%;
         height: 100%;
+        pointer-events: none;
       }
     </style>
   </template>
diff --git a/packages/host/app/components/operator-mode/preview-panel/index.gts b/packages/host/app/components/operator-mode/preview-panel/index.gts
index b6db2446a30..27bca952b18 100644
--- a/packages/host/app/components/operator-mode/preview-panel/index.gts
+++ b/packages/host/app/components/operator-mode/preview-panel/index.gts
@@ -52,6 +52,7 @@ import type {
 import FormatChooser from '../code-submode/format-chooser';
 
 import FittedFormatGallery from './fitted-format-gallery';
+import MarkdownPreview from './markdown-preview';
 import MetadataPanel from './metadata-panel';
 
 interface Signature {
@@ -254,6 +255,14 @@ export default class PreviewPanel extends Component<Signature> {
             <MetadataPanel @card={{@card}} />
           {{else if (eq this.format 'fitted')}}
             <FittedFormatGallery @card={{@card}} />
+          {{else if (eq this.format 'markdown')}}
+            {{#if this.renderedCardsForOverlayActions}}
+              <Overlays
+                @renderedCardsForOverlayActions={{this.renderedCardsForOverlayActions}}
+                @viewCard={{@viewCard}}
+              />
+            {{/if}}
+            <MarkdownPreview @card={{@card}} />
           {{else}}
             {{#if this.renderedCardsForOverlayActions}}
               <Overlays
diff --git a/packages/host/app/components/operator-mode/preview-panel/markdown-preview.gts b/packages/host/app/components/operator-mode/preview-panel/markdown-preview.gts
new file mode 100644
index 00000000000..3e7f992aefb
--- /dev/null
+++ b/packages/host/app/components/operator-mode/preview-panel/markdown-preview.gts
@@ -0,0 +1,175 @@
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { scheduleOnce } from '@ember/runloop';
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import { modifier } from 'ember-modifier';
+
+import { Button } from '@cardstack/boxel-ui/components';
+import { cn, eq } from '@cardstack/boxel-ui/helpers';
+
+import CardRenderer from '@cardstack/host/components/card-renderer';
+
+import type { BaseDef } from 'https://cardstack.com/base/card-api';
+
+import RenderedMarkdown from './rendered-markdown';
+
+type ViewMode = 'source' | 'rendered';
+
+interface Signature {
+  Args: {
+    card: BaseDef;
+  };
+}
+
+export default class MarkdownPreview extends Component<Signature> {
+  @tracked viewMode: ViewMode = 'source';
+  @tracked capturedMarkdown = '';
+
+  private captureMarkdownText = modifier((element: HTMLElement) => {
+    let capture = () => {
+      if (!element.isConnected) {
+        return;
+      }
+      let output = element.querySelector('[data-markdown-output]');
+      let text = (output ?? element).textContent?.trim() ?? '';
+      if (text !== this.capturedMarkdown) {
+        this.capturedMarkdown = text;
+      }
+    };
+
+    scheduleOnce('afterRender', null, capture);
+
+    if (typeof MutationObserver === 'undefined') {
+      return;
+    }
+
+    let observer = new MutationObserver(() =>
+      scheduleOnce('afterRender', null, capture),
+    );
+    observer.observe(element, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+    return () => observer.disconnect();
+  });
+
+  private get cardReferenceBaseUrl(): string | undefined {
+    return 'id' in this.args.card
+      ? ((this.args.card?.id as string | undefined) ?? undefined)
+      : undefined;
+  }
+
+  private setViewMode = (mode: ViewMode) => {
+    this.viewMode = mode;
+  };
+
+  <template>
+    <div class='markdown-preview' data-test-markdown-preview>
+      <div class='view-toggle' data-test-markdown-view-toggle>
+        <Button
+          class={{cn 'toggle-btn' active=(eq this.viewMode 'source')}}
+          {{on 'click' (fn this.setViewMode 'source')}}
+          aria-pressed={{if (eq this.viewMode 'source') 'true' 'false'}}
+          data-test-markdown-view='source'
+        >
+          Source
+        </Button>
+        <Button
+          class={{cn 'toggle-btn' active=(eq this.viewMode 'rendered')}}
+          {{on 'click' (fn this.setViewMode 'rendered')}}
+          aria-pressed={{if (eq this.viewMode 'rendered') 'true' 'false'}}
+          data-test-markdown-view='rendered'
+        >
+          Rendered
+        </Button>
+      </div>
+
+      {{! Hidden CardRenderer captures the raw markdown text via modifier }}
+      <div
+        class='capture-container'
+        {{this.captureMarkdownText}}
+        aria-hidden='true'
+      >
+        <CardRenderer @card={{@card}} @format='markdown' />
+      </div>
+
+      {{#if (eq this.viewMode 'source')}}
+        <pre
+          class='markdown-source'
+          data-test-markdown-source
+        >{{this.capturedMarkdown}}</pre>
+      {{else}}
+        <div class='markdown-rendered' data-test-markdown-rendered>
+          <RenderedMarkdown
+            @content={{this.capturedMarkdown}}
+            @cardReferenceBaseUrl={{this.cardReferenceBaseUrl}}
+          />
+        </div>
+      {{/if}}
+    </div>
+
+    <style scoped>
+      .markdown-preview {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      .view-toggle {
+        display: flex;
+        gap: var(--boxel-sp-4xs);
+        padding: var(--boxel-sp-xs);
+        background-color: var(--boxel-100);
+        border-bottom: 1px solid var(--boxel-200);
+      }
+
+      .toggle-btn {
+        --boxel-button-color: transparent;
+        --boxel-button-text-color: var(--boxel-dark);
+        --boxel-button-font: 600 var(--boxel-font-xs);
+        min-height: unset;
+        min-width: unset;
+        padding: var(--boxel-sp-5xs) var(--boxel-sp-xs);
+        border-color: var(--boxel-200);
+        border-radius: var(--boxel-border-radius);
+      }
+
+      .toggle-btn.active {
+        --boxel-button-color: var(--boxel-dark);
+        --boxel-button-text-color: var(--boxel-light);
+      }
+
+      .capture-container {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip: rect(0 0 0 0);
+        clip-path: inset(50%);
+      }
+
+      .markdown-source {
+        flex: 1;
+        overflow-y: auto;
+        margin: 0;
+        padding: var(--boxel-sp);
+        font-family: var(--boxel-monospace-font-family);
+        font-size: var(--boxel-font-size-sm);
+        white-space: pre-wrap;
+        word-break: break-word;
+        line-height: 1.5;
+        background: transparent;
+      }
+
+      .markdown-rendered {
+        flex: 1;
+        overflow-y: auto;
+        padding: var(--boxel-sp);
+      }
+    </style>
+  </template>
+}
diff --git a/packages/host/app/components/operator-mode/preview-panel/rendered-markdown.gts b/packages/host/app/components/operator-mode/preview-panel/rendered-markdown.gts
new file mode 100644
index 00000000000..e1df332feb0
--- /dev/null
+++ b/packages/host/app/components/operator-mode/preview-panel/rendered-markdown.gts
@@ -0,0 +1,718 @@
+// Host-side counterpart of the base-realm `MarkdownTemplate` component
+// (`packages/base/default-templates/markdown.gts`).  The base-realm version
+// cannot be imported directly from host code (only type imports are allowed),
+// so this component reuses the same shared utilities (`markdownToHtml`,
+// `extractCardReferenceUrls`, `cardTypeName`) and follows the same rendering
+// pattern: convert markdown → HTML, capture BFM card-reference placeholders
+// via a modifier, then render live cards into those slots with `#in-element`.
+
+import { scheduleOnce } from '@ember/runloop';
+import { service } from '@ember/service';
+import { htmlSafe } from '@ember/template';
+
+import Component from '@glimmer/component';
+import { cached, tracked } from '@glimmer/tracking';
+
+import LinkOffIcon from '@cardstack/boxel-icons/link-off';
+import { task } from 'ember-concurrency';
+import Modifier from 'ember-modifier';
+import { modifier } from 'ember-modifier';
+import { consume } from 'ember-provide-consume-context';
+
+import { Pill } from '@cardstack/boxel-ui/components';
+import { eq } from '@cardstack/boxel-ui/helpers';
+
+import {
+  CardContextName,
+  cardTypeName,
+  extractCardReferenceUrls,
+  isCardErrorJSONAPI,
+  resolveCardReference,
+  trimJsonExtension,
+} from '@cardstack/runtime-common';
+import { markdownToHtml } from '@cardstack/runtime-common/marked-sync';
+
+import CardRenderer from '@cardstack/host/components/card-renderer';
+
+import type StoreService from '@cardstack/host/services/store';
+
+import type { CardContext, CardDef } from 'https://cardstack.com/base/card-api';
+
+type CardSlotFormat = 'atom' | 'embedded' | 'fitted' | 'isolated';
+
+interface ResolvedSlot {
+  element: HTMLElement;
+  card: CardDef;
+  format: CardSlotFormat;
+  kind: 'inline' | 'block';
+  style?: ReturnType<typeof htmlSafe>;
+}
+
+interface UnresolvedSlot {
+  element: HTMLElement;
+  url: string;
+  typeName: string;
+  kind: 'inline' | 'block';
+}
+
+type RenderSlot =
+  | (ResolvedSlot & { card: CardDef })
+  | (UnresolvedSlot & { card?: undefined });
+
+function resolveUrl(raw: string, baseUrl: string | undefined): string {
+  try {
+    return trimJsonExtension(resolveCardReference(raw, baseUrl));
+  } catch {
+    return trimJsonExtension(raw);
+  }
+}
+
+function wrapTablesHtml(html: string): string {
+  if (!html.includes('<table')) return html;
+  if (typeof DOMParser === 'undefined') return html;
+  let doc = new DOMParser().parseFromString(html, 'text/html');
+  doc.querySelectorAll('table:not(.table-wrapper table)').forEach((table) => {
+    if (table.parentElement?.classList.contains('table-wrapper')) return;
+    let wrapper = doc.createElement('div');
+    wrapper.className = 'table-wrapper';
+    table.replaceWith(wrapper);
+    wrapper.appendChild(table);
+  });
+  return doc.body.innerHTML;
+}
+
+interface Signature {
+  Args: {
+    content: string | null | undefined;
+    cardReferenceBaseUrl?: string | null;
+  };
+}
+
+// Fallback when no CardContext is provided (e.g. in tests without operator-mode).
+// Only the subset of fields used by RenderedMarkdown is stubbed; the rest come
+// from the dynamicCardContext injected at runtime.
+const DEFAULT_CARD_CONTEXT: Partial<CardContext> = {
+  cardComponentModifier: class NoOpModifier extends Modifier<any> {
+    modify() {}
+  },
+  commandContext: undefined,
+};
+
+export default class RenderedMarkdown extends Component<Signature> {
+  @service declare private store: StoreService;
+  @consume(CardContextName) declare private dynamicCardContext: CardContext;
+
+  private get cardContext(): CardContext {
+    return {
+      ...DEFAULT_CARD_CONTEXT,
+      ...this.dynamicCardContext,
+    } as CardContext;
+  }
+
+  @tracked renderSlots: RenderSlot[] = [];
+  @tracked private loadedCards = new Map<string, CardDef>();
+  private _modifierHasRun = false;
+
+  // ── HTML rendering ──
+
+  @cached
+  get renderedHtml() {
+    let html = markdownToHtml(this.args.content);
+    html = wrapTablesHtml(html);
+
+    let hasCardRefs = html.includes('data-boxel-bfm-type="card"');
+    if (typeof DOMParser !== 'undefined' && hasCardRefs) {
+      let doc = new DOMParser().parseFromString(html, 'text/html');
+      doc
+        .querySelectorAll('[data-boxel-bfm-type="card"]')
+        .forEach((el) => (el.textContent = ''));
+      html = doc.body.innerHTML;
+    }
+
+    return htmlSafe(html);
+  }
+
+  // ── Card loading ──
+
+  @cached
+  private get cardReferenceUrls(): string[] {
+    if (!this.args.content) return [];
+    return extractCardReferenceUrls(
+      this.args.content,
+      this.args.cardReferenceBaseUrl ?? '',
+    );
+  }
+
+  private loadReferencedCards = task({ restartable: true }, async () => {
+    let urls = this.cardReferenceUrls;
+    if (!urls.length) return;
+
+    let cards = new Map<string, CardDef>();
+    await Promise.all(
+      urls.map(async (url) => {
+        try {
+          let result = await this.store.get(url);
+          if (!isCardErrorJSONAPI(result)) {
+            cards.set(url, result as CardDef);
+          }
+        } catch {
+          // skip cards that can't be loaded
+        }
+      }),
+    );
+    this.loadedCards = cards;
+  });
+
+  // ── Slot capture modifier ──
+
+  captureCardSlots = modifier(
+    (element: HTMLElement, _positional: unknown[]) => {
+      let baseUrl = this.args.cardReferenceBaseUrl ?? undefined;
+      let pendingUpdate = false;
+
+      let showFallback = this._modifierHasRun || this.loadedCards.size > 0;
+      this._modifierHasRun = true;
+
+      // Trigger card loading when content changes
+      this.loadReferencedCards.perform();
+
+      let collectSlots = (): RenderSlot[] => {
+        let cardsByUrl = this.loadedCards;
+        let slots: RenderSlot[] = [];
+        let resolvedEls = new Set<HTMLElement>();
+
+        for (let el of Array.from(
+          element.querySelectorAll<HTMLElement>(
+            '[data-boxel-bfm-inline-ref][data-boxel-bfm-type="card"]',
+          ),
+        )) {
+          let rawUrl = el.dataset.boxelBfmInlineRef;
+          if (!rawUrl) continue;
+          let resolved = resolveUrl(rawUrl, baseUrl);
+          let card = cardsByUrl.get(resolved);
+          if (card) {
+            resolvedEls.add(el);
+            slots.push({ element: el, card, format: 'atom', kind: 'inline' });
+          }
+        }
+
+        for (let el of Array.from(
+          element.querySelectorAll<HTMLElement>(
+            '[data-boxel-bfm-block-ref][data-boxel-bfm-type="card"]',
+          ),
+        )) {
+          let rawUrl = el.dataset.boxelBfmBlockRef;
+          if (!rawUrl) continue;
+          let resolved = resolveUrl(rawUrl, baseUrl);
+          let card = cardsByUrl.get(resolved);
+          if (card) {
+            let bfmFormat = el.dataset.boxelBfmFormat;
+            let format: CardSlotFormat =
+              bfmFormat === 'fitted' || bfmFormat === 'isolated'
+                ? bfmFormat
+                : 'embedded';
+
+            let style: ReturnType<typeof htmlSafe> | undefined;
+            if (format === 'fitted') {
+              let w = el.dataset.boxelBfmWidth;
+              let h = el.dataset.boxelBfmHeight;
+              let parts: string[] = [];
+              if (w && /^\d+%$/.test(w)) {
+                parts.push(`width: ${w}`);
+              } else if (w && /^\d+$/.test(w)) {
+                parts.push(`width: ${w}px`);
+              }
+              if (h && /^\d+$/.test(h)) {
+                parts.push(`height: ${h}px`);
+              }
+              parts.push('overflow: hidden');
+              style = htmlSafe(parts.join('; '));
+            }
+
+            resolvedEls.add(el);
+            slots.push({ element: el, card, format, kind: 'block', style });
+          }
+        }
+
+        if (!showFallback) return slots;
+        for (let el of Array.from(
+          element.querySelectorAll<HTMLElement>('[data-boxel-bfm-type="card"]'),
+        )) {
+          let url =
+            el.dataset.boxelBfmInlineRef || el.dataset.boxelBfmBlockRef || '';
+          if (!resolvedEls.has(el) && url) {
+            let kind: 'inline' | 'block' = el.dataset.boxelBfmInlineRef
+              ? 'inline'
+              : 'block';
+            slots.push({
+              element: el,
+              url,
+              typeName: cardTypeName(url),
+              kind,
+            });
+          }
+        }
+
+        return slots;
+      };
+
+      let updateSlots = () => {
+        pendingUpdate = false;
+        let nextSlots = collectSlots();
+        let didChange =
+          nextSlots.length !== this.renderSlots.length ||
+          nextSlots.some((slot, index) => {
+            let current = this.renderSlots[index];
+            if (!current || current.element !== slot.element) return true;
+            if (current.kind !== slot.kind) return true;
+            if (!!current.card !== !!slot.card) return true;
+            if (current.card && slot.card) {
+              return (
+                current.card !== slot.card ||
+                (current as ResolvedSlot).format !==
+                  (slot as ResolvedSlot).format
+              );
+            }
+            if (!current.card && !slot.card) {
+              return (
+                (current as UnresolvedSlot).url !== (slot as UnresolvedSlot).url
+              );
+            }
+            return false;
+          });
+
+        if (didChange) {
+          this.renderSlots = nextSlots;
+        }
+      };
+
+      let scheduleUpdate = () => {
+        if (pendingUpdate) return;
+        pendingUpdate = true;
+        scheduleOnce('afterRender', null, updateSlots);
+      };
+
+      scheduleUpdate();
+
+      if (typeof MutationObserver === 'undefined') return;
+
+      let observer = new MutationObserver(scheduleUpdate);
+      observer.observe(element, { childList: true, subtree: true });
+      return () => observer.disconnect();
+    },
+  );
+
+  <template>
+    <div
+      class='markdown-content'
+      {{this.captureCardSlots this.renderedHtml this.loadedCards}}
+    >
+      {{this.renderedHtml}}
+    </div>
+    {{#each this.renderSlots key='element' as |slot|}}
+      {{#in-element slot.element insertBefore=null}}
+        {{#if slot.card}}
+          {{#if (eq slot.kind 'inline')}}
+            <span
+              class='markdown-bfm-card-slot markdown-bfm-card-slot--inline'
+              data-test-markdown-bfm-inline-card
+              {{this.cardContext.cardComponentModifier
+                card=slot.card
+                format='data'
+                fieldType=undefined
+                fieldName=undefined
+              }}
+            >
+              <CardRenderer
+                @card={{slot.card}}
+                @format={{slot.format}}
+                @displayContainer={{false}}
+              />
+            </span>
+          {{else}}
+            <div
+              class='markdown-bfm-card-slot markdown-bfm-card-slot--block
+                {{if slot.style "markdown-bfm-card-slot--fitted"}}'
+              style={{slot.style}}
+              data-test-markdown-bfm-block-card
+              {{this.cardContext.cardComponentModifier
+                card=slot.card
+                format='data'
+                fieldType=undefined
+                fieldName=undefined
+              }}
+            >
+              <CardRenderer
+                @card={{slot.card}}
+                @format={{slot.format}}
+                @displayContainer={{false}}
+              />
+            </div>
+          {{/if}}
+        {{else}}
+          {{#if (eq slot.kind 'inline')}}
+            <Pill
+              @variant='muted'
+              @size='extra-small'
+              title={{slot.url}}
+              data-test-markdown-bfm-unresolved-inline
+            >
+              <:iconLeft><LinkOffIcon width='12' height='12' /></:iconLeft>
+              <:default>{{slot.typeName}}</:default>
+            </Pill>
+          {{else}}
+            <div
+              class='markdown-bfm-unresolved--block'
+              title={{slot.url}}
+              data-test-markdown-bfm-unresolved-block
+            >
+              <Pill @variant='muted' @size='small'>
+                <:iconLeft><LinkOffIcon width='14' height='14' /></:iconLeft>
+                <:default>{{slot.typeName}}</:default>
+              </Pill>
+            </div>
+          {{/if}}
+        {{/if}}
+      {{/in-element}}
+    {{/each}}
+
+    {{! Styles below are mirrored from packages/base/default-templates/markdown.gts
+        to keep the rendered preview visually consistent with .md file rendering.
+        Wrapped in @layer baseComponent so that unlayered card-specific styles
+        (from CardContainer, card templates, etc.) automatically take precedence
+        over these generic markdown typography rules. }}
+    <style scoped>
+      @layer baseComponent {
+        .markdown-content {
+          --md-border: var(--border, var(--boxel-border-color));
+          --md-muted: var(--muted, var(--boxel-100));
+          --md-mono: var(
+            --markdown-code-font-family,
+            var(--font-mono, var(--boxel-monospace-font-family))
+          );
+
+          max-width: 100%;
+          font-size: var(--markdown-font-size, inherit);
+          font-family: var(--markdown-font-family, inherit);
+          overflow: hidden;
+        }
+
+        /* Heading */
+        .markdown-content :deep(h1),
+        .markdown-content :deep(h2),
+        .markdown-content :deep(h3),
+        .markdown-content :deep(h4),
+        .markdown-content :deep(h5),
+        .markdown-content :deep(h6) {
+          font-weight: 600;
+          font-family: var(--markdown-heading-font-family, inherit);
+        }
+        .markdown-content :deep(h1) {
+          font-size: 2.5em;
+          line-height: 1.25;
+          letter-spacing: normal;
+          margin-top: var(--boxel-sp-xl);
+          margin-bottom: var(--boxel-sp-lg);
+        }
+        .markdown-content :deep(h2) {
+          font-size: 1.625em;
+          margin-top: var(--boxel-sp-xxl);
+          margin-bottom: var(--boxel-sp-xs);
+        }
+        .markdown-content :deep(h3) {
+          font-size: 1.125em;
+          margin-top: var(--boxel-sp-xl);
+          margin-bottom: var(--boxel-sp-xxxs);
+        }
+        .markdown-content :deep(h4) {
+          font-size: 1em;
+          margin-top: var(--boxel-sp-lg);
+          margin-bottom: var(--boxel-sp-xxxs);
+        }
+        .markdown-content :deep(h5) {
+          font-size: 0.8125em;
+          margin-top: var(--boxel-sp);
+          margin-bottom: var(--boxel-sp-xxxs);
+        }
+        .markdown-content :deep(h6) {
+          font-size: 0.6875em;
+          margin-top: var(--boxel-sp-sm);
+          margin-bottom: var(--boxel-sp-xxxs);
+        }
+
+        /* Paragraph */
+        .markdown-content :deep(p) {
+          font-family: inherit;
+          font-size: inherit;
+          font-weight: 400;
+          line-height: 1.6;
+          margin-top: var(--boxel-sp-lg);
+          margin-bottom: var(--boxel-sp);
+        }
+
+        /* Bold */
+        .markdown-content :deep(strong),
+        .markdown-content :deep(b) {
+          font-weight: 700;
+        }
+
+        /* Italic */
+        .markdown-content :deep(em),
+        .markdown-content :deep(i) {
+          font-style: italic;
+        }
+
+        /* Strikethrough */
+        .markdown-content :deep(del),
+        .markdown-content :deep(s) {
+          text-decoration: line-through;
+        }
+
+        /* Highlight */
+        .markdown-content :deep(mark) {
+          background-color: var(--boxel-yellow);
+        }
+
+        /* Blockquote */
+        .markdown-content :deep(blockquote) {
+          margin-top: var(--boxel-sp-lg);
+          margin-bottom: var(--boxel-sp-lg);
+          margin-right: auto;
+          margin-left: auto;
+          padding-top: var(--boxel-sp-4xs);
+          padding-bottom: var(--boxel-sp-4xs);
+          border-right: 1px solid black;
+          border-left: 1px solid black;
+        }
+        .markdown-content :deep(blockquote p) {
+          font-size: 1.5em;
+          font-style: italic;
+          margin-inline-start: var(--boxel-sp-xl);
+          margin-inline-end: var(--boxel-sp-xl);
+        }
+
+        /* GFM Alerts */
+        .markdown-content :deep(.markdown-alert) {
+          border-left: 3px solid var(--markdown-alert-color, var(--boxel-400));
+          border-radius: 0 6px 6px 0;
+          padding: var(--boxel-sp-xs) var(--boxel-sp);
+          margin: var(--boxel-sp-xs) 0;
+        }
+        .markdown-content :deep(.markdown-alert-title) {
+          font-weight: 700;
+          color: var(--markdown-alert-color, inherit);
+          margin: 0;
+        }
+        .markdown-content :deep(.markdown-alert-title svg) {
+          display: none;
+        }
+        .markdown-content :deep(.markdown-alert p:not(.markdown-alert-title)) {
+          margin: var(--boxel-sp-4xs) 0 0;
+        }
+        .markdown-content :deep(.markdown-alert-note) {
+          --markdown-alert-color: #0969da;
+          background-color: #ddf4ff;
+        }
+        .markdown-content :deep(.markdown-alert-tip) {
+          --markdown-alert-color: #1a7f37;
+          background-color: #dcfce7;
+        }
+        .markdown-content :deep(.markdown-alert-important) {
+          --markdown-alert-color: #8250df;
+          background-color: #f5f0ff;
+        }
+        .markdown-content :deep(.markdown-alert-warning) {
+          --markdown-alert-color: #9a6700;
+          background-color: #fff8c5;
+        }
+        .markdown-content :deep(.markdown-alert-caution) {
+          --markdown-alert-color: #d1242f;
+          background-color: #ffebe9;
+        }
+
+        /* Horizontal rule */
+        .markdown-content :deep(hr) {
+          border-bottom: none;
+          border-right: none;
+          border-left: none;
+          border-top: var(--boxel-border);
+        }
+
+        /* Code */
+        .markdown-content :deep(code) {
+          font-family: var(--md-mono);
+          background-color: var(--md-muted);
+          color: var(--foreground);
+        }
+
+        /* Code Block */
+        .markdown-content :deep(pre) {
+          white-space: var(--boxel-markdown-field-pre-wrap, pre-wrap);
+          background-color: var(--md-muted);
+          color: var(--foreground);
+          font-family: var(--md-mono);
+          border-radius: var(--boxel-border-radius-xl);
+          padding: var(--boxel-sp-lg);
+        }
+
+        .markdown-content :deep(pre code) {
+          background-color: var(--md-muted);
+          color: var(--foreground);
+        }
+
+        /* Link */
+        .markdown-content :deep(a),
+        .markdown-content :deep(a:hover) {
+          color: currentColor;
+          text-decoration: underline;
+        }
+
+        /* Image */
+        .markdown-content :deep(figure, img, svg) {
+          max-width: 100%;
+        }
+        .markdown-content :deep(figure) {
+          margin-top: var(--boxel-sp-lg);
+          margin-bottom: var(--boxel-sp-lg);
+          margin-right: auto;
+          margin-left: auto;
+        }
+        .markdown-content :deep(figcaption) {
+          font-size: 0.8125em;
+          font-style: italic;
+        }
+        .markdown-content :deep(img) {
+          border-radius: var(--boxel-border-radius-lg);
+          overflow: hidden;
+        }
+
+        /* Lists */
+        .markdown-content :deep(ol),
+        .markdown-content :deep(ul) {
+          padding-left: 1.375em;
+          margin-top: var(--boxel-sp);
+          margin-bottom: var(--boxel-sp);
+          font-size: inherit;
+          font-weight: 400;
+          font-family: inherit;
+        }
+        .markdown-content :deep(ol ol),
+        .markdown-content :deep(ol ul),
+        .markdown-content :deep(ul ul),
+        .markdown-content :deep(ul ol) {
+          margin-top: var(--boxel-sp-xxxs);
+          margin-bottom: var(--boxel-sp-xxxs);
+        }
+
+        /* Task List */
+        .markdown-content :deep(ul:has(input[type='checkbox'])) {
+          list-style-type: none;
+          padding-left: 0;
+        }
+
+        /* Scrollable table wrapper */
+        .markdown-content :deep(.table-wrapper) {
+          width: 100%;
+          max-width: var(--markdown-table-max-width, 56.25rem);
+          overflow-x: auto;
+          margin-top: var(--boxel-sp-lg);
+          margin-bottom: var(--boxel-sp-lg);
+          background-color: var(--md-muted);
+          border: 1px solid var(--md-border);
+          border-radius: var(--boxel-border-radius);
+          word-break: initial;
+        }
+        .markdown-content :deep(table) {
+          width: 100%;
+          max-width: 100%;
+          border-radius: 0;
+          border-collapse: collapse;
+        }
+        .markdown-content :deep(thead) {
+          border-bottom: 2px solid var(--md-border);
+        }
+        .markdown-content :deep(th),
+        .markdown-content :deep(td) {
+          text-align: start;
+          padding: var(--boxel-sp-2xs);
+        }
+        .markdown-content :deep(th:not(:last-child)),
+        .markdown-content :deep(td:not(:last-child)) {
+          border-right: 1px solid var(--md-border);
+        }
+        .markdown-content :deep(tr:not(:last-child) td) {
+          border-bottom: 1px solid var(--md-border);
+        }
+
+        /* BFM reference slots */
+        .markdown-content :deep([data-boxel-bfm-inline-ref]) {
+          display: inline;
+        }
+        .markdown-content :deep([data-boxel-bfm-block-ref]) {
+          display: block;
+          margin: var(--boxel-sp) 0;
+        }
+
+        .markdown-bfm-card-slot {
+          max-width: 100%;
+        }
+        .markdown-bfm-card-slot--inline {
+          display: inline-flex;
+          vertical-align: middle;
+        }
+        .markdown-bfm-card-slot--block {
+          display: block;
+        }
+        .markdown-bfm-card-slot--fitted {
+          border-radius: var(--boxel-border-radius);
+        }
+
+        /* Loading shimmer */
+        .markdown-content :deep([data-boxel-bfm-type='card']:empty) {
+          background-color: var(--boxel-light-200);
+          border-radius: var(--boxel-border-radius-sm);
+          position: relative;
+          overflow: hidden;
+        }
+        .markdown-content :deep([data-boxel-bfm-type='card']:empty::after) {
+          content: '';
+          position: absolute;
+          inset: 0;
+          background: linear-gradient(
+            90deg,
+            transparent,
+            var(--boxel-light-100),
+            transparent
+          );
+          animation: bfm-shimmer 1.6s linear 0.5s infinite;
+          transform: translateX(-100%);
+        }
+        .markdown-content :deep([data-boxel-bfm-inline-ref]:empty) {
+          display: inline-block;
+          width: 6em;
+          height: 1.2em;
+          vertical-align: middle;
+        }
+        .markdown-content :deep([data-boxel-bfm-block-ref]:empty) {
+          display: block;
+          width: 100%;
+          height: 3em;
+        }
+        @keyframes bfm-shimmer {
+          0% {
+            transform: translateX(-200%);
+          }
+          100% {
+            transform: translateX(100%);
+          }
+        }
+
+        /* Unresolved block indicator */
+        .markdown-bfm-unresolved--block {
+          display: block;
+          margin: var(--boxel-sp-xxxs) 0;
+        }
+      } /* end @layer baseComponent */
+    </style>
+  </template>
+}
diff --git a/packages/host/app/instance-initializers/register-html-to-markdown.ts b/packages/host/app/instance-initializers/register-html-to-markdown.ts
new file mode 100644
index 00000000000..9674e9345ac
--- /dev/null
+++ b/packages/host/app/instance-initializers/register-html-to-markdown.ts
@@ -0,0 +1,18 @@
+import type ApplicationInstance from '@ember/application/instance';
+
+// Importing the module for its side effect: `html-to-markdown.ts` registers
+// `globalThis.__boxelHtmlToMarkdown` at module-evaluation time so base-realm
+// templates (which cannot statically import from `packages/host`) can reach
+// the converter. The initializer exists to guarantee the module is in the
+// boot-time dependency graph — without it, the module would only be pulled
+// in when something else happens to import it first, which could race with
+// early markdown renders during prerender.
+import '../lib/html-to-markdown';
+
+export function initialize(_appInstance: ApplicationInstance): void {
+  // No-op: the global is installed by the import above.
+}
+
+export default {
+  initialize,
+};
diff --git a/packages/host/app/lib/html-to-markdown.ts b/packages/host/app/lib/html-to-markdown.ts
new file mode 100644
index 00000000000..7a782a31e99
--- /dev/null
+++ b/packages/host/app/lib/html-to-markdown.ts
@@ -0,0 +1,96 @@
+// Browser-only HTML-to-markdown conversion used by the default `static markdown`
+// fallback template on `CardDef`/`FieldDef`/`FileDef` (CS-10784).
+//
+// SECURITY / BUNDLING CONSTRAINT
+// ------------------------------
+// Card code must not run on the server; the prerender pipeline already runs
+// in a headless browser, so this module is safe to execute there. This file
+// lives in `packages/host` and must NOT be imported by `packages/realm-server`
+// or any other Node.js code path. The base realm's default template reaches
+// this converter via `globalThis.__boxelHtmlToMarkdown`, so `packages/base`
+// never imports turndown either — the dependency is fully contained to the
+// host/browser bundle.
+
+import { gfm } from '@joplin/turndown-plugin-gfm';
+import TurndownService from 'turndown';
+
+let converter: TurndownService | undefined;
+
+function getConverter(): TurndownService {
+  if (!converter) {
+    converter = new TurndownService({
+      headingStyle: 'atx', // `# H1` instead of setext underlines — single-line
+      codeBlockStyle: 'fenced', // ```lang blocks
+      bulletListMarker: '-',
+      emDelimiter: '_',
+      strongDelimiter: '**',
+      linkStyle: 'inlined',
+    });
+    converter.use(gfm); // tables, strikethrough, task lists, autolinks
+    converter.remove(['style', 'script']); // strip embedded CSS/JS from card HTML
+
+    // Embedded card containers should become card references rather than having
+    // their full HTML content inlined into the markdown.  Atom-format cards
+    // use the inline directive `:card[id]`; other formats (fitted, embedded)
+    // use the block directive `::card[id]`.
+    converter.addRule('cardContainer', {
+      filter(node) {
+        return (
+          node.nodeType === Node.ELEMENT_NODE &&
+          (node as HTMLElement).hasAttribute('data-boxel-card-id')
+        );
+      },
+      replacement(_content, node) {
+        let cardId = (node as HTMLElement).getAttribute('data-boxel-card-id');
+        if (!cardId) {
+          return _content;
+        }
+        let format = (node as HTMLElement).getAttribute(
+          'data-boxel-card-format',
+        );
+        if (format === 'atom') {
+          return `:card[${cardId}]`;
+        }
+        return `::card[${cardId}]`;
+      },
+    });
+
+    // Card HTML often wraps link text in nested elements (icons, spans) with
+    // whitespace between them.  Turndown preserves that whitespace, producing
+    // multiline `[\n  Contact](url)` which is broken markdown.  Collapse it.
+    converter.addRule('compactLinks', {
+      filter: 'a',
+      replacement(_content, node, _options) {
+        let href = (node as HTMLAnchorElement).getAttribute('href');
+        if (!href) {
+          return _content;
+        }
+        let text = _content.replace(/\s+/g, ' ').trim();
+        if (!text) {
+          return '';
+        }
+        let title = (node as HTMLAnchorElement).getAttribute('title');
+        let titlePart = title ? ` "${title}"` : '';
+        return `[${text}](${href}${titlePart})`;
+      },
+    });
+  }
+  return converter;
+}
+
+export function convertHtmlToMarkdown(html: string): string {
+  if (!html) {
+    return '';
+  }
+  return getConverter().turndown(html);
+}
+
+// Register a synchronous converter on `globalThis` so base-realm templates
+// (which cannot statically import from `packages/host`) can invoke it at
+// render time. Using `??=` so re-imports are idempotent and test harnesses
+// that install their own stub are not overwritten.
+if (typeof globalThis !== 'undefined') {
+  (globalThis as any).__boxelHtmlToMarkdown ??= convertHtmlToMarkdown;
+}
+
+export default convertHtmlToMarkdown;
diff --git a/packages/host/app/resources/live-prerendered-search.ts b/packages/host/app/resources/live-prerendered-search.ts
index d8362d5705c..3d9fbf68683 100644
--- a/packages/host/app/resources/live-prerendered-search.ts
+++ b/packages/host/app/resources/live-prerendered-search.ts
@@ -1,3 +1,4 @@
+import { registerDestructor } from '@ember/destroyable';
 import type Owner from '@ember/owner';
 import { setOwner } from '@ember/owner';
 import { service } from '@ember/service';
@@ -62,6 +63,17 @@ export class LivePrerenderedSearchResource extends Resource<Args> {
   #loadedScopedCssModules = new Set<string>();
   #previousSignature: string | undefined;
 
+  constructor(owner: object) {
+    super(owner);
+    registerDestructor(this, () => {
+      this.buildPrerenderedCards.cancelAll();
+      this._instances = new TrackedArray();
+      this._meta = { page: { total: 0 } };
+      this.#loadedScopedCssModules.clear();
+      this.#previousSignature = undefined;
+    });
+  }
+
   modify(_positional: never[], named: Args['named']) {
     let {
       owner,
diff --git a/packages/host/app/templates/render/html.gts b/packages/host/app/templates/render/html.gts
index d5dd741c36a..619db45ab96 100644
--- a/packages/host/app/templates/render/html.gts
+++ b/packages/host/app/templates/render/html.gts
@@ -4,6 +4,8 @@ import Component from '@glimmer/component';
 import { provide } from 'ember-provide-consume-context';
 import RouteTemplate from 'ember-route-template';
 
+import { eq } from '@cardstack/boxel-ui/helpers';
+
 import {
   type getCard as GetCardType,
   GetCardContextName,
@@ -59,7 +61,26 @@ class RenderHtmlTemplate extends Component<Signature> {
     };
   }
 
-  <template><@model.Component @format={{@model.format}} /></template>
+  <template>
+    {{! Whitespace-preserving container for markdown-format renders (CS-10781).
+        `white-space: pre` keeps newlines and indentation authored in the
+        `<template>` body intact. The dedicated `data-markdown-render-container`
+        attribute gives the prerender extraction a tight target so surrounding
+        route-template whitespace does not leak into the captured markdown.
+        Only applies when format === 'markdown'; other formats are unaffected. }}
+    {{#if (eq @model.format 'markdown')}}
+      <div data-markdown-render-container class='markdown-render-container'>
+        <@model.Component @format={{@model.format}} />
+      </div>
+    {{else}}
+      <@model.Component @format={{@model.format}} />
+    {{/if}}
+    <style scoped>
+      .markdown-render-container {
+        white-space: pre;
+      }
+    </style>
+  </template>
 }
 
 export default RouteTemplate(RenderHtmlTemplate);
diff --git a/packages/host/config/schema/1773324721387_schema.sql b/packages/host/config/schema/1776285887495_schema.sql
similarity index 99%
rename from packages/host/config/schema/1773324721387_schema.sql
rename to packages/host/config/schema/1776285887495_schema.sql
index 0362f561075..1f8b37c8bd7 100644
--- a/packages/host/config/schema/1773324721387_schema.sql
+++ b/packages/host/config/schema/1776285887495_schema.sql
@@ -41,6 +41,7 @@
    head_html TEXT,
    has_error BOOLEAN DEFAULT false NOT NULL,
    last_known_good_deps BLOB,
+   markdown TEXT,
    PRIMARY KEY ( url, realm_url, type ) 
 );
 
@@ -68,6 +69,7 @@
    head_html TEXT,
    has_error BOOLEAN DEFAULT false NOT NULL,
    last_known_good_deps BLOB,
+   markdown TEXT,
    PRIMARY KEY ( url, realm_url, type ) 
 );
 
diff --git a/packages/host/package.json b/packages/host/package.json
index 49225410dda..d51fc87f451 100644
--- a/packages/host/package.json
+++ b/packages/host/package.json
@@ -65,7 +65,9 @@
     "@floating-ui/dom": "catalog:",
     "@glimmer/component": "catalog:",
     "@glimmer/tracking": "^1.1.2",
+    "@glint/ember-tsc": "catalog:",
     "@glint/template": "catalog:",
+    "@joplin/turndown-plugin-gfm": "^1.0.64",
     "@lezer/markdown": "catalog:",
     "@percy/cli": "catalog:",
     "@percy/ember": "catalog:",
@@ -85,6 +87,7 @@
     "@types/qunit": "catalog:",
     "@types/rsvp": "catalog:",
     "@types/statuses": "catalog:",
+    "@types/turndown": "^5.0.6",
     "@types/uuid": "catalog:",
     "@typescript-eslint/eslint-plugin": "catalog:",
     "@typescript-eslint/parser": "catalog:",
@@ -193,11 +196,11 @@
     "testem": "catalog:",
     "testem-multi-reporter": "catalog:",
     "tracked-built-ins": "catalog:",
+    "turndown": "^7.2.4",
     "typescript": "catalog:",
     "uuid": "catalog:",
     "wait-for-localhost-cli": "catalog:",
-    "webpack": "catalog:",
-    "@glint/ember-tsc": "catalog:"
+    "webpack": "catalog:"
   },
   "dependencies": {
     "ember-modify-based-class-resource": "catalog:",
diff --git a/packages/host/tests/acceptance/code-submode-test.ts b/packages/host/tests/acceptance/code-submode-test.ts
index eaf8e35f4e7..01156769680 100644
--- a/packages/host/tests/acceptance/code-submode-test.ts
+++ b/packages/host/tests/acceptance/code-submode-test.ts
@@ -1371,6 +1371,14 @@ module('Acceptance | code submode tests', function (_hooks) {
         )
         .exists();
 
+      await click('[data-test-format-chooser="markdown"]');
+      assert.dom('[data-test-format-chooser="markdown"]').hasClass('active');
+      assert
+        .dom(
+          '[data-test-code-mode-card-renderer-body] .field-component-card.markdown-format',
+        )
+        .exists();
+
       // Only preview is shown in the right column when viewing an instance, no schema editor
       assert.dom('[data-test-card-schema]').doesNotExist();
     });
@@ -1402,6 +1410,8 @@ module('Acceptance | code submode tests', function (_hooks) {
       assert.dom('[data-test-format-chooser="embedded"]').exists();
       assert.dom('[data-test-format-chooser="fitted"]').exists();
       assert.dom('[data-test-format-chooser="atom"]').exists();
+      assert.dom('[data-test-format-chooser="head"]').exists();
+      assert.dom('[data-test-format-chooser="markdown"]').exists();
     });
 
     test('clicking "metadata" format for a non-card file shows metadata panel with JSON-API content', async function (assert) {
diff --git a/packages/host/tests/acceptance/code-submode/card-playground-test.gts b/packages/host/tests/acceptance/code-submode/card-playground-test.gts
index 2280b107096..817adfbefcb 100644
--- a/packages/host/tests/acceptance/code-submode/card-playground-test.gts
+++ b/packages/host/tests/acceptance/code-submode/card-playground-test.gts
@@ -800,6 +800,14 @@ module('Acceptance | code-submode | card playground', function (_hooks) {
       assert
         .dom('[data-test-playground-panel] [data-test-card-format="fitted"]')
         .exists({ count: 16 });
+
+      await selectFormat('markdown');
+      assert.dom('[data-test-format-chooser="fitted"]').hasNoClass('active');
+      assert.dom('[data-test-format-chooser="markdown"]').hasClass('active');
+      assert
+        .dom('[data-test-markdown-preview]')
+        .exists('markdown preview container renders');
+      assertCardExists(assert, cardId, 'markdown');
     });
 
     test('can toggle edit format via button on card header', async function (assert) {
diff --git a/packages/host/tests/acceptance/code-submode/field-playground-test.gts b/packages/host/tests/acceptance/code-submode/field-playground-test.gts
index d1614083de6..d7fc4e7b3db 100644
--- a/packages/host/tests/acceptance/code-submode/field-playground-test.gts
+++ b/packages/host/tests/acceptance/code-submode/field-playground-test.gts
@@ -514,7 +514,7 @@ module('Acceptance | code-submode | field playground', function (_hooks) {
       });
       assert
         .dom('[data-test-playground-format-chooser] button')
-        .exists({ count: 4 });
+        .exists({ count: 5 });
       assert.dom('[data-test-format-chooser="isolated"]').doesNotExist();
       assert.dom('[data-test-format-chooser="embedded"]').hasClass('active');
       assert
@@ -540,6 +540,12 @@ module('Acceptance | code-submode | field playground', function (_hooks) {
       await selectFormat('fitted');
       assertFieldExists(assert, 'fitted');
       assert.dom('[data-test-fitted-comment]').containsText('by Marco');
+
+      await selectFormat('markdown');
+      assert.dom('[data-test-format-chooser="markdown"]').hasClass('active');
+      assert
+        .dom('[data-test-markdown-preview]')
+        .exists('markdown preview container renders');
     });
 
     test('can not preview non-exports or primitives', async function (assert) {
diff --git a/packages/host/tests/helpers/base-realm.ts b/packages/host/tests/helpers/base-realm.ts
index 338c612fdb2..4383f9c9b31 100644
--- a/packages/host/tests/helpers/base-realm.ts
+++ b/packages/host/tests/helpers/base-realm.ts
@@ -98,6 +98,7 @@ let isCard: (typeof CardAPIModule)['isCard'];
 let linksTo: (typeof CardAPIModule)['linksTo'];
 let linksToMany: (typeof CardAPIModule)['linksToMany'];
 let MaybeBase64Field: (typeof CardAPIModule)['MaybeBase64Field'];
+let CSSField: (typeof CardAPIModule)['CSSField'];
 let createFromSerialized: (typeof CardAPIModule)['createFromSerialized'];
 let updateFromSerialized: (typeof CardAPIModule)['updateFromSerialized'];
 let serializeCard: (typeof CardAPIModule)['serializeCard'];
@@ -240,6 +241,7 @@ async function initialize() {
     flushLogs,
     queryableValue,
     MaybeBase64Field,
+    CSSField,
     getFieldDescription,
     ReadOnlyField,
     instanceOf,
@@ -292,6 +294,7 @@ export {
   linksTo,
   linksToMany,
   MaybeBase64Field,
+  CSSField,
   createFromSerialized,
   updateFromSerialized,
   serializeCard,
diff --git a/packages/host/tests/integration/components/field-markdown-domain-test.gts b/packages/host/tests/integration/components/field-markdown-domain-test.gts
new file mode 100644
index 00000000000..8e9fb7178d1
--- /dev/null
+++ b/packages/host/tests/integration/components/field-markdown-domain-test.gts
@@ -0,0 +1,645 @@
+import type { RenderingTestContext } from '@ember/test-helpers';
+
+import { getService } from '@universal-ember/test-support';
+import { module, test } from 'qunit';
+
+import { baseRealm, type Loader } from '@cardstack/runtime-common';
+
+import type * as BrandFunctionalPaletteModule from 'https://cardstack.com/base/brand-functional-palette';
+import type * as BrandLogoModule from 'https://cardstack.com/base/brand-logo';
+import type * as CSSValueFieldModule from 'https://cardstack.com/base/css-value';
+import type * as CsvFileDefModule from 'https://cardstack.com/base/csv-file-def';
+import type * as GtsFileDefModule from 'https://cardstack.com/base/gts-file-def';
+import type * as ImageFileDefModule from 'https://cardstack.com/base/image-file-def';
+import type * as JsonFileDefModule from 'https://cardstack.com/base/json-file-def';
+import type * as MarkdownFileDefModule from 'https://cardstack.com/base/markdown-file-def';
+import type * as ResponseFieldModule from 'https://cardstack.com/base/response-field';
+import type * as StructuredThemeModule from 'https://cardstack.com/base/structured-theme';
+import type * as StructuredThemeVarsModule from 'https://cardstack.com/base/structured-theme-variables';
+import type * as TextFileDefModule from 'https://cardstack.com/base/text-file-def';
+import type * as TsFileDefModule from 'https://cardstack.com/base/ts-file-def';
+import type * as TypographyFieldModule from 'https://cardstack.com/base/typography';
+
+import {
+  CardDef,
+  CardInfoField,
+  Component,
+  RealmField,
+  contains,
+  enumField,
+  field,
+  setupBaseRealm,
+  StringField,
+} from '../../helpers/base-realm';
+import { renderCard } from '../../helpers/render-component';
+import { setupRenderingTest } from '../../helpers/setup';
+
+// Verifies the explicit `static markdown` templates added per CS-10787 to
+// domain/reference/file/theme fields. Fields are tested via a CardDef wrapper
+// whose `isolated` template embeds `<@fields.foo @format='markdown' />` inside
+// a `[data-test-md]` container; FileDef subclasses (which are themselves
+// BaseDefs) are rendered directly with `renderCard(card, 'markdown')`.
+
+function readMarkdown(root: Element | Document): string {
+  let el = root.querySelector('[data-test-md]');
+  return (el?.textContent ?? '').trim();
+}
+
+function readRootMarkdown(root: Element | Document): string {
+  return (root.textContent ?? '').replace(/^\s+|\s+$/g, '');
+}
+
+module('Integration | field markdown domain', function (hooks) {
+  setupRenderingTest(hooks);
+  setupBaseRealm(hooks);
+
+  let loader: Loader;
+  let BrandFunctionalPalette: typeof BrandFunctionalPaletteModule.default;
+  let BrandLogo: typeof BrandLogoModule.default;
+  let MarkField: typeof BrandLogoModule.MarkField;
+  let CSSValueField: typeof CSSValueFieldModule.default;
+  let CsvFileDef: typeof CsvFileDefModule.CsvFileDef;
+  let GtsFileDef: typeof GtsFileDefModule.GtsFileDef;
+  let ImageDef: typeof ImageFileDefModule.ImageDef;
+  let JsonFileDef: typeof JsonFileDefModule.JsonFileDef;
+  let MarkdownDef: typeof MarkdownFileDefModule.MarkdownDef;
+  let ResponseField: typeof ResponseFieldModule.default;
+  let StructuredTheme: typeof StructuredThemeModule.default;
+  let ThemeVarField: typeof StructuredThemeVarsModule.default;
+  let ThemeTypographyField: typeof StructuredThemeVarsModule.ThemeTypographyField;
+  let TextFileDef: typeof TextFileDefModule.TextFileDef;
+  let TsFileDef: typeof TsFileDefModule.TsFileDef;
+  let TypographyField: typeof TypographyFieldModule.default;
+
+  hooks.beforeEach(async function (this: RenderingTestContext) {
+    loader = getService('loader-service').loader;
+    BrandFunctionalPalette = (
+      await loader.import<typeof BrandFunctionalPaletteModule>(
+        `${baseRealm.url}brand-functional-palette`,
+      )
+    ).default;
+    let brandLogoModule = await loader.import<typeof BrandLogoModule>(
+      `${baseRealm.url}brand-logo`,
+    );
+    BrandLogo = brandLogoModule.default;
+    MarkField = brandLogoModule.MarkField;
+    CSSValueField = (
+      await loader.import<typeof CSSValueFieldModule>(
+        `${baseRealm.url}css-value`,
+      )
+    ).default;
+    CsvFileDef = (
+      await loader.import<typeof CsvFileDefModule>(
+        `${baseRealm.url}csv-file-def`,
+      )
+    ).CsvFileDef;
+    GtsFileDef = (
+      await loader.import<typeof GtsFileDefModule>(
+        `${baseRealm.url}gts-file-def`,
+      )
+    ).GtsFileDef;
+    ImageDef = (
+      await loader.import<typeof ImageFileDefModule>(
+        `${baseRealm.url}image-file-def`,
+      )
+    ).ImageDef;
+    JsonFileDef = (
+      await loader.import<typeof JsonFileDefModule>(
+        `${baseRealm.url}json-file-def`,
+      )
+    ).JsonFileDef;
+    MarkdownDef = (
+      await loader.import<typeof MarkdownFileDefModule>(
+        `${baseRealm.url}markdown-file-def`,
+      )
+    ).MarkdownDef;
+    ResponseField = (
+      await loader.import<typeof ResponseFieldModule>(
+        `${baseRealm.url}response-field`,
+      )
+    ).default;
+    StructuredTheme = (
+      await loader.import<typeof StructuredThemeModule>(
+        `${baseRealm.url}structured-theme`,
+      )
+    ).default;
+    let themeVarsModule = await loader.import<typeof StructuredThemeVarsModule>(
+      `${baseRealm.url}structured-theme-variables`,
+    );
+    ThemeVarField = themeVarsModule.default;
+    ThemeTypographyField = themeVarsModule.ThemeTypographyField;
+    TextFileDef = (
+      await loader.import<typeof TextFileDefModule>(
+        `${baseRealm.url}text-file-def`,
+      )
+    ).TextFileDef;
+    TsFileDef = (
+      await loader.import<typeof TsFileDefModule>(`${baseRealm.url}ts-file-def`)
+    ).TsFileDef;
+    TypographyField = (
+      await loader.import<typeof TypographyFieldModule>(
+        `${baseRealm.url}typography`,
+      )
+    ).default;
+  });
+
+  // ---- Reference / relation fields ------------------------------------
+
+  test('RealmField markdown emits a self-linked markdown link', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(RealmField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({ value: 'https://example.com/realm/' });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(
+      readMarkdown(this.element),
+      '[https://example.com/realm/](https://example.com/realm/)',
+    );
+  });
+
+  test('RealmField markdown emits empty string when unset', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(RealmField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample();
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), '');
+  });
+
+  test('ResponseField markdown emits a status summary placeholder', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(ResponseField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({
+      value: new Response('body', { status: 200, statusText: 'OK' }),
+    });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), '[HTTP response: 200 OK]');
+  });
+
+  test('ResponseField markdown emits a generic placeholder when unset', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(ResponseField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample();
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), '');
+  });
+
+  // ---- enum factory ---------------------------------------------------
+
+  test('enumField markdown renders the matching option label', async function (this: RenderingTestContext, assert) {
+    const Priority = enumField(StringField, {
+      options: [
+        { value: 'high', label: 'High Priority' },
+        { value: 'medium', label: 'Medium Priority' },
+        { value: 'low', label: 'Low Priority' },
+      ],
+    });
+    class Sample extends CardDef {
+      @field value = contains(Priority);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({ value: 'high' });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), 'High Priority');
+  });
+
+  test('enumField markdown falls back to escaped raw value when no option matches', async function (this: RenderingTestContext, assert) {
+    const Priority = enumField(StringField, {
+      options: ['high', 'low'],
+    });
+    class Sample extends CardDef {
+      @field value = contains(Priority);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    // `-urgent` at line start would read as a bullet marker, so the `-` gets
+    // escaped by markdownEscape.
+    let card = new Sample({ value: '-urgent' });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), '\\-urgent');
+  });
+
+  // ---- Style / theme fields -------------------------------------------
+
+  test('CSSValueField markdown wraps the value in a single-backtick fence', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(CSSValueField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({ value: '1rem' });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), '`1rem`');
+  });
+
+  test('CSSValueField markdown widens the fence when the value contains backticks', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(CSSValueField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    // A value containing a backtick needs a double-backtick fence, and because
+    // it ends with a backtick we pad with spaces.
+    let card = new Sample({ value: 'var(--x) `fallback`' });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), '`` var(--x) `fallback` ``');
+  });
+
+  test('TypographyField markdown emits bulleted non-empty properties', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field typography = contains(TypographyField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.typography @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({
+      typography: new TypographyField({
+        fontFamily: 'Inter, sans-serif',
+        fontSize: '16px',
+        fontWeight: '400',
+        sampleText: 'Lorem ipsum',
+      }),
+    });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(
+      readMarkdown(this.element),
+      [
+        '- Font family: `Inter, sans-serif`',
+        '- Font size: `16px`',
+        '- Font weight: `400`',
+        '- Sample text: Lorem ipsum',
+      ].join('\n'),
+    );
+  });
+
+  test('TypographyField markdown emits empty string when no properties are set', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field typography = contains(TypographyField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.typography @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({ typography: new TypographyField({}) });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), '');
+  });
+
+  test('ThemeVarField markdown lists populated CSS variables with escaped names', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field vars = contains(ThemeVarField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.vars @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({
+      vars: new ThemeVarField({
+        background: '#fff',
+        foreground: '#000',
+      }),
+    });
+    await renderCard(loader, card, 'isolated');
+    // Variable names always start with `--`; markdownEscape escapes every `-`
+    // unconditionally so downstream markdown renderers don't misinterpret
+    // the leading dashes.
+    let text = readMarkdown(this.element);
+    assert.true(
+      text.includes('- \\-\\-background: `#fff`'),
+      `expected background entry in: ${text}`,
+    );
+    assert.true(
+      text.includes('- \\-\\-foreground: `#000`'),
+      `expected foreground entry in: ${text}`,
+    );
+    // Unpopulated fields (e.g. primary) should be omitted.
+    assert.false(
+      text.includes('primary'),
+      `expected unpopulated entries to be omitted in: ${text}`,
+    );
+  });
+
+  test('ThemeVarField markdown emits empty string when no variables are populated', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field vars = contains(ThemeVarField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.vars @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({ vars: new ThemeVarField({}) });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), '');
+  });
+
+  test('ThemeTypographyField markdown lists populated typography entries', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field typography = contains(ThemeTypographyField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.typography @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({
+      typography: new ThemeTypographyField({
+        heading: new TypographyField({ fontFamily: 'Inter' }),
+      }),
+    });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(
+      readMarkdown(this.element),
+      '- \\-\\-theme\\-heading\\-font\\-family: `Inter`',
+    );
+  });
+
+  // ---- Brand / logo fields --------------------------------------------
+
+  test('MarkField markdown emits a markdown image with encoded href', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(MarkField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({ value: 'https://example.com/logo with space.png' });
+    await renderCard(loader, card, 'isolated');
+    // Alt text is intentionally blank; the URL gets percent-encoded for safe
+    // use inside the markdown image reference.
+    assert.strictEqual(
+      readMarkdown(this.element),
+      '![](https://example.com/logo%20with%20space.png)',
+    );
+  });
+
+  test('MarkField markdown emits empty string when URL is missing', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(MarkField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample();
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), '');
+  });
+
+  test('BrandFunctionalPalette markdown lists populated palette colors', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field palette = contains(BrandFunctionalPalette);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.palette @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({
+      palette: new BrandFunctionalPalette({
+        primary: '#ff00ff',
+        accent: '#00ffff',
+      }),
+    });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(
+      readMarkdown(this.element),
+      ['- Primary: `#ff00ff`', '- Accent: `#00ffff`'].join('\n'),
+    );
+  });
+
+  test('BrandFunctionalPalette markdown emits empty string when nothing is populated', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field palette = contains(BrandFunctionalPalette);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.palette @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({ palette: new BrandFunctionalPalette({}) });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), '');
+  });
+
+  test('BrandLogo markdown lists populated mark URLs with links and labels', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field logo = contains(BrandLogo);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.logo @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({
+      logo: new BrandLogo({
+        primaryMark1: 'https://example.com/primary-light.png',
+        socialMediaProfileIcon: 'https://example.com/icon.png',
+      }),
+    });
+    await renderCard(loader, card, 'isolated');
+    // `(light)` has its parens escaped by markdownEscape on the label, and
+    // `markdownLink(url, url)` double-quotes the URL as both link text and
+    // href (no `-` in these URLs so no escape inside the text).
+    assert.strictEqual(
+      readMarkdown(this.element),
+      [
+        '- Primary mark \\(light\\): [https://example.com/primary\\-light.png](https://example.com/primary-light.png)',
+        '- Social media icon: [https://example.com/icon.png](https://example.com/icon.png)',
+      ].join('\n'),
+    );
+  });
+
+  // ---- FileDef subclasses (rendered directly) -------------------------
+
+  test('MarkdownDef markdown passes content through verbatim', async function (this: RenderingTestContext, assert) {
+    let card = new MarkdownDef({
+      name: 'doc.md',
+      content: '# Heading\n\n- bullet',
+      contentType: 'text/markdown',
+      sourceUrl: 'https://example.com/doc.md',
+    });
+    await renderCard(loader, card, 'markdown');
+    assert.strictEqual(readRootMarkdown(this.element), '# Heading\n\n- bullet');
+  });
+
+  test('TsFileDef markdown emits a fenced ts code block', async function (this: RenderingTestContext, assert) {
+    let card = new TsFileDef({
+      name: 'sample.ts',
+      content: 'export const x = 1;',
+      contentType: 'text/typescript',
+      sourceUrl: 'https://example.com/sample.ts',
+    });
+    await renderCard(loader, card, 'markdown');
+    assert.strictEqual(
+      readRootMarkdown(this.element),
+      '```ts\nexport const x = 1;\n```',
+    );
+  });
+
+  test('GtsFileDef markdown overrides the language tag to gts', async function (this: RenderingTestContext, assert) {
+    let card = new GtsFileDef({
+      name: 'sample.gts',
+      content: '<template>hi</template>',
+      contentType: 'text/typescript',
+      sourceUrl: 'https://example.com/sample.gts',
+    });
+    await renderCard(loader, card, 'markdown');
+    assert.strictEqual(
+      readRootMarkdown(this.element),
+      '```gts\n<template>hi</template>\n```',
+    );
+  });
+
+  test('JsonFileDef markdown emits a fenced json code block', async function (this: RenderingTestContext, assert) {
+    let card = new JsonFileDef({
+      name: 'data.json',
+      content: '{"ok":true}',
+      contentType: 'application/json',
+      sourceUrl: 'https://example.com/data.json',
+    });
+    await renderCard(loader, card, 'markdown');
+    assert.strictEqual(
+      readRootMarkdown(this.element),
+      '```json\n{"ok":true}\n```',
+    );
+  });
+
+  test('CsvFileDef markdown emits a fenced csv code block', async function (this: RenderingTestContext, assert) {
+    let card = new CsvFileDef({
+      name: 'rows.csv',
+      content: 'name,count\nA,1\nB,2',
+      contentType: 'text/csv',
+      sourceUrl: 'https://example.com/rows.csv',
+    });
+    await renderCard(loader, card, 'markdown');
+    assert.strictEqual(
+      readRootMarkdown(this.element),
+      '```csv\nname,count\nA,1\nB,2\n```',
+    );
+  });
+
+  test('TextFileDef markdown emits an unlabeled fenced code block', async function (this: RenderingTestContext, assert) {
+    let card = new TextFileDef({
+      name: 'notes.txt',
+      content: 'plain content',
+      contentType: 'text/plain',
+      sourceUrl: 'https://example.com/notes.txt',
+    });
+    await renderCard(loader, card, 'markdown');
+    assert.strictEqual(
+      readRootMarkdown(this.element),
+      '```\nplain content\n```',
+    );
+  });
+
+  test('ImageDef markdown emits a markdown image reference', async function (this: RenderingTestContext, assert) {
+    let card = new ImageDef({
+      name: 'hero',
+      url: 'https://example.com/hero.png',
+      sourceUrl: 'https://example.com/hero.png',
+      contentType: 'image/png',
+    });
+    await renderCard(loader, card, 'markdown');
+    assert.strictEqual(
+      readRootMarkdown(this.element),
+      '![hero](https://example.com/hero.png)',
+    );
+  });
+
+  test('ImageDef markdown falls back to a placeholder when no URL is set', async function (this: RenderingTestContext, assert) {
+    let card = new ImageDef({ name: 'hero', contentType: 'image/png' });
+    await renderCard(loader, card, 'markdown');
+    assert.strictEqual(readRootMarkdown(this.element), '[binary image: hero]');
+  });
+
+  // ---- StructuredTheme (CardDef subclass, rendered directly) ----------
+
+  test('StructuredTheme markdown emits title, description, version, and variable sections', async function (this: RenderingTestContext, assert) {
+    let card = new StructuredTheme({
+      cardInfo: new CardInfoField({
+        name: 'Example Theme',
+        summary: 'A sample theme for testing.',
+      }),
+      version: '1.0.0',
+      typography: new ThemeTypographyField({
+        heading: new TypographyField({ fontFamily: 'Inter' }),
+      }),
+      rootVariables: new ThemeVarField({
+        background: '#fff',
+      }),
+    });
+    await renderCard(loader, card, 'markdown');
+    let text = readRootMarkdown(this.element);
+    assert.true(
+      text.includes('# Example Theme'),
+      `expected H1 title in: ${text}`,
+    );
+    assert.true(
+      text.includes('A sample theme for testing.'),
+      `expected description in: ${text}`,
+    );
+    assert.true(
+      text.includes('Version: `1.0.0`'),
+      `expected version line in: ${text}`,
+    );
+    assert.true(
+      text.includes('## Typography'),
+      `expected typography heading in: ${text}`,
+    );
+    assert.true(
+      text.includes('## Root Variables'),
+      `expected root variables heading in: ${text}`,
+    );
+    assert.true(
+      text.includes('\\-\\-theme\\-heading\\-font\\-family'),
+      `expected typography entry in: ${text}`,
+    );
+    assert.true(
+      text.includes('\\-\\-background'),
+      `expected root var entry in: ${text}`,
+    );
+  });
+});
diff --git a/packages/host/tests/integration/components/field-markdown-primitives-test.gts b/packages/host/tests/integration/components/field-markdown-primitives-test.gts
new file mode 100644
index 00000000000..1bdd7ea9dcb
--- /dev/null
+++ b/packages/host/tests/integration/components/field-markdown-primitives-test.gts
@@ -0,0 +1,326 @@
+import type { RenderingTestContext } from '@ember/test-helpers';
+
+import { getService } from '@universal-ember/test-support';
+import { module, test } from 'qunit';
+
+import type { Loader } from '@cardstack/runtime-common';
+
+import {
+  CardDef,
+  Component,
+  CSSField,
+  contains,
+  field,
+  MarkdownField,
+  MaybeBase64Field,
+  NumberField,
+  ReadOnlyField,
+  setupBaseRealm,
+  StringField,
+  TextAreaField,
+} from '../../helpers/base-realm';
+import { renderCard } from '../../helpers/render-component';
+import { setupRenderingTest } from '../../helpers/setup';
+
+// Verifies the default `static markdown` templates for primitive fields
+// (CS-10785). Each primitive renders through a CardDef wrapper whose
+// `isolated` template invokes `<@fields.foo @format='markdown' />`, placing
+// the markdown output inside a `[data-test-md]` container we query for the
+// text.
+
+function readMarkdown(root: Element | Document): string {
+  let el = root.querySelector('[data-test-md]');
+  return (el?.textContent ?? '').trim();
+}
+
+module('Integration | field markdown primitives', function (hooks) {
+  setupRenderingTest(hooks);
+  setupBaseRealm(hooks);
+
+  let loader: Loader;
+
+  hooks.beforeEach(function (this: RenderingTestContext) {
+    loader = getService('loader-service').loader;
+  });
+
+  test('StringField markdown escapes metacharacters', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(StringField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+
+    let card = new Sample({ value: 'Hello *world* [link]' });
+    await renderCard(loader, card, 'isolated');
+
+    // markdownEscape backslash-escapes `*`, `[`, and `]`.
+    assert.strictEqual(
+      readMarkdown(this.element),
+      'Hello \\*world\\* \\[link\\]',
+    );
+  });
+
+  test('StringField markdown handles null/undefined gracefully', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(StringField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+
+    // No value set — field resolves to undefined/null; markdownEscape emits ''.
+    let card = new Sample();
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), '');
+  });
+
+  test('ReadOnlyField markdown escapes metacharacters', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(ReadOnlyField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+
+    let card = new Sample();
+    // ReadOnlyField is computed/assigned by the serializer normally; set via
+    // @field only to drive the template. `1.` at line-start would normally
+    // read as an ordered list marker — the escape prevents that.
+    (card as any).value = '1. Item';
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), '1\\. Item');
+  });
+
+  test('NumberField markdown emits the number as text', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(NumberField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+
+    let card = new Sample({ value: 42 });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), '42');
+  });
+
+  test('NumberField markdown handles negative and decimal values', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(NumberField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+
+    // `-3.14` → leading `-` would look like a bullet marker at line start,
+    // so `markdownEscape` emits `\-`. The `.` mid-string doesn't need
+    // escaping because the digits aren't at line start once the `\-` is
+    // emitted (numeric-list-prefix detection is line-anchored).
+    let card = new Sample({ value: -3.14 });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), '\\-3.14');
+  });
+
+  test('TextAreaField markdown preserves line breaks as CommonMark hard breaks', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(TextAreaField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+
+    let card = new Sample({ value: 'Line 1\nLine 2\nLine 3' });
+    await renderCard(loader, card, 'isolated');
+
+    // The FieldComponent wrapper chain (CardContextConsumer →
+    // CardCrudFunctionsConsumer → ... → DefaultFormatsProvider → Markdown)
+    // pads the rendered content with leading/trailing whitespace from each
+    // wrapping `<template>`. Trim that off and verify the inner content,
+    // including the two-space-then-newline hard breaks our template emits.
+    assert.strictEqual(
+      readMarkdown(this.element),
+      'Line 1  \nLine 2  \nLine 3',
+    );
+  });
+
+  test('TextAreaField markdown escapes metacharacters per line', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(TextAreaField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+
+    let card = new Sample({ value: '# not a heading\n* not a bullet' });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(
+      readMarkdown(this.element),
+      '\\# not a heading  \n\\* not a bullet',
+    );
+  });
+
+  test('MarkdownField passes through content unescaped', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(MarkdownField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+
+    // The author's markdown must survive interpolation unchanged — no double
+    // escaping. Downstream consumers render it as markdown.
+    let card = new Sample({ value: '# Heading\n\n- item 1\n- item 2' });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(
+      readMarkdown(this.element),
+      '# Heading\n\n- item 1\n- item 2',
+    );
+  });
+
+  test('CSSField markdown emits a fenced code block with css info-string', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field styles = contains(CSSField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.styles @format='markdown' /></div>
+        </template>
+      };
+    }
+
+    let card = new Sample({ styles: '.foo { color: red; }' });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(
+      readMarkdown(this.element),
+      '```css\n.foo { color: red; }\n```',
+    );
+  });
+
+  test('CSSField markdown extends the fence when content contains triple backticks', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field styles = contains(CSSField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.styles @format='markdown' /></div>
+        </template>
+      };
+    }
+
+    // Pathological input: a comment with the literal fence sequence. The
+    // emitter bumps the fence width so the block is still syntactically
+    // well-formed.
+    let weird = '/* ' + '`'.repeat(3) + ' */';
+    let card = new Sample({ styles: weird });
+    await renderCard(loader, card, 'isolated');
+    let fence = '`'.repeat(4);
+    assert.strictEqual(
+      readMarkdown(this.element),
+      `${fence}css\n${weird}\n${fence}`,
+    );
+  });
+
+  test('MaybeBase64Field markdown emits placeholder for data: URIs', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field thumbnail = contains(MaybeBase64Field);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.thumbnail @format='markdown' /></div>
+        </template>
+      };
+    }
+
+    let card = new Sample({
+      thumbnail: 'data:image/png;base64,iVBORw0KGgoAAAANSU',
+    });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), '[binary content]');
+  });
+
+  test('MaybeBase64Field markdown falls back to escaped text for non-base64 values', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field thumbnail = contains(MaybeBase64Field);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.thumbnail @format='markdown' /></div>
+        </template>
+      };
+    }
+
+    let card = new Sample({ thumbnail: 'https://example.com/a*b.png' });
+    await renderCard(loader, card, 'isolated');
+    // `*` is escaped; `https://...` is left as-is (`:` and `/` are not
+    // markdown metacharacters).
+    assert.strictEqual(
+      readMarkdown(this.element),
+      'https://example.com/a\\*b.png',
+    );
+  });
+
+  test('all primitives compose into a single markdown document', async function (this: RenderingTestContext, assert) {
+    class Everything extends CardDef {
+      @field name = contains(StringField);
+      @field count = contains(NumberField);
+      @field notes = contains(TextAreaField);
+      @field body = contains(MarkdownField);
+      @field styles = contains(CSSField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md>
+            Name:
+            <@fields.name @format='markdown' />
+            Count:
+            <@fields.count @format='markdown' />
+            Notes:
+            <@fields.notes @format='markdown' />
+            Body:
+            <@fields.body @format='markdown' />
+            CSS:
+            <@fields.styles @format='markdown' />
+          </div>
+        </template>
+      };
+    }
+
+    let card = new Everything({
+      name: 'Widget *v1*',
+      count: 7,
+      notes: 'line 1\nline 2',
+      body: '**bold** value',
+      styles: 'a { color: red }',
+    });
+    await renderCard(loader, card, 'isolated');
+
+    let el = this.element.querySelector('[data-test-md]');
+    let raw = el?.textContent ?? '';
+    // Ensure each field's characteristic output appears. Whitespace between
+    // labels is template-driven and not meaningful — the key thing is that
+    // each primitive rendered its markdown rather than its HTML template.
+    assert.ok(raw.includes('Widget \\*v1\\*'), `StringField escape: ${raw}`);
+    assert.ok(raw.includes('7'), `NumberField value: ${raw}`);
+    assert.ok(raw.includes('line 1  \nline 2'), `TextArea hard-break: ${raw}`);
+    assert.ok(
+      raw.includes('**bold** value'),
+      `MarkdownField passthrough: ${raw}`,
+    );
+    assert.ok(
+      raw.includes('```css\na { color: red }\n```'),
+      `CSSField fenced block: ${raw}`,
+    );
+  });
+});
diff --git a/packages/host/tests/integration/components/field-markdown-specialized-test.gts b/packages/host/tests/integration/components/field-markdown-specialized-test.gts
new file mode 100644
index 00000000000..81b7248fa13
--- /dev/null
+++ b/packages/host/tests/integration/components/field-markdown-specialized-test.gts
@@ -0,0 +1,457 @@
+import type { RenderingTestContext } from '@ember/test-helpers';
+
+import { getService } from '@universal-ember/test-support';
+import { module, test } from 'qunit';
+
+import { baseRealm, type Loader } from '@cardstack/runtime-common';
+
+import type * as AddressFieldModule from 'https://cardstack.com/base/address';
+import type * as ColorFieldModule from 'https://cardstack.com/base/color';
+import type * as CoordinateFieldModule from 'https://cardstack.com/base/coordinate';
+import type * as CountryFieldModule from 'https://cardstack.com/base/country';
+import type * as DateRangeFieldModule from 'https://cardstack.com/base/date-range-field';
+import type * as LLMModelFieldModule from 'https://cardstack.com/base/llm-model';
+import type * as PercentageFieldModule from 'https://cardstack.com/base/percentage';
+import type * as UrlFieldModule from 'https://cardstack.com/base/url';
+import type * as WebsiteFieldModule from 'https://cardstack.com/base/website';
+
+import {
+  BigIntegerField,
+  BooleanField,
+  CardDef,
+  CodeRefField,
+  Component,
+  DateField,
+  DateTimeField,
+  EmailField,
+  EthereumAddressField,
+  PhoneNumberField,
+  RichMarkdownField,
+  contains,
+  field,
+  setupBaseRealm,
+} from '../../helpers/base-realm';
+import { renderCard } from '../../helpers/render-component';
+import { setupRenderingTest } from '../../helpers/setup';
+
+// Verifies the explicit `static markdown` templates added per CS-10786 to
+// specialized fields. Each primitive/composite field renders through a
+// CardDef wrapper whose `isolated` template invokes `<@fields.foo
+// @format='markdown' />` placing the markdown output inside a
+// `[data-test-md]` container we query for the text.
+
+function readMarkdown(root: Element | Document): string {
+  let el = root.querySelector('[data-test-md]');
+  return (el?.textContent ?? '').trim();
+}
+
+module('Integration | field markdown specialized', function (hooks) {
+  setupRenderingTest(hooks);
+  setupBaseRealm(hooks);
+
+  let loader: Loader;
+  let AddressField: typeof AddressFieldModule.default;
+  let ColorField: typeof ColorFieldModule.default;
+  let CoordinateField: typeof CoordinateFieldModule.default;
+  let CountryField: typeof CountryFieldModule.default;
+  let DateRangeField: typeof DateRangeFieldModule.default;
+  let LLMModelField: typeof LLMModelFieldModule.default;
+  let PercentageField: typeof PercentageFieldModule.default;
+  let UrlField: typeof UrlFieldModule.default;
+  let WebsiteField: typeof WebsiteFieldModule.default;
+
+  hooks.beforeEach(async function (this: RenderingTestContext) {
+    loader = getService('loader-service').loader;
+    AddressField = (
+      await loader.import<typeof AddressFieldModule>(`${baseRealm.url}address`)
+    ).default;
+    ColorField = (
+      await loader.import<typeof ColorFieldModule>(`${baseRealm.url}color`)
+    ).default;
+    CoordinateField = (
+      await loader.import<typeof CoordinateFieldModule>(
+        `${baseRealm.url}coordinate`,
+      )
+    ).default;
+    CountryField = (
+      await loader.import<typeof CountryFieldModule>(`${baseRealm.url}country`)
+    ).default;
+    DateRangeField = (
+      await loader.import<typeof DateRangeFieldModule>(
+        `${baseRealm.url}date-range-field`,
+      )
+    ).default;
+    LLMModelField = (
+      await loader.import<typeof LLMModelFieldModule>(
+        `${baseRealm.url}llm-model`,
+      )
+    ).default;
+    PercentageField = (
+      await loader.import<typeof PercentageFieldModule>(
+        `${baseRealm.url}percentage`,
+      )
+    ).default;
+    UrlField = (
+      await loader.import<typeof UrlFieldModule>(`${baseRealm.url}url`)
+    ).default;
+    WebsiteField = (
+      await loader.import<typeof WebsiteFieldModule>(`${baseRealm.url}website`)
+    ).default;
+  });
+
+  // ---- Date family -----------------------------------------------------
+
+  test('DateField markdown emits consistently-formatted escaped text', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(DateField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    // Construct a UTC midnight date that will format in en-US as a specific
+    // day-month-year regardless of the runner's timezone by using a local
+    // constructor that matches the shared formatter's assumptions.
+    let card = new Sample({ value: new Date(2026, 3, 15) });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), 'Apr 15, 2026');
+  });
+
+  test('DateField markdown emits empty string for null/invalid', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(DateField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample();
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), '');
+  });
+
+  test('DateTimeField markdown includes hour/minute', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(DateTimeField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({ value: new Date(2026, 3, 15, 14, 30) });
+    await renderCard(loader, card, 'isolated');
+    // The shared en-US formatter with hour12 yields "Apr 15, 2026, 2:30 PM".
+    // We just verify the date and time components are present and escaped
+    // (commas aren't markdown metacharacters, so no escaping needed).
+    let text = readMarkdown(this.element);
+    assert.true(
+      text.includes('Apr 15, 2026'),
+      `expected date portion in: ${text}`,
+    );
+    assert.true(text.includes('2:30'), `expected time portion in: ${text}`);
+  });
+
+  test('DateRangeField markdown joins start/end with a dash', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(DateRangeField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({
+      value: new DateRangeField({
+        start: new Date(2026, 3, 1),
+        end: new Date(2026, 3, 30),
+      }),
+    });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(
+      readMarkdown(this.element),
+      'Apr 1, 2026 - Apr 30, 2026',
+    );
+  });
+
+  // ---- Simple scalars --------------------------------------------------
+
+  test('BooleanField markdown emits the boolean literal', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(BooleanField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({ value: true });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), 'true');
+  });
+
+  test('BigIntegerField markdown escapes leading minus sign', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(BigIntegerField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({ value: -12345678901234567890n });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), '\\-12345678901234567890');
+  });
+
+  test('PhoneNumberField markdown emits a tel: link when parseable', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(PhoneNumberField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({ value: '+14155551234' });
+    await renderCard(loader, card, 'isolated');
+    let text = readMarkdown(this.element);
+    assert.true(text.startsWith('['), `expected link open: ${text}`);
+    assert.true(text.includes('](tel:'), `expected tel: href in link: ${text}`);
+    assert.true(
+      text.includes('+1 415'),
+      `expected international formatted text: ${text}`,
+    );
+  });
+
+  test('ColorField markdown escapes leading # heading marker', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(ColorField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({ value: '#ff00ff' });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), '\\#ff00ff');
+  });
+
+  test('PercentageField markdown formats and escapes', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(PercentageField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({ value: 42.5 });
+    await renderCard(loader, card, 'isolated');
+    // `%` is not a markdown metacharacter, but the `42.` at line start
+    // would look like an ordered-list marker, so `markdownEscape` emits
+    // `42\.5%`.
+    assert.strictEqual(readMarkdown(this.element), '42\\.5%');
+  });
+
+  test('CountryField markdown emits the country name', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(CountryField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({
+      value: new CountryField({ name: 'United States', code: 'US' }),
+    });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), 'United States');
+  });
+
+  test('LLMModelField markdown prefers the display label', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(LLMModelField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    // An unknown id falls back to the id itself, escaped — the `-`
+    // would otherwise read as a bullet marker at line start.
+    let card = new Sample({ value: 'custom/model-id' });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), 'custom/model\\-id');
+  });
+
+  test('EthereumAddressField markdown escapes its value', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(EthereumAddressField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({
+      value: '0x0000000000000000000000000000000000000001',
+    });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(
+      readMarkdown(this.element),
+      '0x0000000000000000000000000000000000000001',
+    );
+  });
+
+  // ---- URL / link fields ----------------------------------------------
+
+  test('EmailField markdown emits a mailto link', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(EmailField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({ value: 'alice@example.com' });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(
+      readMarkdown(this.element),
+      '[alice@example.com](mailto:alice@example.com)',
+    );
+  });
+
+  test('UrlField markdown emits a bracketed link with encoded href', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(UrlField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({ value: 'https://example.com/path with space' });
+    await renderCard(loader, card, 'isolated');
+    let text = readMarkdown(this.element);
+    // href gets `%20` for the space; text escapes nothing since `/`, `:`
+    // aren't metacharacters.
+    assert.strictEqual(
+      text,
+      '[https://example.com/path with space](https://example.com/path%20with%20space)',
+    );
+  });
+
+  test('UrlField markdown falls back to escaped text for invalid URL', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(UrlField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({ value: 'not a *url*' });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), 'not a \\*url\\*');
+  });
+
+  test('WebsiteField markdown shows domain/path text with full-URL href', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(WebsiteField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({ value: 'https://example.com/docs/api' });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(
+      readMarkdown(this.element),
+      '[example.com/docs/api](https://example.com/docs/api)',
+    );
+  });
+
+  // ---- Composite fields -----------------------------------------------
+
+  test('AddressField markdown renders rows with hard breaks', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(AddressField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({
+      value: new AddressField({
+        addressLine1: '123 Main St',
+        city: 'Springfield',
+        state: 'IL',
+        postalCode: '62701',
+      }),
+    });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(
+      readMarkdown(this.element),
+      '123 Main St  \nSpringfield, IL, 62701',
+    );
+  });
+
+  test('CoordinateField markdown formats (x, y) with escaped components', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(CoordinateField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({
+      value: new CoordinateField({ x: -1.5, y: 2 }),
+    });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), '(\\-1.5, 2)');
+  });
+
+  test('CodeRefField markdown emits an inline code span', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(CodeRefField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({
+      value: { module: 'https://cardstack.com/base/string', name: 'default' },
+    });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(
+      readMarkdown(this.element),
+      '`https://cardstack.com/base/string/default`',
+    );
+  });
+
+  test('RichMarkdownField markdown passes content through unescaped', async function (this: RenderingTestContext, assert) {
+    class Sample extends CardDef {
+      @field value = contains(RichMarkdownField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div data-test-md><@fields.value @format='markdown' /></div>
+        </template>
+      };
+    }
+    let card = new Sample({
+      value: new RichMarkdownField({ content: '# Heading\n\n- item' }),
+    });
+    await renderCard(loader, card, 'isolated');
+    assert.strictEqual(readMarkdown(this.element), '# Heading\n\n- item');
+  });
+});
diff --git a/packages/host/tests/integration/components/markdown-fallback-test.gts b/packages/host/tests/integration/components/markdown-fallback-test.gts
new file mode 100644
index 00000000000..ae6bb436369
--- /dev/null
+++ b/packages/host/tests/integration/components/markdown-fallback-test.gts
@@ -0,0 +1,402 @@
+import type { RenderingTestContext } from '@ember/test-helpers';
+import { settled } from '@ember/test-helpers';
+
+import { getService } from '@universal-ember/test-support';
+import { module, test } from 'qunit';
+
+import type { Loader } from '@cardstack/runtime-common';
+
+import { cleanWhiteSpace } from '../../helpers';
+import {
+  CardDef,
+  Component,
+  contains,
+  field,
+  FieldDef,
+  setupBaseRealm,
+  StringField,
+} from '../../helpers/base-realm';
+import { renderCard } from '../../helpers/render-component';
+import { setupRenderingTest } from '../../helpers/setup';
+
+// Verifies the default `static markdown` fallback wired into CardDef/FieldDef/
+// FileDef (CS-10784). The fallback renders the HTML embedded/isolated template
+// into a hidden source container and converts it to markdown via the
+// `globalThis.__boxelHtmlToMarkdown` function registered by
+// `packages/host/app/instance-initializers/register-html-to-markdown.ts`. The
+// resulting markdown is emitted into `[data-markdown-output]`, which is what
+// the prerender pipeline targets for textContent capture.
+
+async function renderAndConvert(loader: Loader, card: any) {
+  await renderCard(loader, card, 'markdown');
+  // The capture modifier defers conversion to `scheduleOnce('afterRender')`
+  // and then mutates `@tracked markdown`, triggering a follow-up render.
+  // `renderCard` awaits an initial settle, but we need one more tick for the
+  // modifier-triggered re-render to land in the DOM.
+  await settled();
+}
+
+function readMarkdownOutput(): string {
+  let el = document.querySelector('[data-markdown-output]');
+  return cleanWhiteSpace(el?.textContent ?? '');
+}
+
+module('Integration | markdown-fallback', function (hooks) {
+  setupRenderingTest(hooks);
+  setupBaseRealm(hooks);
+
+  let loader: Loader;
+
+  hooks.beforeEach(function (this: RenderingTestContext) {
+    loader = getService('loader-service').loader;
+  });
+
+  test('CardDef default fallback converts HTML headings to ATX markdown', async function (assert) {
+    class Article extends CardDef {
+      @field title = contains(StringField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <h1>{{@model.title}}</h1>
+          <h2>Subtitle</h2>
+          <p>Body paragraph.</p>
+        </template>
+      };
+    }
+
+    let card = new Article({ title: 'Hello' });
+    await renderAndConvert(loader, card);
+
+    let md = readMarkdownOutput();
+    assert.true(md.includes('# Hello'), `expected '# Hello' in: ${md}`);
+    assert.true(md.includes('## Subtitle'), `expected '## Subtitle' in: ${md}`);
+    assert.true(
+      md.includes('Body paragraph.'),
+      `expected 'Body paragraph.' in: ${md}`,
+    );
+  });
+
+  test('CardDef default fallback converts unordered & ordered lists', async function (assert) {
+    class List extends CardDef {
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <ul>
+            <li>alpha</li>
+            <li>beta</li>
+          </ul>
+          <ol>
+            <li>one</li>
+            <li>two</li>
+          </ol>
+        </template>
+      };
+    }
+
+    let card = new List();
+    await renderAndConvert(loader, card);
+    let md = readMarkdownOutput();
+
+    // bulletListMarker is configured as `-`.
+    assert.true(md.includes('- alpha'), `expected '- alpha' in: ${md}`);
+    assert.true(md.includes('- beta'), `expected '- beta' in: ${md}`);
+    assert.true(md.includes('1. one'), `expected '1. one' in: ${md}`);
+    assert.true(md.includes('2. two'), `expected '2. two' in: ${md}`);
+  });
+
+  test('CardDef default fallback converts links and inline code', async function (assert) {
+    class Link extends CardDef {
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <p>See
+            <a href='https://example.com'>example</a>
+            and use
+            <code>npm install</code>.</p>
+        </template>
+      };
+    }
+
+    let card = new Link();
+    await renderAndConvert(loader, card);
+    let md = readMarkdownOutput();
+
+    assert.true(
+      md.includes('[example](https://example.com)'),
+      `expected inlined link in: ${md}`,
+    );
+    assert.true(
+      md.includes('`npm install`'),
+      `expected backtick inline code in: ${md}`,
+    );
+  });
+
+  test('CardDef default fallback collapses whitespace in link text from nested elements', async function (assert) {
+    // Card HTML often wraps link text in icon spans + text nodes with newlines
+    // between them.  Turndown would preserve those newlines, producing broken
+    // multiline `[\n  Contact](url)` markdown.  The compactLinks rule collapses
+    // whitespace so links render correctly.
+    class ContactCard extends CardDef {
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <a href='mailto:alice@example.com'>
+            <span class='icon'>📧</span>
+            Contact
+          </a>
+          <a href='https://x.com/alice'>
+            <span class='icon'>🐦</span>
+            Follow
+          </a>
+        </template>
+      };
+    }
+
+    let card = new ContactCard();
+    await renderAndConvert(loader, card);
+    let md = readMarkdownOutput();
+
+    assert.true(
+      md.includes('[📧 Contact](mailto:alice@example.com)'),
+      `expected collapsed link text in: ${md}`,
+    );
+    assert.true(
+      md.includes('[🐦 Follow](https://x.com/alice)'),
+      `expected collapsed follow link in: ${md}`,
+    );
+  });
+
+  test('CardDef default fallback converts <pre><code> to fenced code blocks', async function (assert) {
+    class Snippet extends CardDef {
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <pre><code class='language-js'>let x = 1;</code></pre>
+        </template>
+      };
+    }
+
+    let card = new Snippet();
+    await renderAndConvert(loader, card);
+    let md = readMarkdownOutput();
+
+    // codeBlockStyle: 'fenced' — turndown emits triple-backtick fences. The
+    // `language-js` class becomes the fence info-string.
+    assert.true(md.includes('```'), `expected fenced code in: ${md}`);
+    assert.true(md.includes('let x = 1;'), `expected code body in: ${md}`);
+  });
+
+  test('CardDef subclass override of `static markdown` wins over the fallback', async function (this: RenderingTestContext, assert) {
+    class Custom extends CardDef {
+      @field title = contains(StringField);
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <h1>HTML title would convert to # but should NOT be used</h1>
+        </template>
+      };
+      // Authoring markdown directly — no HTML conversion involved. The
+      // fallback's hidden source container should not appear in the output.
+      static markdown = class extends Component<typeof this> {
+        <template># {{@model.title}} (authored)</template>
+      };
+    }
+
+    let card = new Custom({ title: 'Override' });
+    await renderCard(loader, card, 'markdown');
+
+    // No fallback container should be present when the subclass overrides.
+    assert
+      .dom('[data-markdown-fallback-source]')
+      .doesNotExist('fallback source container should not render');
+    assert
+      .dom('[data-markdown-output]')
+      .doesNotExist('fallback output container should not render');
+
+    // The render route wraps format='markdown' in [data-markdown-render-container],
+    // but that wrapper is route-only (packages/host/app/templates/render/html.gts).
+    // In rendering tests we query the root test element directly — the authored
+    // markdown is the only text content in the render.
+    let text = cleanWhiteSpace(this.element.textContent ?? '');
+    assert.strictEqual(text, '# Override (authored)');
+  });
+
+  test('FieldDef default fallback converts the embedded template to markdown', async function (assert) {
+    // FieldDef has no `isolated` slot — only `embedded`. The fallback picks
+    // the right slot dynamically based on `cls.isFieldDef`, so the embedded
+    // HTML is what gets converted.
+    class Greeting extends FieldDef {
+      @field name = contains(StringField);
+      static embedded = class extends Component<typeof this> {
+        <template>
+          <strong>Hello, {{@model.name}}!</strong>
+        </template>
+      };
+    }
+
+    class Wrapper extends CardDef {
+      @field greeting = contains(Greeting);
+      static isolated = class extends Component<typeof this> {
+        <template><@fields.greeting @format='markdown' /></template>
+      };
+    }
+
+    let card = new Wrapper({ greeting: new Greeting({ name: 'World' }) });
+    // Render the wrapper at isolated; the inner @fields.greeting is rendered
+    // at markdown via the explicit @format prop, exercising the FieldDef
+    // fallback path.
+    await renderCard(loader, card, 'isolated');
+    await settled();
+
+    let md = readMarkdownOutput();
+    // strongDelimiter is configured as `**`.
+    assert.true(
+      md.includes('**Hello, World!**'),
+      `expected bolded greeting in: ${md}`,
+    );
+  });
+
+  test('default fallback exposes data-markdown-output for prerender capture', async function (assert) {
+    class Simple extends CardDef {
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <p>plain text</p>
+        </template>
+      };
+    }
+
+    let card = new Simple();
+    await renderAndConvert(loader, card);
+
+    assert
+      .dom('[data-markdown-output]')
+      .exists('the prerender textContent target is present');
+    // The hidden source container should also exist (modifier reads from it),
+    // and `display: none` keeps it out of the visual layout — but `textContent`
+    // would still include its text, which is exactly why the prerender pipeline
+    // queries `[data-markdown-output]` specifically (see prerender/utils.ts).
+    assert
+      .dom('[data-markdown-fallback-source]')
+      .exists('hidden source container is present for the modifier to read');
+  });
+
+  test('default fallback strips style and script elements from markdown output', async function (assert) {
+    class StyledCard extends CardDef {
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <style scoped>
+            .foo {
+              color: red;
+            }
+          </style>
+          <p>visible content</p>
+        </template>
+      };
+    }
+
+    let card = new StyledCard();
+    await renderAndConvert(loader, card);
+
+    let md = readMarkdownOutput();
+    assert.true(
+      md.includes('visible content'),
+      `expected visible content in: ${md}`,
+    );
+    assert.false(
+      md.includes('.foo'),
+      `CSS should be stripped from markdown: ${md}`,
+    );
+    assert.false(
+      md.includes('color: red'),
+      `CSS rules should be stripped from markdown: ${md}`,
+    );
+  });
+
+  test('atom-format card container converts to inline :card directive', async function (assert) {
+    const cardId = 'http://example.com/author/1';
+    class WithAtomCard extends CardDef {
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <p>Written by
+            <div
+              class='boxel-card-container atom-format'
+              data-boxel-card-id={{cardId}}
+              data-boxel-card-format='atom'
+            >
+              <span>Author Name</span>
+            </div>
+          </p>
+        </template>
+      };
+    }
+
+    let card = new WithAtomCard();
+    await renderAndConvert(loader, card);
+    let md = readMarkdownOutput();
+
+    assert.true(
+      md.includes(`:card[${cardId}]`),
+      `expected inline :card directive in: ${md}`,
+    );
+    assert.false(
+      md.includes('Author Name'),
+      `card container inner content should not appear in: ${md}`,
+    );
+  });
+
+  test('embedded-format card container converts to block ::card directive', async function (assert) {
+    const cardId = 'http://example.com/article/42';
+    class WithEmbeddedCard extends CardDef {
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <h1>Summary</h1>
+          <div
+            class='boxel-card-container embedded-format'
+            data-boxel-card-id={{cardId}}
+            data-boxel-card-format='embedded'
+          >
+            <h2>Embedded Article Title</h2>
+            <p>Some preview text</p>
+          </div>
+        </template>
+      };
+    }
+
+    let card = new WithEmbeddedCard();
+    await renderAndConvert(loader, card);
+    let md = readMarkdownOutput();
+
+    assert.true(
+      md.includes(`::card[${cardId}]`),
+      `expected block ::card directive in: ${md}`,
+    );
+    assert.false(
+      md.includes('Embedded Article Title'),
+      `card container inner content should not appear in: ${md}`,
+    );
+  });
+
+  test('fitted-format card container converts to block ::card directive', async function (assert) {
+    const cardId = 'http://example.com/person/7';
+    class WithFittedCard extends CardDef {
+      static isolated = class extends Component<typeof this> {
+        <template>
+          <div
+            class='boxel-card-container fitted-format'
+            data-boxel-card-id={{cardId}}
+            data-boxel-card-format='fitted'
+          >
+            <span>Person Name</span>
+          </div>
+        </template>
+      };
+    }
+
+    let card = new WithFittedCard();
+    await renderAndConvert(loader, card);
+    let md = readMarkdownOutput();
+
+    assert.true(
+      md.includes(`::card[${cardId}]`),
+      `expected block ::card directive in: ${md}`,
+    );
+    assert.false(
+      md.includes('Person Name'),
+      `card container inner content should not appear in: ${md}`,
+    );
+  });
+});
diff --git a/packages/host/tests/integration/components/markdown-preview-test.gts b/packages/host/tests/integration/components/markdown-preview-test.gts
new file mode 100644
index 00000000000..2ca8773568c
--- /dev/null
+++ b/packages/host/tests/integration/components/markdown-preview-test.gts
@@ -0,0 +1,236 @@
+import Service from '@ember/service';
+import { click, settled, waitFor } from '@ember/test-helpers';
+
+import GlimmerComponent from '@glimmer/component';
+
+import { getService } from '@universal-ember/test-support';
+import { module, test } from 'qunit';
+
+import { baseRealm } from '@cardstack/runtime-common';
+import type { Loader } from '@cardstack/runtime-common/loader';
+
+import MarkdownPreview from '@cardstack/host/components/operator-mode/preview-panel/markdown-preview';
+
+import { testRealmURL } from '../../helpers';
+import { renderComponent } from '../../helpers/render-component';
+import { setupRenderingTest } from '../../helpers/setup';
+
+let cardApi: typeof import('https://cardstack.com/base/card-api');
+let string: typeof import('https://cardstack.com/base/string');
+
+class MockLocalIndexer extends Service {
+  url = new URL(testRealmURL);
+}
+
+module('Integration | markdown-preview', function (hooks) {
+  let loader: Loader;
+  setupRenderingTest(hooks);
+
+  hooks.beforeEach(async function () {
+    loader = getService('loader-service').loader;
+    cardApi = await loader.import(`${baseRealm.url}card-api`);
+    string = await loader.import(`${baseRealm.url}string`);
+    this.owner.register('service:local-indexer', MockLocalIndexer);
+  });
+
+  test('defaults to source view showing raw markdown text', async function (assert) {
+    let { field, contains, CardDef, Component } = cardApi;
+    let { default: StringField } = string;
+
+    class TestCard extends CardDef {
+      @field title = contains(StringField);
+      static markdown = class extends Component<typeof this> {
+        <template># {{@model.title}}</template>
+      };
+    }
+
+    loader.shimModule(`${testRealmURL}test-cards`, { TestCard });
+    let card = new TestCard({ title: 'Hello World' });
+
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><MarkdownPreview @card={{card}} /></template>
+      },
+    );
+    await settled();
+
+    assert
+      .dom('[data-test-markdown-preview]')
+      .exists('markdown preview container renders');
+    assert
+      .dom('[data-test-markdown-view-toggle]')
+      .exists('view toggle renders');
+    assert
+      .dom('[data-test-markdown-view="source"]')
+      .hasAttribute(
+        'aria-pressed',
+        'true',
+        'source button is pressed by default',
+      );
+    assert
+      .dom('[data-test-markdown-view="rendered"]')
+      .hasAttribute(
+        'aria-pressed',
+        'false',
+        'rendered button is not pressed by default',
+      );
+    assert
+      .dom('[data-test-markdown-source]')
+      .exists('source view is displayed by default');
+    assert
+      .dom('[data-test-markdown-rendered]')
+      .doesNotExist('rendered view is not displayed by default');
+  });
+
+  test('toggling to rendered view shows HTML-rendered markdown', async function (assert) {
+    let { field, contains, CardDef, Component } = cardApi;
+    let { default: StringField } = string;
+
+    class TestCard extends CardDef {
+      @field title = contains(StringField);
+      static markdown = class extends Component<typeof this> {
+        <template># {{@model.title}}</template>
+      };
+    }
+
+    loader.shimModule(`${testRealmURL}test-cards`, { TestCard });
+    let card = new TestCard({ title: 'Hello World' });
+
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><MarkdownPreview @card={{card}} /></template>
+      },
+    );
+    await settled();
+
+    await click('[data-test-markdown-view="rendered"]');
+
+    assert
+      .dom('[data-test-markdown-view="rendered"]')
+      .hasAttribute('aria-pressed', 'true', 'rendered button is now pressed');
+    assert
+      .dom('[data-test-markdown-view="source"]')
+      .hasAttribute(
+        'aria-pressed',
+        'false',
+        'source button is no longer pressed',
+      );
+    assert
+      .dom('[data-test-markdown-rendered]')
+      .exists('rendered view is displayed');
+    assert
+      .dom('[data-test-markdown-source]')
+      .doesNotExist('source view is hidden');
+    assert
+      .dom('[data-test-markdown-rendered] h1')
+      .exists('markdown is rendered as HTML with heading');
+  });
+
+  test('toggling back to source view restores raw markdown', async function (assert) {
+    let { field, contains, CardDef, Component } = cardApi;
+    let { default: StringField } = string;
+
+    class TestCard extends CardDef {
+      @field title = contains(StringField);
+      static markdown = class extends Component<typeof this> {
+        <template># {{@model.title}}</template>
+      };
+    }
+
+    loader.shimModule(`${testRealmURL}test-cards`, { TestCard });
+    let card = new TestCard({ title: 'Hello World' });
+
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><MarkdownPreview @card={{card}} /></template>
+      },
+    );
+    await settled();
+
+    // Switch to rendered
+    await click('[data-test-markdown-view="rendered"]');
+    assert
+      .dom('[data-test-markdown-rendered]')
+      .exists('rendered view is displayed');
+
+    // Switch back to source
+    await click('[data-test-markdown-view="source"]');
+
+    assert
+      .dom('[data-test-markdown-view="source"]')
+      .hasAttribute('aria-pressed', 'true', 'source button is pressed again');
+    assert.dom('[data-test-markdown-source]').exists('source view is restored');
+    assert
+      .dom('[data-test-markdown-rendered]')
+      .doesNotExist('rendered view is hidden again');
+  });
+
+  test('source view captures markdown text from the card', async function (assert) {
+    let { field, contains, CardDef, Component } = cardApi;
+    let { default: StringField } = string;
+
+    class TestCard extends CardDef {
+      @field title = contains(StringField);
+      // prettier-ignore
+      static markdown = class extends Component<typeof this> {
+        <template># {{@model.title}}
+
+Some **bold** text.</template>
+      };
+    }
+
+    loader.shimModule(`${testRealmURL}test-cards`, { TestCard });
+    let card = new TestCard({ title: 'Test Title' });
+
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><MarkdownPreview @card={{card}} /></template>
+      },
+    );
+    await settled();
+
+    await waitFor('[data-test-markdown-source]');
+    let sourceText =
+      document
+        .querySelector('[data-test-markdown-source]')
+        ?.textContent?.trim() ?? '';
+    assert.true(
+      sourceText.includes('# Test Title'),
+      `source contains heading: ${sourceText}`,
+    );
+    assert.true(
+      sourceText.includes('**bold**'),
+      `source contains bold markdown syntax: ${sourceText}`,
+    );
+  });
+
+  test('rendered view converts markdown to HTML', async function (assert) {
+    let { field, contains, CardDef, Component } = cardApi;
+    let { default: StringField } = string;
+
+    class TestCard extends CardDef {
+      @field title = contains(StringField);
+      // prettier-ignore
+      static markdown = class extends Component<typeof this> {
+        <template># {{@model.title}}
+
+Some **bold** text.</template>
+      };
+    }
+
+    loader.shimModule(`${testRealmURL}test-cards`, { TestCard });
+    let card = new TestCard({ title: 'Test Title' });
+
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><MarkdownPreview @card={{card}} /></template>
+      },
+    );
+    await settled();
+
+    await click('[data-test-markdown-view="rendered"]');
+
+    assert.dom('[data-test-markdown-rendered] h1').hasText('Test Title');
+    assert.dom('[data-test-markdown-rendered] strong').hasText('bold');
+  });
+});
diff --git a/packages/host/tests/integration/components/rendered-markdown-test.gts b/packages/host/tests/integration/components/rendered-markdown-test.gts
new file mode 100644
index 00000000000..1660722091c
--- /dev/null
+++ b/packages/host/tests/integration/components/rendered-markdown-test.gts
@@ -0,0 +1,306 @@
+import Service from '@ember/service';
+import { settled, waitUntil } from '@ember/test-helpers';
+
+import GlimmerComponent from '@glimmer/component';
+
+import { module, test } from 'qunit';
+
+import RenderedMarkdown from '@cardstack/host/components/operator-mode/preview-panel/rendered-markdown';
+
+import { testRealmURL } from '../../helpers';
+import { renderComponent } from '../../helpers/render-component';
+import { setupRenderingTest } from '../../helpers/setup';
+
+class MockLocalIndexer extends Service {
+  url = new URL(testRealmURL);
+}
+
+module('Integration | rendered-markdown', function (hooks) {
+  setupRenderingTest(hooks);
+
+  hooks.beforeEach(function () {
+    this.owner.register('service:local-indexer', MockLocalIndexer);
+  });
+
+  test('renders basic markdown as HTML', async function (assert) {
+    let content = '# Hello World\n\nSome **bold** and _italic_ text.';
+
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><RenderedMarkdown @content={{content}} /></template>
+      },
+    );
+    await settled();
+
+    assert.dom('.markdown-content h1').hasText('Hello World');
+    assert.dom('.markdown-content strong').hasText('bold');
+    assert.dom('.markdown-content em').hasText('italic');
+  });
+
+  test('renders lists correctly', async function (assert) {
+    let content = '- alpha\n- beta\n\n1. one\n2. two';
+
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><RenderedMarkdown @content={{content}} /></template>
+      },
+    );
+    await settled();
+
+    assert.dom('.markdown-content ul').exists('unordered list renders');
+    assert.dom('.markdown-content ul li').exists({ count: 2 });
+    assert.dom('.markdown-content ol').exists('ordered list renders');
+    assert.dom('.markdown-content ol li').exists({ count: 2 });
+  });
+
+  test('renders links and code', async function (assert) {
+    let content = 'Visit [example](https://example.com) and use `npm install`.';
+
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><RenderedMarkdown @content={{content}} /></template>
+      },
+    );
+    await settled();
+
+    assert
+      .dom('.markdown-content a')
+      .hasAttribute('href', 'https://example.com');
+    assert.dom('.markdown-content a').hasText('example');
+    assert.dom('.markdown-content code').hasText('npm install');
+  });
+
+  test('wraps tables in scrollable wrapper', async function (assert) {
+    let content = '| Col A | Col B |\n| --- | --- |\n| 1 | 2 |';
+
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><RenderedMarkdown @content={{content}} /></template>
+      },
+    );
+    await settled();
+
+    assert
+      .dom('.markdown-content .table-wrapper')
+      .exists('table is inside scrollable wrapper');
+    assert
+      .dom('.markdown-content .table-wrapper table')
+      .exists('table renders inside wrapper');
+  });
+
+  test('inline :card[URL] creates BFM placeholder element', async function (assert) {
+    let cardUrl = 'http://example.com/Author/abc123';
+    let content = `Written by :card[${cardUrl}].`;
+
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><RenderedMarkdown @content={{content}} /></template>
+      },
+    );
+    await settled();
+
+    assert
+      .dom('.markdown-content [data-boxel-bfm-inline-ref]')
+      .exists('inline BFM placeholder element is created');
+    assert
+      .dom(`.markdown-content [data-boxel-bfm-inline-ref="${cardUrl}"]`)
+      .exists('placeholder has correct card URL in data attribute');
+    assert
+      .dom(
+        '.markdown-content [data-boxel-bfm-inline-ref][data-boxel-bfm-type="card"]',
+      )
+      .exists('placeholder has card type attribute');
+  });
+
+  test('block ::card[URL] creates BFM placeholder element', async function (assert) {
+    let cardUrl = 'http://example.com/Article/def456';
+    let content = `# Summary\n\n::card[${cardUrl}]\n\nMore text.`;
+
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><RenderedMarkdown @content={{content}} /></template>
+      },
+    );
+    await settled();
+
+    assert
+      .dom('.markdown-content [data-boxel-bfm-block-ref]')
+      .exists('block BFM placeholder element is created');
+    assert
+      .dom(`.markdown-content [data-boxel-bfm-block-ref="${cardUrl}"]`)
+      .exists('placeholder has correct card URL in data attribute');
+    assert
+      .dom(
+        '.markdown-content [data-boxel-bfm-block-ref][data-boxel-bfm-type="card"]',
+      )
+      .exists('placeholder has card type attribute');
+  });
+
+  test('BFM card placeholders have URL text stripped', async function (assert) {
+    // The renderedHtml getter strips text from BFM card elements to prevent
+    // flashing raw URLs before cards load or pills render.
+    let cardUrl = 'http://example.com/Pet/ghi789';
+    let content = `See :card[${cardUrl}] here.`;
+
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><RenderedMarkdown @content={{content}} /></template>
+      },
+    );
+    await settled();
+
+    let el = document.querySelector(
+      `.markdown-content [data-boxel-bfm-inline-ref="${cardUrl}"]`,
+    );
+    assert.ok(el, 'placeholder element exists');
+    // Before the modifier runs and cards load, the element text is empty
+    // (stripped in renderedHtml). After the modifier, it may contain a pill
+    // or card component, but never the raw URL.
+    assert.false(
+      el?.textContent?.includes(cardUrl),
+      'raw card URL is not shown as text content',
+    );
+  });
+
+  test('unresolved card reference shows pill fallback', async function (assert) {
+    // When a card URL can't be loaded, the modifier creates an unresolved
+    // slot that renders a Pill with the type name extracted from the URL.
+    let cardUrl = 'http://nonexistent.example.com/Pet/unknown';
+    let content = `See :card[${cardUrl}] here.`;
+
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><RenderedMarkdown @content={{content}} /></template>
+      },
+    );
+    await settled();
+
+    // Wait for the card loading task to complete and the modifier to re-run.
+    // The store.get() call will fail for a non-existent URL, triggering the
+    // unresolved fallback path.
+    await waitUntil(
+      () =>
+        document.querySelector('[data-test-markdown-bfm-unresolved-inline]') !==
+        null,
+      { timeout: 5000, timeoutMessage: 'unresolved pill did not appear' },
+    );
+
+    assert
+      .dom('[data-test-markdown-bfm-unresolved-inline]')
+      .exists('unresolved inline pill renders');
+    assert
+      .dom('[data-test-markdown-bfm-unresolved-inline]')
+      .hasAttribute('title', cardUrl, 'pill has URL as title');
+    // cardTypeName extracts "Pet" from the URL path
+    assert
+      .dom('[data-test-markdown-bfm-unresolved-inline]')
+      .containsText('Pet', 'pill shows extracted type name');
+  });
+
+  test('unresolved block card reference shows pill fallback', async function (assert) {
+    let cardUrl = 'http://nonexistent.example.com/BlogPost/unknown';
+    let content = `# Title\n\n::card[${cardUrl}]\n\nEnd.`;
+
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><RenderedMarkdown @content={{content}} /></template>
+      },
+    );
+    await settled();
+
+    await waitUntil(
+      () =>
+        document.querySelector('[data-test-markdown-bfm-unresolved-block]') !==
+        null,
+      { timeout: 5000, timeoutMessage: 'unresolved block pill did not appear' },
+    );
+
+    assert
+      .dom('[data-test-markdown-bfm-unresolved-block]')
+      .exists('unresolved block pill renders');
+    assert
+      .dom('[data-test-markdown-bfm-unresolved-block]')
+      .hasAttribute('title', cardUrl, 'pill has URL as title');
+    assert
+      .dom('[data-test-markdown-bfm-unresolved-block]')
+      .containsText('BlogPost', 'pill shows extracted type name');
+  });
+
+  test('multiple card references create separate placeholders', async function (assert) {
+    let url1 = 'http://example.com/Author/a1';
+    let url2 = 'http://example.com/Article/a2';
+    let content = `By :card[${url1}]\n\n::card[${url2}]`;
+
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><RenderedMarkdown @content={{content}} /></template>
+      },
+    );
+    await settled();
+
+    assert
+      .dom('.markdown-content [data-boxel-bfm-inline-ref]')
+      .exists({ count: 1 }, 'one inline placeholder');
+    assert
+      .dom('.markdown-content [data-boxel-bfm-block-ref]')
+      .exists({ count: 1 }, 'one block placeholder');
+    assert
+      .dom(`[data-boxel-bfm-inline-ref="${url1}"]`)
+      .exists('inline ref has correct URL');
+    assert
+      .dom(`[data-boxel-bfm-block-ref="${url2}"]`)
+      .exists('block ref has correct URL');
+  });
+
+  test('card references inside code blocks are not converted', async function (assert) {
+    let content =
+      '```\n:card[http://example.com/Foo/1]\n```\n\nReal ref: :card[http://example.com/Bar/2]';
+
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><RenderedMarkdown @content={{content}} /></template>
+      },
+    );
+    await settled();
+
+    // Only one BFM placeholder should exist — the one outside the code block.
+    assert
+      .dom('.markdown-content [data-boxel-bfm-inline-ref]')
+      .exists({ count: 1 }, 'only the non-code-block reference is converted');
+    assert
+      .dom('[data-boxel-bfm-inline-ref="http://example.com/Bar/2"]')
+      .exists('the correct reference is converted');
+  });
+
+  test('block card reference with size spec sets data attributes', async function (assert) {
+    let cardUrl = 'http://example.com/Card/1';
+    let content = `::card[${cardUrl} | 400x200]`;
+
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><RenderedMarkdown @content={{content}} /></template>
+      },
+    );
+    await settled();
+
+    let el = document.querySelector(
+      `.markdown-content [data-boxel-bfm-block-ref="${cardUrl}"]`,
+    );
+    assert.ok(el, 'block placeholder exists');
+    assert.strictEqual(
+      el?.getAttribute('data-boxel-bfm-format'),
+      'fitted',
+      'format is set to fitted',
+    );
+    assert.strictEqual(
+      el?.getAttribute('data-boxel-bfm-width'),
+      '400',
+      'width is set',
+    );
+    assert.strictEqual(
+      el?.getAttribute('data-boxel-bfm-height'),
+      '200',
+      'height is set',
+    );
+  });
+});
diff --git a/packages/host/tests/integration/realm-indexing-test.gts b/packages/host/tests/integration/realm-indexing-test.gts
index f20fc00d612..23fa971755e 100644
--- a/packages/host/tests/integration/realm-indexing-test.gts
+++ b/packages/host/tests/integration/realm-indexing-test.gts
@@ -1811,6 +1811,8 @@ module(`Integration | realm indexing`, function (hooks) {
           class="ember-view boxel-card-container boxel-card-container--boundaries field-component-card embedded-format display-container-true"
           data-test-boxel-card-container
           style
+          data-boxel-card-id="http://test-realm/test/germaine"
+          data-boxel-card-format="embedded"
           data-test-card="http://test-realm/test/germaine"
           data-test-card-format="embedded"
           data-test-field-component-card> <h1> Fancy Person Embedded Card: Germaine - hot pink </h1> </div>`,
@@ -1837,6 +1839,8 @@ module(`Integration | realm indexing`, function (hooks) {
         class="ember-view boxel-card-container boxel-card-container--boundaries field-component-card embedded-format display-container-true"
         data-test-boxel-card-container
         style
+        data-boxel-card-id="http://test-realm/test/germaine"
+        data-boxel-card-format="embedded"
         data-test-card="http://test-realm/test/germaine"
         data-test-card-format="embedded"
         data-test-field-component-card> <h1> Person Embedded Card: Germaine </h1> </div>`),
@@ -1853,6 +1857,8 @@ module(`Integration | realm indexing`, function (hooks) {
         class="ember-view boxel-card-container boxel-card-container--boundaries field-component-card embedded-format display-container-true"
         data-test-boxel-card-container
         style
+        data-boxel-card-id="http://test-realm/test/germaine"
+        data-boxel-card-format="embedded"
         data-test-card="http://test-realm/test/germaine"
         data-test-card-format="embedded"
         data-test-field-component-card>
@@ -1947,6 +1953,8 @@ module(`Integration | realm indexing`, function (hooks) {
           class="ember-view boxel-card-container boxel-card-container--boundaries field-component-card fitted-format display-container-true"
           data-test-boxel-card-container
           style
+          data-boxel-card-id="http://test-realm/test/germaine"
+          data-boxel-card-format="fitted"
           data-test-card="http://test-realm/test/germaine"
           data-test-card-format="fitted"
           data-test-field-component-card> <h1> Fancy Person Fitted Card: Germaine - hot pink </h1> </div>`,
@@ -1973,6 +1981,8 @@ module(`Integration | realm indexing`, function (hooks) {
       class="ember-view boxel-card-container boxel-card-container--boundaries field-component-card fitted-format display-container-true"
       data-test-boxel-card-container
       style
+      data-boxel-card-id="http://test-realm/test/germaine"
+      data-boxel-card-format="fitted"
       data-test-card="http://test-realm/test/germaine"
       data-test-card-format="fitted"
       data-test-field-component-card> <h1> Person Fitted Card: Germaine </h1> </div>`),
@@ -1989,6 +1999,8 @@ module(`Integration | realm indexing`, function (hooks) {
       class="ember-view boxel-card-container boxel-card-container--boundaries field-component-card embedded-format display-container-true"
       data-test-boxel-card-container
       style
+      data-boxel-card-id="http://test-realm/test/germaine"
+      data-boxel-card-format="embedded"
       data-test-card="http://test-realm/test/germaine"
       data-test-card-format="embedded"
       data-test-field-component-card>
@@ -4478,6 +4490,7 @@ module(`Integration | realm indexing`, function (hooks) {
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/align-left',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/arrow-left',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/captions',
+        'http://localhost:4206/@cardstack/boxel-icons/v1/icons/clipboard-copy',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/code',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/eye',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/file',
@@ -4511,6 +4524,7 @@ module(`Integration | realm indexing`, function (hooks) {
         'https://cardstack.com/base/default-templates/image-def-isolated',
         'https://cardstack.com/base/default-templates/isolated-and-edit',
         'https://cardstack.com/base/default-templates/markdown',
+        'https://cardstack.com/base/default-templates/markdown-fallback',
         'https://cardstack.com/base/default-templates/missing-template',
         'https://cardstack.com/base/field-component',
         'https://cardstack.com/base/field-support',
@@ -4519,6 +4533,7 @@ module(`Integration | realm indexing`, function (hooks) {
         'https://cardstack.com/base/helpers/set-background-image',
         'https://cardstack.com/base/links-to-editor',
         'https://cardstack.com/base/links-to-many-component',
+        'https://cardstack.com/base/markdown-helpers',
         'https://cardstack.com/base/menu-items',
         'https://cardstack.com/base/number',
         'https://cardstack.com/base/query-field-support',
@@ -4528,6 +4543,7 @@ module(`Integration | realm indexing`, function (hooks) {
         'https://cardstack.com/base/watched-array',
         'https://packages/@cardstack/boxel-host/commands/copy-and-edit',
         'https://packages/@cardstack/boxel-host/commands/copy-card',
+        'https://packages/@cardstack/boxel-host/commands/copy-card-as-markdown',
         'https://packages/@cardstack/boxel-host/commands/copy-file-to-realm',
         'https://packages/@cardstack/boxel-host/commands/create-ai-assistant-room',
         'https://packages/@cardstack/boxel-host/commands/generate-example-cards',
@@ -4618,6 +4634,7 @@ module(`Integration | realm indexing`, function (hooks) {
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/book-open-text',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/box-model',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/captions',
+        'http://localhost:4206/@cardstack/boxel-icons/v1/icons/clipboard-copy',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/code',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/eye',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/file',
@@ -4658,6 +4675,7 @@ module(`Integration | realm indexing`, function (hooks) {
         'https://cardstack.com/base/default-templates/image-def-isolated',
         'https://cardstack.com/base/default-templates/isolated-and-edit',
         'https://cardstack.com/base/default-templates/markdown',
+        'https://cardstack.com/base/default-templates/markdown-fallback',
         'https://cardstack.com/base/default-templates/missing-template',
         'https://cardstack.com/base/field-component',
         'https://cardstack.com/base/field-support',
@@ -4667,6 +4685,7 @@ module(`Integration | realm indexing`, function (hooks) {
         'https://cardstack.com/base/links-to-editor',
         'https://cardstack.com/base/links-to-many-component',
         'https://cardstack.com/base/markdown',
+        'https://cardstack.com/base/markdown-helpers',
         'https://cardstack.com/base/menu-items',
         'https://cardstack.com/base/number',
         'https://cardstack.com/base/query-field-support',
@@ -4677,6 +4696,7 @@ module(`Integration | realm indexing`, function (hooks) {
         'https://cardstack.com/base/watched-array',
         'https://packages/@cardstack/boxel-host/commands/copy-and-edit',
         'https://packages/@cardstack/boxel-host/commands/copy-card',
+        'https://packages/@cardstack/boxel-host/commands/copy-card-as-markdown',
         'https://packages/@cardstack/boxel-host/commands/copy-file-to-realm',
         'https://packages/@cardstack/boxel-host/commands/create-ai-assistant-room',
         'https://packages/@cardstack/boxel-host/commands/generate-example-cards',
diff --git a/packages/host/tests/unit/card-def-menu-items-test.ts b/packages/host/tests/unit/card-def-menu-items-test.ts
index 9ab85bb9b35..acb28c0f798 100644
--- a/packages/host/tests/unit/card-def-menu-items-test.ts
+++ b/packages/host/tests/unit/card-def-menu-items-test.ts
@@ -55,6 +55,7 @@ module('Unit | CardDef menu items', function (hooks) {
 
     let texts = items.map((i: MenuItemOptions) => i.label);
     assert.ok(texts.includes('Copy Card URL'), 'contains Copy Card URL');
+    assert.ok(texts.includes('Copy as Markdown'), 'contains Copy as Markdown');
     assert.ok(
       texts.includes('New Card of This Type'),
       'contains New Card of This Type',
diff --git a/packages/host/tests/unit/index-writer-test.ts b/packages/host/tests/unit/index-writer-test.ts
index 230fec1ebc1..e7b4e940143 100644
--- a/packages/host/tests/unit/index-writer-test.ts
+++ b/packages/host/tests/unit/index-writer-test.ts
@@ -628,6 +628,7 @@ module('Unit | index-writer', function (hooks) {
         atom_html: `<span class="atom">Atom HTML</span>`,
         head_html: `<span class="head">Head HTML</span>`,
         icon_html: '<svg>test icon</svg>',
+        markdown: null,
         is_deleted: null,
       },
       'the copied instance is correct',
@@ -763,6 +764,7 @@ module('Unit | index-writer', function (hooks) {
         resource_created_at: String(modified),
         is_deleted: null,
         icon_html: '<svg>test icon</svg>',
+        markdown: null,
       },
       'the error entry includes last known good state of instance',
     );
@@ -819,6 +821,7 @@ module('Unit | index-writer', function (hooks) {
         resource_created_at: null,
         is_deleted: false,
         icon_html: null,
+        markdown: null,
       },
       'the error entry does not include last known good state of instance',
     );
@@ -905,6 +908,7 @@ module('Unit | index-writer', function (hooks) {
         fittedHtml: null,
         atomHtml: null,
         headHtml: null,
+        markdown: null,
         searchDoc: null,
         types: null,
         indexedAt: null,
@@ -1049,6 +1053,7 @@ module('Unit | index-writer', function (hooks) {
         embeddedHtml: null,
         fittedHtml: null,
         headHtml: null,
+        markdown: null,
       });
     } else {
       assert.ok(false, `expected index entry to not be an error document`);
@@ -1143,12 +1148,61 @@ module('Unit | index-writer', function (hooks) {
         fittedHtml: null,
         atomHtml: null,
         headHtml: null,
+        markdown: null,
       });
     } else {
       assert.ok(false, `expected index entry to not be an error document`);
     }
   });
 
+  test('persists and reads back markdown for an instance entry', async function (assert) {
+    await setupIndex(
+      adapter,
+      [{ realm_url: testRealmURL, current_version: 1 }],
+      [],
+    );
+    let resource: CardResource = {
+      id: `${testRealmURL}1.json`,
+      type: 'card',
+      attributes: { name: 'Van Gogh' },
+      meta: {
+        adoptsFrom: { module: `./person`, name: 'Person' },
+      },
+    };
+    let now = Date.now();
+    let markdown = '# Van Gogh\n\n- email: vangogh@example.com';
+    let batch = await indexWriter.createBatch(new URL(testRealmURL));
+    await batch.invalidate([new URL(`${testRealmURL}1.json`)]);
+    await batch.updateEntry(new URL(`${testRealmURL}1.json`), {
+      type: 'instance',
+      resource,
+      lastModified: now,
+      resourceCreatedAt: now,
+      searchData: { name: 'Van Gogh' },
+      deps: new Set(),
+      displayNames: [],
+      types: [],
+      markdown,
+    });
+
+    let entry = await indexQueryEngine.getInstance(
+      new URL(`${testRealmURL}1`),
+      { useWorkInProgressIndex: true },
+    );
+    if (entry?.type === 'instance') {
+      assert.strictEqual(
+        entry.markdown,
+        markdown,
+        'markdown round-trips through updateEntry + getInstance',
+      );
+    } else {
+      assert.ok(
+        false,
+        `expected index entry to be an instance (got ${entry?.type})`,
+      );
+    }
+  });
+
   test('returns undefined when getting a deleted card', async function (assert) {
     await setupIndex(
       adapter,
diff --git a/packages/host/tests/unit/markdown-helpers-test.ts b/packages/host/tests/unit/markdown-helpers-test.ts
new file mode 100644
index 00000000000..1fd653ffd12
--- /dev/null
+++ b/packages/host/tests/unit/markdown-helpers-test.ts
@@ -0,0 +1,271 @@
+// CS-10797: Tests for card link and card embed markdown helpers.
+
+import { getService } from '@universal-ember/test-support';
+import { module, test } from 'qunit';
+
+import { baseRealm, type Loader } from '@cardstack/runtime-common';
+
+import type {
+  markdownLinkForCard as MarkdownLinkForCardFn,
+  markdownLinksForCards as MarkdownLinksForCardsFn,
+  markdownEmbedForCard as MarkdownEmbedForCardFn,
+  markdownEmbedsForCards as MarkdownEmbedsForCardsFn,
+} from 'https://cardstack.com/base/markdown-helpers';
+
+import { setupRenderingTest } from '../helpers/setup';
+
+module('Unit | markdown-helpers | card link helpers', function (hooks) {
+  setupRenderingTest(hooks);
+
+  let loader: Loader;
+  let markdownLinkForCard: typeof MarkdownLinkForCardFn;
+  let markdownLinksForCards: typeof MarkdownLinksForCardsFn;
+  let markdownEmbedForCard: typeof MarkdownEmbedForCardFn;
+  let markdownEmbedsForCards: typeof MarkdownEmbedsForCardsFn;
+
+  hooks.beforeEach(async function () {
+    loader = getService('loader-service').loader;
+    let mod = await loader.import<
+      typeof import('https://cardstack.com/base/markdown-helpers')
+    >(`${baseRealm.url}markdown-helpers`);
+    markdownLinkForCard = mod.markdownLinkForCard;
+    markdownLinksForCards = mod.markdownLinksForCards;
+    markdownEmbedForCard = mod.markdownEmbedForCard;
+    markdownEmbedsForCards = mod.markdownEmbedsForCards;
+  });
+
+  // -- markdownLinkForCard --------------------------------------------------
+
+  test('renders link with explicit text', function (assert) {
+    let card = {
+      id: 'https://example.com/Author/1',
+      cardTitle: 'Jane Doe',
+    };
+    assert.strictEqual(
+      markdownLinkForCard(card, 'the author'),
+      '[the author](https://example.com/Author/1)',
+    );
+  });
+
+  test('falls back to cardTitle when text is omitted', function (assert) {
+    let card = {
+      id: 'https://example.com/Author/1',
+      cardTitle: 'Jane Doe',
+    };
+    assert.strictEqual(
+      markdownLinkForCard(card),
+      '[Jane Doe](https://example.com/Author/1)',
+    );
+  });
+
+  test('returns empty string for null card', function (assert) {
+    assert.strictEqual(markdownLinkForCard(null), '');
+    assert.strictEqual(markdownLinkForCard(undefined), '');
+  });
+
+  test('escapes markdown special chars in title', function (assert) {
+    let card = {
+      id: 'https://example.com/Post/1',
+      cardTitle: 'Hello *world* [test]',
+    };
+    let result = markdownLinkForCard(card);
+    assert.true(result.includes('\\*'), `asterisks are escaped: ${result}`);
+    assert.true(result.includes('\\['), `brackets are escaped: ${result}`);
+    assert.true(
+      result.includes('https://example.com/Post/1'),
+      'href is preserved',
+    );
+  });
+
+  test('handles card with no cardTitle and no explicit text', function (assert) {
+    let card = { id: 'https://example.com/Post/1' };
+    assert.strictEqual(
+      markdownLinkForCard(card),
+      '[](https://example.com/Post/1)',
+    );
+  });
+
+  // -- markdownLinksForCards -------------------------------------------------
+
+  test('default list style renders bulleted links', function (assert) {
+    let cards = [
+      { id: 'https://example.com/A/1', cardTitle: 'Alice' },
+      { id: 'https://example.com/B/2', cardTitle: 'Bob' },
+    ];
+    assert.strictEqual(
+      markdownLinksForCards(cards),
+      '- [Alice](https://example.com/A/1)\n- [Bob](https://example.com/B/2)',
+    );
+  });
+
+  test('inline style renders comma-separated links', function (assert) {
+    let cards = [
+      { id: 'https://example.com/A/1', cardTitle: 'Alice' },
+      { id: 'https://example.com/B/2', cardTitle: 'Bob' },
+      { id: 'https://example.com/C/3', cardTitle: 'Charlie' },
+    ];
+    assert.strictEqual(
+      markdownLinksForCards(cards, { style: 'inline' }),
+      '[Alice](https://example.com/A/1), [Bob](https://example.com/B/2), [Charlie](https://example.com/C/3)',
+    );
+  });
+
+  test('custom text callback overrides cardTitle', function (assert) {
+    let cards = [
+      { id: 'https://example.com/A/1', cardTitle: 'Alice Smith' },
+      { id: 'https://example.com/B/2', cardTitle: 'Bob Jones' },
+    ];
+    assert.strictEqual(
+      markdownLinksForCards(cards, {
+        style: 'inline',
+        text: (c) => `@${c.cardTitle}`,
+      }),
+      '[@Alice Smith](https://example.com/A/1), [@Bob Jones](https://example.com/B/2)',
+    );
+  });
+
+  test('null entries in array are skipped', function (assert) {
+    let cards = [
+      { id: 'https://example.com/A/1', cardTitle: 'Alice' },
+      null,
+      undefined,
+      { id: 'https://example.com/B/2', cardTitle: 'Bob' },
+    ];
+    assert.strictEqual(
+      markdownLinksForCards(cards),
+      '- [Alice](https://example.com/A/1)\n- [Bob](https://example.com/B/2)',
+    );
+  });
+
+  test('empty array returns empty string', function (assert) {
+    assert.strictEqual(markdownLinksForCards([]), '');
+  });
+
+  test('all-null array returns empty string', function (assert) {
+    assert.strictEqual(markdownLinksForCards([null, null]), '');
+  });
+
+  test('null/undefined cards array returns empty string', function (assert) {
+    assert.strictEqual(markdownLinksForCards(null), '');
+    assert.strictEqual(markdownLinksForCards(undefined), '');
+  });
+
+  // -- markdownEmbedForCard -------------------------------------------------
+
+  test('block embed (default)', function (assert) {
+    let card = { id: 'https://example.com/Post/1', cardTitle: 'My Post' };
+    assert.strictEqual(
+      markdownEmbedForCard(card),
+      '::card[https://example.com/Post/1]',
+    );
+  });
+
+  test('inline embed', function (assert) {
+    let card = { id: 'https://example.com/Post/1', cardTitle: 'My Post' };
+    assert.strictEqual(
+      markdownEmbedForCard(card, { kind: 'inline' }),
+      ':card[https://example.com/Post/1]',
+    );
+  });
+
+  test('block embed with size specifier', function (assert) {
+    let card = { id: 'https://example.com/Post/1' };
+    assert.strictEqual(
+      markdownEmbedForCard(card, { size: 'fitted 250x40' }),
+      '::card[https://example.com/Post/1 | fitted 250x40]',
+    );
+  });
+
+  test('block embed with isolated size', function (assert) {
+    let card = { id: 'https://example.com/Post/1' };
+    assert.strictEqual(
+      markdownEmbedForCard(card, { size: 'isolated' }),
+      '::card[https://example.com/Post/1 | isolated]',
+    );
+  });
+
+  test('size specifier is ignored for inline embeds', function (assert) {
+    let card = { id: 'https://example.com/Post/1' };
+    assert.strictEqual(
+      markdownEmbedForCard(card, { kind: 'inline', size: 'strip' }),
+      ':card[https://example.com/Post/1]',
+    );
+  });
+
+  test('embed returns empty string for null card', function (assert) {
+    assert.strictEqual(markdownEmbedForCard(null), '');
+    assert.strictEqual(markdownEmbedForCard(undefined), '');
+  });
+
+  test('embed returns empty string for card with no id', function (assert) {
+    assert.strictEqual(markdownEmbedForCard({ cardTitle: 'No ID' }), '');
+  });
+
+  // -- markdownEmbedsForCards -----------------------------------------------
+
+  test('block embeds separated by double newline (default)', function (assert) {
+    let cards = [
+      { id: 'https://example.com/A/1', cardTitle: 'Alice' },
+      { id: 'https://example.com/B/2', cardTitle: 'Bob' },
+    ];
+    assert.strictEqual(
+      markdownEmbedsForCards(cards),
+      '::card[https://example.com/A/1]\n\n::card[https://example.com/B/2]',
+    );
+  });
+
+  test('inline embeds separated by space', function (assert) {
+    let cards = [
+      { id: 'https://example.com/A/1', cardTitle: 'Alice' },
+      { id: 'https://example.com/B/2', cardTitle: 'Bob' },
+    ];
+    assert.strictEqual(
+      markdownEmbedsForCards(cards, { kind: 'inline' }),
+      ':card[https://example.com/A/1] :card[https://example.com/B/2]',
+    );
+  });
+
+  test('custom separator', function (assert) {
+    let cards = [
+      { id: 'https://example.com/A/1' },
+      { id: 'https://example.com/B/2' },
+    ];
+    assert.strictEqual(
+      markdownEmbedsForCards(cards, { separator: '\n' }),
+      '::card[https://example.com/A/1]\n::card[https://example.com/B/2]',
+    );
+  });
+
+  test('embeds with size specifier', function (assert) {
+    let cards = [
+      { id: 'https://example.com/A/1' },
+      { id: 'https://example.com/B/2' },
+    ];
+    assert.strictEqual(
+      markdownEmbedsForCards(cards, { size: 'strip' }),
+      '::card[https://example.com/A/1 | strip]\n\n::card[https://example.com/B/2 | strip]',
+    );
+  });
+
+  test('embed null entries in array are skipped', function (assert) {
+    let cards = [
+      { id: 'https://example.com/A/1' },
+      null,
+      undefined,
+      { id: 'https://example.com/B/2' },
+    ];
+    assert.strictEqual(
+      markdownEmbedsForCards(cards),
+      '::card[https://example.com/A/1]\n\n::card[https://example.com/B/2]',
+    );
+  });
+
+  test('embed empty array returns empty string', function (assert) {
+    assert.strictEqual(markdownEmbedsForCards([]), '');
+  });
+
+  test('embed null/undefined array returns empty string', function (assert) {
+    assert.strictEqual(markdownEmbedsForCards(null), '');
+    assert.strictEqual(markdownEmbedsForCards(undefined), '');
+  });
+});
diff --git a/packages/host/types/@joplin/turndown-plugin-gfm/index.d.ts b/packages/host/types/@joplin/turndown-plugin-gfm/index.d.ts
new file mode 100644
index 00000000000..d1a2b2f7c06
--- /dev/null
+++ b/packages/host/types/@joplin/turndown-plugin-gfm/index.d.ts
@@ -0,0 +1,15 @@
+// Module shim for `@joplin/turndown-plugin-gfm`, which ships untyped CJS.
+// Only the named exports we actually use are declared. The plugin functions
+// take a `TurndownService` instance and mutate it in place; the return type
+// from upstream is `void`, but `service.use(plugin)` accepts that.
+
+declare module '@joplin/turndown-plugin-gfm' {
+  import type TurndownService from 'turndown';
+
+  type GfmPlugin = (service: TurndownService) => void;
+
+  export const gfm: GfmPlugin;
+  export const tables: GfmPlugin;
+  export const strikethrough: GfmPlugin;
+  export const taskListItems: GfmPlugin;
+}
diff --git a/packages/postgres/migrations/1776285887495_add-markdown-to-index.js b/packages/postgres/migrations/1776285887495_add-markdown-to-index.js
new file mode 100644
index 00000000000..e3b8880630a
--- /dev/null
+++ b/packages/postgres/migrations/1776285887495_add-markdown-to-index.js
@@ -0,0 +1,15 @@
+exports.shorthands = undefined;
+
+exports.up = (pgm) => {
+  pgm.addColumns('boxel_index', {
+    markdown: { type: 'text' },
+  });
+  pgm.addColumns('boxel_index_working', {
+    markdown: { type: 'text' },
+  });
+};
+
+exports.down = (pgm) => {
+  pgm.dropColumns('boxel_index', ['markdown']);
+  pgm.dropColumns('boxel_index_working', ['markdown']);
+};
diff --git a/packages/realm-server/prerender/render-runner.ts b/packages/realm-server/prerender/render-runner.ts
index 8e9e0ef55c0..239c09c50dd 100644
--- a/packages/realm-server/prerender/render-runner.ts
+++ b/packages/realm-server/prerender/render-runner.ts
@@ -254,6 +254,7 @@ export class RenderRunner {
           atomHTML: null,
           embeddedHTML: null,
           fittedHTML: null,
+          markdown: null,
         };
         response.error = this.#mergeConsoleErrors(pageId, response.error);
         return {
@@ -276,7 +277,8 @@ export class RenderRunner {
         atomHTML: string | null = null,
         iconHTML: string | null = null,
         embeddedHTML: Record<string, string> | null = null,
-        fittedHTML: Record<string, string> | null = null;
+        fittedHTML: Record<string, string> | null = null,
+        markdown: string | null = null;
 
       const formatSteps: Array<{
         name: string;
@@ -304,6 +306,13 @@ export class RenderRunner {
             iconHTML = value;
           },
         },
+        {
+          name: 'markdown render',
+          cb: () => renderHTML(page, 'markdown', 0, captureOptions),
+          assign: (value: string) => {
+            markdown = value;
+          },
+        },
       ];
       for (let step of formatSteps) {
         if (shortCircuit) {
@@ -395,6 +404,7 @@ export class RenderRunner {
         atomHTML,
         embeddedHTML,
         fittedHTML,
+        markdown,
       };
       response.error = this.#mergeConsoleErrors(pageId, response.error);
       return {
@@ -1101,6 +1111,7 @@ export class RenderRunner {
           atomHTML: null,
           embeddedHTML: null,
           fittedHTML: null,
+          markdown: null,
         };
         response.error = this.#mergeConsoleErrors(pageId, response.error);
         return {
@@ -1114,7 +1125,8 @@ export class RenderRunner {
         atomHTML: string | null = null,
         iconHTML: string | null = null,
         embeddedHTML: Record<string, string> | null = null,
-        fittedHTML: Record<string, string> | null = null;
+        fittedHTML: Record<string, string> | null = null,
+        markdown: string | null = null;
 
       if (!shortCircuit) {
         let headHTMLResult = await this.#step(
@@ -1185,6 +1197,13 @@ export class RenderRunner {
               iconHTML = v as string;
             },
           },
+          {
+            name: 'file markdown render',
+            cb: () => renderHTML(page, 'markdown', 0, captureOptions),
+            assign: (v: string | Record<string, string>) => {
+              markdown = v as string;
+            },
+          },
         );
 
         for (let step of steps) {
@@ -1220,6 +1239,7 @@ export class RenderRunner {
         atomHTML,
         embeddedHTML,
         fittedHTML,
+        markdown,
       };
       response.error = this.#mergeConsoleErrors(pageId, response.error);
       return {
diff --git a/packages/realm-server/prerender/utils.ts b/packages/realm-server/prerender/utils.ts
index cbac05c7e55..dcf36b22644 100644
--- a/packages/realm-server/prerender/utils.ts
+++ b/packages/realm-server/prerender/utils.ts
@@ -100,11 +100,18 @@ export async function renderHTML(
   log.debug(
     `renderHTML capture format=${format} ancestorLevel=${ancestorLevel} url=${page.url()}`,
   );
-  let result = await captureResult(
-    page,
-    ['isolated', 'atom', 'head'].includes(format) ? 'innerHTML' : 'outerHTML',
-    opts,
-  );
+  let captureMode: 'textContent' | 'innerHTML' | 'outerHTML';
+  if (format === 'markdown') {
+    // Markdown renders into a whitespace-preserving container (see CS-10781);
+    // we capture textContent so the extracted string matches what the template
+    // author wrote, without HTML markup or whitespace collapsing.
+    captureMode = 'textContent';
+  } else if (['isolated', 'atom', 'head'].includes(format)) {
+    captureMode = 'innerHTML';
+  } else {
+    captureMode = 'outerHTML';
+  }
+  let result = await captureResult(page, captureMode, opts);
   log.debug(
     `renderHTML captured format=${format} ancestorLevel=${ancestorLevel} status=${result.status} id=${result.id} nonce=${result.nonce}`,
   );
@@ -114,7 +121,9 @@ export async function renderHTML(
   log.debug(
     `renderHTML success format=${format} ancestorLevel=${ancestorLevel} length=${result.value.length}`,
   );
-  return cleanCapturedHTML(result.value);
+  // Markdown output is plain text; the Ember-id/empty-data-attr cleanup only
+  // makes sense for HTML captures, so pass markdown through untouched.
+  return format === 'markdown' ? result.value : cleanCapturedHTML(result.value);
 }
 
 export async function renderIcon(
@@ -974,9 +983,30 @@ export async function captureResult(
           } as RenderCapture;
         }
         if (capture === 'textContent') {
+          // For markdown-format renders, prefer the most specific container.
+          //   1. `[data-markdown-output]` (CS-10784) — emitted by the default
+          //      `static markdown` fallback on CardDef/FieldDef/FileDef. The
+          //      fallback also renders a hidden HTML source sibling that
+          //      `display:none` does NOT exclude from `textContent`, so we
+          //      MUST narrow the capture to this output node specifically;
+          //      otherwise the source HTML's text would contaminate the
+          //      converted markdown.
+          //   2. `[data-markdown-render-container]` (CS-10781) — the route-
+          //      level whitespace-preserving wrapper around any markdown
+          //      template's output. Authored markdown templates render
+          //      directly into this container.
+          //   3. The resolved element itself — covers `renderMeta`, which
+          //      uses textContent but has no markdown wrapper.
+          let markdownOutput = resolvedElement.querySelector(
+            '[data-markdown-output]',
+          ) as HTMLElement | null;
+          let markdownContainer = resolvedElement.querySelector(
+            '[data-markdown-render-container]',
+          ) as HTMLElement | null;
+          let target = markdownOutput ?? markdownContainer ?? resolvedElement;
           return {
             status: finalStatus,
-            value: resolvedElement.textContent ?? '',
+            value: target.textContent ?? '',
             alive,
             id: resolvedElement.dataset.prerenderId ?? undefined,
             nonce: resolvedElement.dataset.prerenderNonce ?? undefined,
diff --git a/packages/realm-server/tests/index.ts b/packages/realm-server/tests/index.ts
index 784e5a227a0..1e63821f456 100644
--- a/packages/realm-server/tests/index.ts
+++ b/packages/realm-server/tests/index.ts
@@ -153,6 +153,7 @@ import './realm-endpoints/directory-test';
 import './realm-endpoints/info-test';
 import './realm-endpoints/invalidate-urls-test';
 import './realm-endpoints/lint-test';
+import './realm-endpoints/markdown-test';
 import './realm-endpoints/mtimes-test';
 import './realm-endpoints/permissions-test';
 import './realm-endpoints/cancel-indexing-job-test';
@@ -198,6 +199,7 @@ import './realm-auth-test';
 import './queries-test';
 import './remote-prerenderer-test';
 import './runtime-dependency-tracker-test';
+import './markdown-fallback-server-isolation-test';
 import './sanitize-head-html-test';
 import './node-realm-test';
 import './session-room-queries-test';
diff --git a/packages/realm-server/tests/markdown-fallback-server-isolation-test.ts b/packages/realm-server/tests/markdown-fallback-server-isolation-test.ts
new file mode 100644
index 00000000000..e3e0cb21fd8
--- /dev/null
+++ b/packages/realm-server/tests/markdown-fallback-server-isolation-test.ts
@@ -0,0 +1,137 @@
+import { module, test } from 'qunit';
+import { basename } from 'path';
+import * as fs from 'fs';
+import * as path from 'path';
+
+// CS-10784 SECURITY GUARANTEE
+// ---------------------------
+// The default `static markdown` fallback on CardDef/FieldDef/FileDef converts
+// HTML to markdown via turndown + @joplin/turndown-plugin-gfm. Card code must
+// not run on the server, so the converter is bundled only into the host
+// (browser) graph and reached from base-realm templates via a `globalThis`
+// hook (see `packages/host/app/lib/html-to-markdown.ts`).
+//
+// This test enforces that boundary: the realm-server source tree, plus the
+// runtime packages it loads, must not import `turndown` or its GFM plugin.
+// If a future change accidentally pulls turndown into the server graph, this
+// test fails — even before any networked behavior is exercised.
+
+const REPO_ROOT = path.resolve(__dirname, '..', '..', '..');
+
+// Packages whose source code runs in the realm-server Node.js process. If a
+// new server-side workspace is added that runs in Node, list it here too.
+const SERVER_SIDE_PACKAGES = [
+  'realm-server',
+  'runtime-common',
+  'billing',
+  'postgres',
+  'local-types',
+];
+
+// Files we explicitly skip — these are tests, build outputs, or generated
+// artifacts whose content is not part of the runtime graph.
+const SKIP_DIRS = new Set([
+  'node_modules',
+  'dist',
+  'tmp',
+  '.cache',
+  'tests', // test files can mention turndown for documentation/assertions
+]);
+
+// We grep for any import or require that names turndown or the GFM plugin.
+// `import 'turndown'`, `from 'turndown'`, `from "turndown/foo"`,
+// `require('turndown')`, plus the same patterns for the GFM plugin.
+const FORBIDDEN_PATTERNS = [
+  /from\s+['"]turndown(?:\/[^'"]*)?['"]/,
+  /from\s+['"]@joplin\/turndown-plugin-gfm(?:\/[^'"]*)?['"]/,
+  /import\s+['"]turndown(?:\/[^'"]*)?['"]/,
+  /import\s+['"]@joplin\/turndown-plugin-gfm(?:\/[^'"]*)?['"]/,
+  /require\(\s*['"]turndown(?:\/[^'"]*)?['"]\s*\)/,
+  /require\(\s*['"]@joplin\/turndown-plugin-gfm(?:\/[^'"]*)?['"]\s*\)/,
+];
+
+function* walkSourceFiles(root: string): Iterable<string> {
+  let entries: fs.Dirent[];
+  try {
+    entries = fs.readdirSync(root, { withFileTypes: true });
+  } catch {
+    return;
+  }
+  for (let entry of entries) {
+    if (entry.isDirectory()) {
+      if (SKIP_DIRS.has(entry.name)) continue;
+      yield* walkSourceFiles(path.join(root, entry.name));
+      continue;
+    }
+    if (!entry.isFile()) continue;
+    // Only inspect TS/JS source — ignore JSON, CSS, etc.
+    if (!/\.(ts|tsx|js|mjs|cjs|gts|gjs)$/i.test(entry.name)) continue;
+    yield path.join(root, entry.name);
+  }
+}
+
+function findForbiddenImports(file: string): string | null {
+  let contents: string;
+  try {
+    contents = fs.readFileSync(file, 'utf8');
+  } catch {
+    return null;
+  }
+  for (let pattern of FORBIDDEN_PATTERNS) {
+    let match = contents.match(pattern);
+    if (match) {
+      return match[0];
+    }
+  }
+  return null;
+}
+
+module(basename(__filename), function () {
+  test('realm-server package.json does not declare turndown deps', function (assert) {
+    let pkg = JSON.parse(
+      fs.readFileSync(
+        path.join(REPO_ROOT, 'packages', 'realm-server', 'package.json'),
+        'utf8',
+      ),
+    );
+    let allDeps = {
+      ...(pkg.dependencies ?? {}),
+      ...(pkg.devDependencies ?? {}),
+      ...(pkg.peerDependencies ?? {}),
+      ...(pkg.optionalDependencies ?? {}),
+    };
+    assert.notOk(
+      'turndown' in allDeps,
+      'realm-server must not list turndown as a dependency',
+    );
+    assert.notOk(
+      '@joplin/turndown-plugin-gfm' in allDeps,
+      'realm-server must not list @joplin/turndown-plugin-gfm as a dependency',
+    );
+  });
+
+  for (let pkgName of SERVER_SIDE_PACKAGES) {
+    test(`${pkgName} source files do not import turndown`, function (assert) {
+      let pkgDir = path.join(REPO_ROOT, 'packages', pkgName);
+      let pkgExists = fs.existsSync(pkgDir);
+      // Fail loudly if a workspace was renamed/moved rather than silently
+      // passing — but keep going so we still surface the import audit when
+      // possible.
+      assert.ok(pkgExists, `expected package directory at ${pkgDir}`);
+      let offenders: string[] = [];
+      if (pkgExists) {
+        for (let file of walkSourceFiles(pkgDir)) {
+          let match = findForbiddenImports(file);
+          if (match) {
+            offenders.push(`${path.relative(REPO_ROOT, file)}: ${match}`);
+          }
+        }
+      }
+      assert.deepEqual(
+        offenders,
+        [],
+        `no source file in ${pkgName} should import turndown — offenders: ${offenders.join(', ')}`,
+      );
+    });
+  }
+});
diff --git a/packages/realm-server/tests/prerender-proxy-test.ts b/packages/realm-server/tests/prerender-proxy-test.ts
index a323ebbe93f..a251f0654dc 100644
--- a/packages/realm-server/tests/prerender-proxy-test.ts
+++ b/packages/realm-server/tests/prerender-proxy-test.ts
@@ -62,6 +62,7 @@ module(basename(__filename), function () {
             embeddedHTML: {},
             fittedHTML: {},
             iconHTML: null,
+            markdown: null,
           };
         },
         async prerenderModule(args) {
@@ -96,6 +97,7 @@ module(basename(__filename), function () {
             embeddedHTML: null,
             fittedHTML: null,
             iconHTML: null,
+            markdown: null,
           };
         },
         async runCommand(args) {
@@ -170,6 +172,7 @@ module(basename(__filename), function () {
               embeddedHTML: {},
               fittedHTML: {},
               iconHTML: null,
+              markdown: null,
             },
           },
         },
diff --git a/packages/realm-server/tests/prerendering-test.ts b/packages/realm-server/tests/prerendering-test.ts
index 1da0adb2332..42964f591a1 100644
--- a/packages/realm-server/tests/prerendering-test.ts
+++ b/packages/realm-server/tests/prerendering-test.ts
@@ -3768,6 +3768,7 @@ module(basename(__filename), function () {
             headHTML: null,
             iconHTML: null,
             isolatedHTML: null,
+            markdown: null,
           });
         });
 
@@ -5142,6 +5143,7 @@ module(basename(__filename), function () {
             atomHTML: null,
             embeddedHTML: null,
             fittedHTML: null,
+            markdown: null,
           };
           let response: RenderResponse =
             attemptCount === 1
diff --git a/packages/realm-server/tests/realm-endpoints/markdown-test.ts b/packages/realm-server/tests/realm-endpoints/markdown-test.ts
new file mode 100644
index 00000000000..f464b4e84be
--- /dev/null
+++ b/packages/realm-server/tests/realm-endpoints/markdown-test.ts
@@ -0,0 +1,657 @@
+import { module, test } from 'qunit';
+import type { SuperTest, Test } from 'supertest';
+import { basename } from 'path';
+import type { Realm } from '@cardstack/runtime-common';
+import { SupportedMimeType } from '@cardstack/runtime-common';
+import type { Server } from 'http';
+import { closeServer, setupPermissionedRealmCached } from '../helpers';
+
+// CS-10789 end-to-end tests for the markdown rendering pipeline (CS-10782
+// through CS-10787) as served via the realm HTTP endpoint added in CS-10798.
+//
+// Each test requests a pre-indexed card with `Accept: text/markdown` and
+// asserts the response body. The fileSystem is seeded once per template-DB
+// build (setupPermissionedRealmCached) so per-test setup cost is a DB restore.
+//
+// Coverage:
+//   1.  Format resolution — GET with `Accept: text/markdown` returns markdown.
+//   2.  Whitespace preservation — multi-line indented content round-trips.
+//   3.  Field delegation — `<@fields.x />` resolves to the field's markdown.
+//   4.  MarkdownField passthrough — raw markdown is not escaped.
+//   5.  markdownEscape — user content with metacharacters is escaped.
+//   6.  HTML-to-markdown fallback — CardDef default converts isolated HTML.
+//   7.  Override precedence — subclass static markdown wins over the fallback.
+//   8.  Frontmatter — YAML frontmatter in the template is preserved.
+//   9.  Nested cards — parent template embeds child card markdown.
+//   10. Content-type header — response advertises `text/markdown`.
+//   11. Cache invalidation — updating a card changes the served markdown.
+
+const BASIC_CARD_GTS = `
+  import {
+    contains,
+    field,
+    Component,
+    CardDef,
+  } from 'https://cardstack.com/base/card-api';
+  import StringField from 'https://cardstack.com/base/string';
+
+  export class Basic extends CardDef {
+    static displayName = 'Basic';
+    @field title = contains(StringField);
+    static isolated = class extends Component<typeof this> {
+      <template>
+        <h1 data-test-card><@fields.title /></h1>
+      </template>
+    };
+    // Authoring markdown directly; overrides the CardDef fallback.
+    static markdown = class extends Component<typeof this> {
+      <template># {{@model.title}}</template>
+    };
+  }
+`;
+
+// Whitespace-preservation card: the authored markdown is a fenced code block
+// with deliberately nested indentation. The render route wraps the output in
+// `[data-markdown-render-container]` with `white-space: pre`, and the
+// prerender pipeline captures `textContent` for format=markdown, so the exact
+// whitespace must round-trip.
+const WHITESPACE_CARD_GTS = `
+  import { Component, CardDef } from 'https://cardstack.com/base/card-api';
+
+  export class Whitespace extends CardDef {
+    static displayName = 'Whitespace';
+    static markdown = class extends Component<typeof this> {
+      <template>## Snippet
+\`\`\`js
+function hi() {
+    if (true) {
+        return 'ok';
+    }
+}
+\`\`\`</template>
+    };
+  }
+`;
+
+// Field delegation: the parent's markdown template renders
+// `<@fields.name @format='markdown' />`, which dispatches to StringField's
+// static markdown (markdownEscape). `*Alice*` should come back as `\*Alice\*`.
+const FIELD_DELEGATION_CARD_GTS = `
+  import {
+    contains,
+    field,
+    Component,
+    CardDef,
+  } from 'https://cardstack.com/base/card-api';
+  import StringField from 'https://cardstack.com/base/string';
+
+  export class FieldDelegation extends CardDef {
+    static displayName = 'FieldDelegation';
+    @field name = contains(StringField);
+    static markdown = class extends Component<typeof this> {
+      <template>Hello, <@fields.name @format='markdown' />!</template>
+    };
+  }
+`;
+
+// MarkdownField passthrough: author raw markdown via MarkdownField; the
+// field's `static markdown` is `{{@model}}` (no escape) so inline formatting
+// like `**bold**` must survive into the output.
+const MARKDOWN_FIELD_CARD_GTS = `
+  import {
+    contains,
+    field,
+    Component,
+    CardDef,
+  } from 'https://cardstack.com/base/card-api';
+  import MarkdownField from 'https://cardstack.com/base/markdown';
+
+  export class PassThrough extends CardDef {
+    static displayName = 'PassThrough';
+    @field body = contains(MarkdownField);
+    static markdown = class extends Component<typeof this> {
+      <template><@fields.body @format='markdown' /></template>
+    };
+  }
+`;
+
+// markdownEscape via StringField default: the raw value contains markdown
+// metacharacters that would otherwise trigger formatting. The expected
+// output escapes each of them with a backslash.
+const ESCAPE_CARD_GTS = `
+  import {
+    contains,
+    field,
+    Component,
+    CardDef,
+  } from 'https://cardstack.com/base/card-api';
+  import StringField from 'https://cardstack.com/base/string';
+
+  export class Escape extends CardDef {
+    static displayName = 'Escape';
+    @field value = contains(StringField);
+    static markdown = class extends Component<typeof this> {
+      <template><@fields.value @format='markdown' /></template>
+    };
+  }
+`;
+
+// HTML-to-markdown fallback: only an isolated HTML template is provided; the
+// CardDef default `static markdown` fallback (CS-10784) converts the HTML to
+// markdown via turndown in the browser prerenderer (globalThis.__boxelHtmlToMarkdown).
+const FALLBACK_CARD_GTS = `
+  import {
+    contains,
+    field,
+    Component,
+    CardDef,
+  } from 'https://cardstack.com/base/card-api';
+  import StringField from 'https://cardstack.com/base/string';
+
+  export class Fallback extends CardDef {
+    static displayName = 'Fallback';
+    @field title = contains(StringField);
+    static isolated = class extends Component<typeof this> {
+      <template>
+        <h1>{{@model.title}}</h1>
+        <p>Body paragraph.</p>
+      </template>
+    };
+    // No static markdown override — CardDef fallback applies.
+  }
+`;
+
+// Override precedence: isolated HTML would yield "# Wrong" if the fallback
+// ran, but the authored `static markdown` must take precedence.
+const OVERRIDE_CARD_GTS = `
+  import {
+    contains,
+    field,
+    Component,
+    CardDef,
+  } from 'https://cardstack.com/base/card-api';
+  import StringField from 'https://cardstack.com/base/string';
+
+  export class Override extends CardDef {
+    static displayName = 'Override';
+    @field title = contains(StringField);
+    static isolated = class extends Component<typeof this> {
+      <template>
+        <h1>Wrong</h1>
+      </template>
+    };
+    static markdown = class extends Component<typeof this> {
+      <template># {{@model.title}} (authored)</template>
+    };
+  }
+`;
+
+// Explicit frontmatter: author YAML frontmatter verbatim; the pipeline must
+// not auto-inject or mutate it. The template dash-fence must round-trip.
+const FRONTMATTER_CARD_GTS = `
+  import {
+    contains,
+    field,
+    Component,
+    CardDef,
+  } from 'https://cardstack.com/base/card-api';
+  import StringField from 'https://cardstack.com/base/string';
+
+  export class Frontmatter extends CardDef {
+    static displayName = 'Frontmatter';
+    @field title = contains(StringField);
+    static markdown = class extends Component<typeof this> {
+      <template>---
+title: {{@model.title}}
+---
+# Body</template>
+    };
+  }
+`;
+
+// Nested card composition: parent embeds a contained CardDef via
+// `<@fields.child @format='markdown' />`. The child's authored markdown
+// must appear in the parent output.
+const NESTED_CARD_GTS = `
+  import {
+    contains,
+    linksTo,
+    field,
+    Component,
+    CardDef,
+  } from 'https://cardstack.com/base/card-api';
+  import StringField from 'https://cardstack.com/base/string';
+
+  export class NestedChild extends CardDef {
+    static displayName = 'NestedChild';
+    @field childTitle = contains(StringField);
+    static markdown = class extends Component<typeof this> {
+      <template>## {{@model.childTitle}}</template>
+    };
+  }
+
+  export class NestedParent extends CardDef {
+    static displayName = 'NestedParent';
+    @field parentTitle = contains(StringField);
+    @field child = linksTo(() => NestedChild);
+    static markdown = class extends Component<typeof this> {
+      <template># {{@model.parentTitle}}
+
+<@fields.child @format='markdown' /></template>
+    };
+  }
+`;
+
+// Cache invalidation target: starts with one body, test rewrites then re-indexes.
+const CACHE_CARD_INITIAL_GTS = `
+  import {
+    contains,
+    field,
+    Component,
+    CardDef,
+  } from 'https://cardstack.com/base/card-api';
+  import StringField from 'https://cardstack.com/base/string';
+
+  export class Cache extends CardDef {
+    static displayName = 'Cache';
+    @field title = contains(StringField);
+    static markdown = class extends Component<typeof this> {
+      <template>Version 1: {{@model.title}}</template>
+    };
+  }
+`;
+
+const CACHE_CARD_UPDATED_GTS = `
+  import {
+    contains,
+    field,
+    Component,
+    CardDef,
+  } from 'https://cardstack.com/base/card-api';
+  import StringField from 'https://cardstack.com/base/string';
+
+  export class Cache extends CardDef {
+    static displayName = 'Cache';
+    @field title = contains(StringField);
+    static markdown = class extends Component<typeof this> {
+      <template>Version 2: {{@model.title}}</template>
+    };
+  }
+`;
+
+module(`realm-endpoints/${basename(__filename)}`, function (hooks) {
+  let testRealm: Realm;
+  let testRealmHttpServer: Server;
+  let request: SuperTest<Test>;
+
+  function onRealmSetup({
+    testRealm: realm,
+    testRealmHttpServer: server,
+    request: req,
+  }: {
+    testRealm: Realm;
+    testRealmHttpServer: Server;
+    request: SuperTest<Test>;
+  }) {
+    testRealm = realm;
+    testRealmHttpServer = server;
+    request = req;
+  }
+
+  hooks.afterEach(async function () {
+    await closeServer(testRealmHttpServer);
+  });
+
+  setupPermissionedRealmCached(hooks, {
+    permissions: {
+      '*': ['read'],
+    },
+    fileSystem: {
+      'basic.gts': BASIC_CARD_GTS,
+      'basic.json': {
+        data: {
+          type: 'card',
+          attributes: { title: 'Hello' },
+          meta: {
+            adoptsFrom: { module: './basic.gts', name: 'Basic' },
+          },
+        },
+      },
+      'whitespace.gts': WHITESPACE_CARD_GTS,
+      'whitespace.json': {
+        data: {
+          type: 'card',
+          attributes: {},
+          meta: {
+            adoptsFrom: { module: './whitespace.gts', name: 'Whitespace' },
+          },
+        },
+      },
+      'field-delegation.gts': FIELD_DELEGATION_CARD_GTS,
+      'field-delegation.json': {
+        data: {
+          type: 'card',
+          attributes: { name: '*Alice*' },
+          meta: {
+            adoptsFrom: {
+              module: './field-delegation.gts',
+              name: 'FieldDelegation',
+            },
+          },
+        },
+      },
+      'markdown-field.gts': MARKDOWN_FIELD_CARD_GTS,
+      'markdown-field.json': {
+        data: {
+          type: 'card',
+          attributes: { body: 'Some **bold** text' },
+          meta: {
+            adoptsFrom: {
+              module: './markdown-field.gts',
+              name: 'PassThrough',
+            },
+          },
+        },
+      },
+      'escape.gts': ESCAPE_CARD_GTS,
+      'escape.json': {
+        data: {
+          type: 'card',
+          attributes: { value: 'Hello *world* [link]' },
+          meta: {
+            adoptsFrom: { module: './escape.gts', name: 'Escape' },
+          },
+        },
+      },
+      'fallback.gts': FALLBACK_CARD_GTS,
+      'fallback.json': {
+        data: {
+          type: 'card',
+          attributes: { title: 'Fallback Title' },
+          meta: {
+            adoptsFrom: { module: './fallback.gts', name: 'Fallback' },
+          },
+        },
+      },
+      'override.gts': OVERRIDE_CARD_GTS,
+      'override.json': {
+        data: {
+          type: 'card',
+          attributes: { title: 'Right' },
+          meta: {
+            adoptsFrom: { module: './override.gts', name: 'Override' },
+          },
+        },
+      },
+      'frontmatter.gts': FRONTMATTER_CARD_GTS,
+      'frontmatter.json': {
+        data: {
+          type: 'card',
+          attributes: { title: 'Featured' },
+          meta: {
+            adoptsFrom: { module: './frontmatter.gts', name: 'Frontmatter' },
+          },
+        },
+      },
+      'nested.gts': NESTED_CARD_GTS,
+      'nested-child.json': {
+        data: {
+          type: 'card',
+          attributes: { childTitle: 'Child' },
+          meta: {
+            adoptsFrom: { module: './nested.gts', name: 'NestedChild' },
+          },
+        },
+      },
+      'nested-parent.json': {
+        data: {
+          type: 'card',
+          attributes: { parentTitle: 'Parent' },
+          relationships: {
+            child: {
+              links: { self: './nested-child' },
+            },
+          },
+          meta: {
+            adoptsFrom: { module: './nested.gts', name: 'NestedParent' },
+          },
+        },
+      },
+      'cache.gts': CACHE_CARD_INITIAL_GTS,
+      'cache.json': {
+        data: {
+          type: 'card',
+          attributes: { title: 'Alpha' },
+          meta: {
+            adoptsFrom: { module: './cache.gts', name: 'Cache' },
+          },
+        },
+      },
+    },
+    onRealmSetup,
+  });
+
+  // Case 1: Format resolution
+  test('GET with Accept: text/markdown returns the card markdown body', async function (assert) {
+    let response = await request
+      .get('/basic')
+      .set('Accept', SupportedMimeType.Markdown);
+
+    assert.strictEqual(response.status, 200, 'HTTP 200 status');
+    assert.strictEqual(
+      response.text.trim(),
+      '# Hello',
+      'body is the authored markdown',
+    );
+  });
+
+  // Case 10: Content-type header
+  test('response advertises text/markdown content-type', async function (assert) {
+    let response = await request
+      .get('/basic')
+      .set('Accept', SupportedMimeType.Markdown);
+
+    assert.strictEqual(response.status, 200, 'HTTP 200 status');
+    // Match on media type; the handler pins `text/markdown; charset=utf-8`
+    // but we tolerate any parameter tail rather than over-constraining.
+    assert.true(
+      /^text\/markdown(;|$)/.test(response.headers['content-type'] ?? ''),
+      `content-type starts with text/markdown: got "${response.headers['content-type']}"`,
+    );
+  });
+
+  test('unknown card path returns 404', async function (assert) {
+    let response = await request
+      .get('/does-not-exist')
+      .set('Accept', SupportedMimeType.Markdown);
+
+    assert.strictEqual(response.status, 404, 'HTTP 404 status');
+  });
+
+  // Case 2: Whitespace preservation
+  test('multi-line indented markdown round-trips without whitespace collapsing', async function (assert) {
+    let response = await request
+      .get('/whitespace')
+      .set('Accept', SupportedMimeType.Markdown);
+
+    assert.strictEqual(response.status, 200, 'HTTP 200 status');
+    // Indentation inside the fenced block is meaningful; `textContent` capture
+    // on a `white-space: pre` container must preserve it verbatim.
+    assert.true(
+      response.text.includes('    if (true) {'),
+      `inner indentation preserved: ${response.text}`,
+    );
+    assert.true(
+      response.text.includes('        return'),
+      `nested indentation preserved: ${response.text}`,
+    );
+    assert.true(
+      response.text.includes('```js'),
+      `opening fence preserved: ${response.text}`,
+    );
+  });
+
+  // Case 3: Field delegation
+  test('<@fields.x @format=markdown /> dispatches to the field static markdown', async function (assert) {
+    let response = await request
+      .get('/field-delegation')
+      .set('Accept', SupportedMimeType.Markdown);
+
+    assert.strictEqual(response.status, 200, 'HTTP 200 status');
+    // StringField's static markdown wraps the value in `markdownEscape`.
+    // The asterisks in `*Alice*` get backslash-escaped.
+    assert.true(
+      response.text.includes('\\*Alice\\*'),
+      `StringField escape applied: ${response.text}`,
+    );
+    assert.true(
+      response.text.includes('Hello,'),
+      `surrounding template preserved: ${response.text}`,
+    );
+  });
+
+  // Case 4: MarkdownField passthrough
+  test('MarkdownField passthrough does not escape metacharacters', async function (assert) {
+    let response = await request
+      .get('/markdown-field')
+      .set('Accept', SupportedMimeType.Markdown);
+
+    assert.strictEqual(response.status, 200, 'HTTP 200 status');
+    // MarkdownField overrides StringField's escape with `{{@model}}`, so
+    // `**bold**` must survive to the wire without backslash escaping.
+    assert.true(
+      response.text.includes('**bold**'),
+      `MarkdownField passthrough preserved: ${response.text}`,
+    );
+    assert.false(
+      response.text.includes('\\*\\*bold\\*\\*'),
+      `MarkdownField is NOT escaped: ${response.text}`,
+    );
+  });
+
+  // Case 5: markdownEscape for user content via StringField default
+  test('StringField markdownEscape backslashes metacharacters in user content', async function (assert) {
+    let response = await request
+      .get('/escape')
+      .set('Accept', SupportedMimeType.Markdown);
+
+    assert.strictEqual(response.status, 200, 'HTTP 200 status');
+    // `*`, `[`, and `]` are in the escape set. Expected exact string:
+    //   Hello \*world\* \[link\]
+    assert.strictEqual(
+      response.text.trim(),
+      'Hello \\*world\\* \\[link\\]',
+      `escape output exact: ${response.text}`,
+    );
+  });
+
+  // Case 6: HTML-to-markdown fallback (via CardDef default)
+  test('CardDef fallback converts isolated HTML to markdown when no static markdown', async function (assert) {
+    let response = await request
+      .get('/fallback')
+      .set('Accept', SupportedMimeType.Markdown);
+
+    assert.strictEqual(response.status, 200, 'HTTP 200 status');
+    // Turndown converts `<h1>X</h1>` to `# X` (ATX-style heading). The exact
+    // formatting depends on the host's turndown config, so we assert on the
+    // key facts rather than a byte-exact match.
+    assert.true(
+      response.text.includes('# Fallback Title'),
+      `h1 converted to ATX heading: ${response.text}`,
+    );
+    assert.true(
+      response.text.includes('Body paragraph.'),
+      `paragraph body preserved: ${response.text}`,
+    );
+  });
+
+  // Case 7: Override precedence
+  test('subclass static markdown wins over the CardDef fallback', async function (assert) {
+    let response = await request
+      .get('/override')
+      .set('Accept', SupportedMimeType.Markdown);
+
+    assert.strictEqual(response.status, 200, 'HTTP 200 status');
+    assert.strictEqual(
+      response.text.trim(),
+      '# Right (authored)',
+      `authored markdown wins: ${response.text}`,
+    );
+    assert.false(
+      response.text.includes('Wrong'),
+      `isolated HTML is NOT used: ${response.text}`,
+    );
+  });
+
+  // Case 8: Explicit frontmatter
+  test('YAML frontmatter authored in the template round-trips verbatim', async function (assert) {
+    let response = await request
+      .get('/frontmatter')
+      .set('Accept', SupportedMimeType.Markdown);
+
+    assert.strictEqual(response.status, 200, 'HTTP 200 status');
+    let body = response.text.trim();
+    // Frontmatter must lead (no auto-injection before it) and the closing
+    // fence must precede the body.
+    assert.true(
+      body.startsWith('---'),
+      `frontmatter leads the document: ${body}`,
+    );
+    assert.true(
+      body.includes('title: Featured'),
+      `frontmatter value preserved: ${body}`,
+    );
+    // Two `---` fences, then the body heading.
+    let fenceCount = (body.match(/^---$/gm) ?? []).length;
+    assert.strictEqual(fenceCount, 2, `exactly two --- fences: ${body}`);
+    assert.true(body.includes('# Body'), `body follows frontmatter: ${body}`);
+  });
+
+  // Case 9: Nested card composition
+  test('parent markdown embeds child card markdown via @fields', async function (assert) {
+    let response = await request
+      .get('/nested-parent')
+      .set('Accept', SupportedMimeType.Markdown);
+
+    assert.strictEqual(response.status, 200, 'HTTP 200 status');
+    assert.true(
+      response.text.includes('# Parent'),
+      `parent heading present: ${response.text}`,
+    );
+    assert.true(
+      response.text.includes('## Child'),
+      `child heading present (embedded via @fields): ${response.text}`,
+    );
+  });
+
+  // Case 11: Cache invalidation
+  test('updating a card source and re-indexing changes the served markdown', async function (assert) {
+    let first = await request
+      .get('/cache')
+      .set('Accept', SupportedMimeType.Markdown);
+    assert.strictEqual(first.status, 200, 'initial HTTP 200');
+    assert.true(
+      first.text.includes('Version 1: Alpha'),
+      `initial body reflects v1 template: ${first.text}`,
+    );
+
+    // Rewrite the card source and force a full reindex. `write` triggers an
+    // incremental index for the instance; rewriting the module invalidates
+    // its dependents. We await fullIndex to make assertions deterministic.
+    await testRealm.write('cache.gts', CACHE_CARD_UPDATED_GTS);
+    await testRealm.realmIndexUpdater.fullIndex();
+
+    let second = await request
+      .get('/cache')
+      .set('Accept', SupportedMimeType.Markdown);
+    assert.strictEqual(second.status, 200, 'post-update HTTP 200');
+    assert.true(
+      second.text.includes('Version 2: Alpha'),
+      `post-update body reflects v2 template: ${second.text}`,
+    );
+    assert.false(
+      second.text.includes('Version 1'),
+      `no stale v1 text remains: ${second.text}`,
+    );
+  });
+});
diff --git a/packages/runtime-common/error.ts b/packages/runtime-common/error.ts
index 4cd7d911f0b..79e82a4a4fa 100644
--- a/packages/runtime-common/error.ts
+++ b/packages/runtime-common/error.ts
@@ -402,6 +402,17 @@ export function notFound(
   );
 }
 
+export function notAcceptable(
+  request: Request,
+  requestContext: RequestContext,
+  message = `No representation available for ${request.url} that matches accept header ${request.headers.get('accept')}`,
+): Response {
+  return responseWithError(
+    new CardError(message, { status: 406, id: request.url }),
+    requestContext,
+  );
+}
+
 export function badRequest({
   message,
   requestContext,
diff --git a/packages/runtime-common/formats.ts b/packages/runtime-common/formats.ts
index e4edce57a37..fc5790ef91b 100644
--- a/packages/runtime-common/formats.ts
+++ b/packages/runtime-common/formats.ts
@@ -5,7 +5,8 @@ export type Format =
   | 'edit'
   | 'atom'
   | 'head'
-  | 'metadata';
+  | 'metadata'
+  | 'markdown';
 
 export function isValidFormat(
   format: string,
@@ -21,6 +22,7 @@ export const formats: Format[] = [
   'atom',
   'edit',
   'head',
+  'markdown',
 ];
 
 export const FITTED_FORMATS = [
diff --git a/packages/runtime-common/index-query-engine.ts b/packages/runtime-common/index-query-engine.ts
index 87d48677c6b..b4cd15ed81e 100644
--- a/packages/runtime-common/index-query-engine.ts
+++ b/packages/runtime-common/index-query-engine.ts
@@ -82,6 +82,7 @@ export interface IndexedFile {
   embeddedHtml: { [refURL: string]: string } | null;
   fittedHtml: { [refURL: string]: string } | null;
   atomHtml: string | null;
+  markdown: string | null;
   realmVersion: number;
   realmURL: string;
   indexedAt: number | null;
@@ -98,6 +99,7 @@ export interface IndexedInstance {
   embeddedHtml: { [refURL: string]: string } | null;
   fittedHtml: { [refURL: string]: string } | null;
   atomHtml: string | null;
+  markdown: string | null;
   searchDoc: Record<string, any> | null;
   types: string[] | null;
   deps: string[] | null;
@@ -219,6 +221,7 @@ export class IndexQueryEngine {
       atom_html: atomHtml,
       embedded_html: embeddedHtml,
       fitted_html: fittedHtml,
+      markdown,
       search_doc: searchDoc,
       realm_version: realmVersion,
       realm_url: realmURL,
@@ -237,6 +240,7 @@ export class IndexQueryEngine {
       embeddedHtml,
       fittedHtml,
       atomHtml,
+      markdown,
       searchDoc,
       types,
       indexedAt: indexedAt != null ? parseInt(indexedAt) : null,
@@ -308,6 +312,7 @@ export class IndexQueryEngine {
       embedded_html: embeddedHtml,
       fitted_html: fittedHtml,
       atom_html: atomHtml,
+      markdown,
       realm_version: realmVersion,
       realm_url: realmURL,
       indexed_at: indexedAt,
@@ -334,6 +339,7 @@ export class IndexQueryEngine {
       embeddedHtml,
       fittedHtml,
       atomHtml,
+      markdown,
       lastModified: lastModified != null ? parseInt(lastModified) : null,
       resourceCreatedAt:
         resourceCreatedAt != null ? parseInt(resourceCreatedAt) : null,
@@ -523,7 +529,7 @@ export class IndexQueryEngine {
       { filter, sort, page },
       opts,
       [
-        'SELECT url, ANY_VALUE(pristine_doc) AS pristine_doc, ANY_VALUE(search_doc) AS search_doc, ANY_VALUE(types) AS types, ANY_VALUE(display_names) AS display_names, ANY_VALUE(deps) AS deps, ANY_VALUE(last_modified) AS last_modified, ANY_VALUE(resource_created_at) AS resource_created_at, ANY_VALUE(isolated_html) AS isolated_html, ANY_VALUE(head_html) AS head_html, ANY_VALUE(embedded_html) AS embedded_html, ANY_VALUE(fitted_html) AS fitted_html, ANY_VALUE(atom_html) AS atom_html, ANY_VALUE(realm_version) AS realm_version, ANY_VALUE(realm_url) AS realm_url, ANY_VALUE(indexed_at) AS indexed_at',
+        'SELECT url, ANY_VALUE(pristine_doc) AS pristine_doc, ANY_VALUE(search_doc) AS search_doc, ANY_VALUE(types) AS types, ANY_VALUE(display_names) AS display_names, ANY_VALUE(deps) AS deps, ANY_VALUE(last_modified) AS last_modified, ANY_VALUE(resource_created_at) AS resource_created_at, ANY_VALUE(isolated_html) AS isolated_html, ANY_VALUE(head_html) AS head_html, ANY_VALUE(embedded_html) AS embedded_html, ANY_VALUE(fitted_html) AS fitted_html, ANY_VALUE(atom_html) AS atom_html, ANY_VALUE(markdown) AS markdown, ANY_VALUE(realm_version) AS realm_version, ANY_VALUE(realm_url) AS realm_url, ANY_VALUE(indexed_at) AS indexed_at',
       ],
       'file',
     );
@@ -564,6 +570,7 @@ export class IndexQueryEngine {
       fittedHtml:
         (result.fitted_html as { [refURL: string]: string } | null) ?? null,
       atomHtml: result.atom_html ?? null,
+      markdown: result.markdown ?? null,
       lastModified,
       resourceCreatedAt,
       realmVersion: result.realm_version ?? 0,
diff --git a/packages/runtime-common/index-runner/card-indexer.ts b/packages/runtime-common/index-runner/card-indexer.ts
index 42efddfd723..579951c5043 100644
--- a/packages/runtime-common/index-runner/card-indexer.ts
+++ b/packages/runtime-common/index-runner/card-indexer.ts
@@ -208,6 +208,7 @@ export async function performCardIndexing({
     embeddedHTML,
     fittedHTML,
     iconHTML,
+    markdown,
   } = renderResult;
 
   let deps = new Set(runtimeDeps ?? []);
@@ -243,6 +244,7 @@ export async function performCardIndexing({
     embeddedHtml: embeddedHTML ?? undefined,
     fittedHtml: fittedHTML ?? undefined,
     iconHTML: iconHTML ?? undefined,
+    markdown: markdown ?? undefined,
     lastModified,
     resourceCreatedAt,
     types: types!,
diff --git a/packages/runtime-common/index-runner/file-indexer.ts b/packages/runtime-common/index-runner/file-indexer.ts
index d7e4450e0f1..c9458233568 100644
--- a/packages/runtime-common/index-runner/file-indexer.ts
+++ b/packages/runtime-common/index-runner/file-indexer.ts
@@ -235,6 +235,7 @@ export async function performFileIndexing({
     embeddedHtml: renderResult?.embeddedHTML ?? undefined,
     fittedHtml: renderResult?.fittedHTML ?? undefined,
     iconHTML: renderResult?.iconHTML ?? undefined,
+    markdown: renderResult?.markdown ?? undefined,
   });
 
   return 'indexed';
diff --git a/packages/runtime-common/index-structure.ts b/packages/runtime-common/index-structure.ts
index 5040e4bc71c..dd874613388 100644
--- a/packages/runtime-common/index-structure.ts
+++ b/packages/runtime-common/index-structure.ts
@@ -29,6 +29,7 @@ export interface BoxelIndexTable {
   isolated_html: string | null;
   atom_html: string | null;
   icon_html: string | null;
+  markdown: string | null;
   indexed_at: string | null; // pg represents big integers as strings in javascript
   last_modified: string | null; // pg represents big integers as strings in javascript
   resource_created_at: string | null; // pg represents big integers as strings in javascript
diff --git a/packages/runtime-common/index-writer.ts b/packages/runtime-common/index-writer.ts
index 1a43bf1471b..acbc9c2cf59 100644
--- a/packages/runtime-common/index-writer.ts
+++ b/packages/runtime-common/index-writer.ts
@@ -82,6 +82,7 @@ export interface InstanceEntry {
   fittedHtml?: Record<string, string>;
   atomHtml?: string;
   iconHTML?: string;
+  markdown?: string;
   types: string[];
   displayNames: string[];
   deps: Set<string>;
@@ -135,6 +136,7 @@ export interface FileEntry {
   fittedHtml?: Record<string, string>;
   atomHtml?: string;
   iconHTML?: string;
+  markdown?: string;
 }
 
 export class Batch {
@@ -299,6 +301,7 @@ export class Batch {
           fitted_html: entry.fittedHtml,
           atom_html: entry.atomHtml,
           icon_html: entry.iconHTML,
+          markdown: entry.markdown ?? null,
           deps: [...entry.deps],
           last_known_good_deps: [...entry.deps],
           types: entry.types,
@@ -324,6 +327,7 @@ export class Batch {
           fitted_html: entry.fittedHtml ?? null,
           atom_html: entry.atomHtml ?? null,
           icon_html: entry.iconHTML ?? null,
+          markdown: entry.markdown ?? null,
           last_modified: entry.lastModified,
           resource_created_at: entry.resourceCreatedAt,
           error_doc: null,
diff --git a/packages/runtime-common/index.ts b/packages/runtime-common/index.ts
index 510877fafe8..329d3a50e01 100644
--- a/packages/runtime-common/index.ts
+++ b/packages/runtime-common/index.ts
@@ -59,6 +59,7 @@ export interface RenderResponse extends PrerenderMeta {
   embeddedHTML: Record<string, string> | null;
   fittedHTML: Record<string, string> | null;
   iconHTML: string | null;
+  markdown: string | null;
   error?: RenderError;
 }
 
@@ -93,6 +94,7 @@ export interface FileRenderResponse {
   embeddedHTML: Record<string, string> | null;
   fittedHTML: Record<string, string> | null;
   iconHTML: string | null;
+  markdown: string | null;
   error?: RenderError;
 }
 
diff --git a/packages/runtime-common/realm.ts b/packages/runtime-common/realm.ts
index a87cf8b5486..7a306cd6ab4 100644
--- a/packages/runtime-common/realm.ts
+++ b/packages/runtime-common/realm.ts
@@ -32,6 +32,7 @@ import {
 import {
   systemError,
   notFound,
+  notAcceptable,
   methodNotAllowed,
   badRequest,
   CardError,
@@ -689,6 +690,7 @@ export class Realm {
       )
       .post('(/|/.+/)', SupportedMimeType.CardJson, this.createCard.bind(this))
       .get('/.*', SupportedMimeType.CardJson, this.getCard.bind(this))
+      .get('/.*', SupportedMimeType.Markdown, this.getCardMarkdown.bind(this))
       .patch(
         '/.+(?<!.json)',
         SupportedMimeType.CardJson,
@@ -3227,6 +3229,51 @@ export class Realm {
     }
   }
 
+  private async getCardMarkdown(
+    request: Request,
+    requestContext: RequestContext,
+  ): Promise<Response> {
+    let requestedLocalPath = this.paths.local(new URL(request.url));
+    let localPath = requestedLocalPath;
+    if (localPath === '') {
+      localPath = 'index';
+    }
+    localPath = localPath.replace(/\.json$/, '');
+    let url = this.paths.fileURL(localPath);
+    let entry = await this.#realmIndexQueryEngine.instance(url, {
+      includeErrors: true,
+    });
+    if (!entry) {
+      if (await this.nonJsonFileExists(localPath)) {
+        return unsupportedMediaType(request, requestContext);
+      }
+      return notFound(request, requestContext);
+    }
+    if (entry.type === 'instance-error') {
+      return notAcceptable(
+        request,
+        requestContext,
+        `markdown representation unavailable: ${request.url} has an indexing error`,
+      );
+    }
+    if (entry.markdown == null) {
+      return notAcceptable(
+        request,
+        requestContext,
+        `markdown representation not available for ${request.url}`,
+      );
+    }
+    return createResponse({
+      body: entry.markdown,
+      init: {
+        headers: {
+          'content-type': 'text/markdown; charset=utf-8',
+        },
+      },
+      requestContext,
+    });
+  }
+
   private async removeCard(
     request: Request,
     requestContext: RequestContext,
diff --git a/packages/runtime-common/supported-mime-type.ts b/packages/runtime-common/supported-mime-type.ts
index a0ab3293918..8be9e24371a 100644
--- a/packages/runtime-common/supported-mime-type.ts
+++ b/packages/runtime-common/supported-mime-type.ts
@@ -10,6 +10,7 @@ export enum SupportedMimeType {
   Session = 'application/json',
   EventStream = 'text/event-stream',
   HTML = 'text/html',
+  Markdown = 'text/markdown',
   JSONAPI = 'application/vnd.api+json',
   JSON = 'application/json',
   CardDependencies = 'application/json',
diff --git a/packages/workspace-sync-cli/tests/helpers/start-test-realm.ts b/packages/workspace-sync-cli/tests/helpers/start-test-realm.ts
index 36a8ebd25e5..42b62bc87da 100644
--- a/packages/workspace-sync-cli/tests/helpers/start-test-realm.ts
+++ b/packages/workspace-sync-cli/tests/helpers/start-test-realm.ts
@@ -65,6 +65,7 @@ export async function startTestRealmServer(
           embeddedHTML: {},
           fittedHTML: {},
           iconHTML: null,
+          markdown: null,
         };
     res.writeHead(200, { 'Content-Type': 'application/json' });
     res.end(JSON.stringify({ data: { attributes: payload } }));
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f797e95157d..8f41b0ff129 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1992,6 +1992,9 @@ importers:
       '@glint/template':
         specifier: 'catalog:'
         version: 1.7.7
+      '@joplin/turndown-plugin-gfm':
+        specifier: ^1.0.64
+        version: 1.0.64
       '@lezer/markdown':
         specifier: 'catalog:'
         version: 1.6.3
@@ -2049,6 +2052,9 @@ importers:
       '@types/statuses':
         specifier: 'catalog:'
         version: 2.0.6
+      '@types/turndown':
+        specifier: ^5.0.6
+        version: 5.0.6
       '@types/uuid':
         specifier: 'catalog:'
         version: 9.0.8
@@ -2373,6 +2379,9 @@ importers:
       tracked-built-ins:
         specifier: ^4.1.2
         version: 4.1.2(@babel/core@7.28.6)
+      turndown:
+        specifier: ^7.2.4
+        version: 7.2.4
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
@@ -5327,6 +5336,9 @@ packages:
     resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
+  '@joplin/turndown-plugin-gfm@1.0.64':
+    resolution: {integrity: sha512-8GJ7f9OenE3zkSVII5B6qzIkvgF7C/a20gaASEjM6jWPLPJFFQ2nQ3Ou/kXH1mPUTs9dC9VYs8QXVPvZabKXBQ==}
+
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -5410,6 +5422,9 @@ packages:
   '@mermaid-js/parser@1.1.0':
     resolution: {integrity: sha512-gxK9ZX2+Fex5zu8LhRQoMeMPEHbc73UKZ0FQ54YrQtUxE1VVhMwzeNtKRPAu5aXks4FasbMe4xB4bWrmq6Jlxw==}
 
+  '@mixmark-io/domino@2.2.0':
+    resolution: {integrity: sha512-Y28PR25bHXUg88kCV7nivXrP2Nj2RueZ3/l/jdx6J9f8J4nsEGcgX0Qe6lt7Pa+J79+kPiJU3LguR6O/6zrLOw==}
+
   '@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1':
     resolution: {integrity: sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==}
 
@@ -6654,6 +6669,9 @@ packages:
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
+  '@types/turndown@5.0.6':
+    resolution: {integrity: sha512-ru00MoyeeouE5BX4gRL+6m/BsDfbRayOskWqUvh7CLGW+UXxHQItqALa38kKnOiZPqJrtzJUgAC2+F0rL1S4Pg==}
+
   '@types/unist@2.0.11':
     resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
 
@@ -14360,6 +14378,10 @@ packages:
     resolution: {integrity: sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==}
     engines: {node: '>=0.6.11 <=0.7.0 || >=0.7.3'}
 
+  turndown@7.2.4:
+    resolution: {integrity: sha512-I8yFsfRzmzK0WV1pNNOA4A7y4RDfFxPRxb3t+e3ui14qSGOxGtiSP6GjeX+Y6CHb7HYaFj7ECUD7VE5kQMZWGQ==}
+    engines: {node: '>=18', npm: '>=9'}
+
   type-check@0.3.2:
     resolution: {integrity: sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==}
     engines: {node: '>= 0.8.0'}
@@ -17503,6 +17525,8 @@ snapshots:
     dependencies:
       '@sinclair/typebox': 0.27.8
 
+  '@joplin/turndown-plugin-gfm@1.0.64': {}
+
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -17612,6 +17636,8 @@ snapshots:
     dependencies:
       langium: 4.2.1
 
+  '@mixmark-io/domino@2.2.0': {}
+
   '@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1':
     dependencies:
       eslint-scope: 5.1.1
@@ -19142,6 +19168,8 @@ snapshots:
   '@types/trusted-types@2.0.7':
     optional: true
 
+  '@types/turndown@5.0.6': {}
+
   '@types/unist@2.0.11': {}
 
   '@types/uuid@9.0.8': {}
@@ -29206,6 +29234,10 @@ snapshots:
 
   tunnel@0.0.6: {}
 
+  turndown@7.2.4:
+    dependencies:
+      '@mixmark-io/domino': 2.2.0
+
   type-check@0.3.2:
     dependencies:
       prelude-ls: 1.1.2