diff --git a/src/lib/components/leaflet/LeafletBlocks.svelte b/src/lib/components/leaflet/LeafletBlocks.svelte
new file mode 100644
index 0000000..c95da64
--- /dev/null
+++ b/src/lib/components/leaflet/LeafletBlocks.svelte
@@ -0,0 +1,237 @@
+<script lang="ts">
+  /**
+   * LeafletBlocks — renders an array of Leaflet linearDocument blocks
+   * as native Svelte components instead of flattening to markdown.
+   *
+   * Each block in the array has the shape:
+   *   { block: { $type: "pub.leaflet.blocks.<name>", ... }, alignment?: string }
+   *
+   * The block data is pre-serialised on the server (BlobRef → image URL,
+   * CID instances → strings) so it's safe for SvelteKit dehydration.
+   */
+
+  import LeafletFacets from "./LeafletFacets.svelte";
+  import LeafletImage from "./LeafletImage.svelte";
+  import LeafletCode from "./LeafletCode.svelte";
+  import LeafletMath from "./LeafletMath.svelte";
+  import LeafletEmbed from "./LeafletEmbed.svelte";
+  import LeafletWebsiteCard from "./LeafletWebsiteCard.svelte";
+  import LeafletButton from "./LeafletButton.svelte";
+  import LeafletBskyPost from "./LeafletBskyPost.svelte";
+
+  import type { FacetSchema } from "$lib/providers/facets";
+  import type { SerialisedBlock } from "$lib/providers/serialise";
+
+  const NS = "pub.leaflet.richtext.facet";
+  const SCHEMA: FacetSchema = {
+    facet: NS,
+    byteSlice: `${NS}#byteSlice`,
+    bold: `${NS}#bold`,
+    italic: `${NS}#italic`,
+    code: `${NS}#code`,
+    strike: `${NS}#strikethrough`,
+    link: `${NS}#link`,
+    lossy: {
+      [`${NS}#highlight`]: "highlight",
+      [`${NS}#underline`]: "underline",
+      [`${NS}#atMention`]: "mentions",
+      [`${NS}#didMention`]: "mentions",
+      [`${NS}#footnote`]: "footnotes",
+    },
+  };
+
+  const B = (n: string) => `pub.leaflet.blocks.${n}`;
+
+  interface SerialisedFacet {
+    $type?: string;
+    index: { byteStart: number; byteEnd: number };
+    features: { $type?: string; [k: string]: unknown }[];
+  }
+
+  let { blocks }: { blocks: SerialisedBlock[] } = $props();
+
+  function alignmentClass(alignment?: string): string {
+    if (!alignment) return "";
+    if (alignment.endsWith("textAlignCenter")) return "text-center";
+    if (alignment.endsWith("textAlignRight")) return "text-right";
+    if (alignment.endsWith("textAlignJustify")) return "text-justify";
+    return "";
+  }
+
+  /** Extract plaintext + facets from a block inner object. */
+  function getPlaintext(inner: Record<string, unknown>): string {
+    return (inner.plaintext as string) ?? "";
+  }
+
+  function getFacets(inner: Record<string, unknown>): SerialisedFacet[] | undefined {
+    return inner.facets as SerialisedFacet[] | undefined;
+  }
+
+  /** Safely read aspectRatio from a block. */
+  function getAspectRatio(inner: Record<string, unknown>): { width: number; height: number } | undefined {
+    const ar = inner.aspectRatio;
+    if (typeof ar === "object" && ar !== null && "width" in ar && "height" in ar) {
+      return ar as { width: number; height: number };
+    }
+    return undefined;
+  }
+</script>
+
+{#each blocks as wrapper, i}
+  {@const inner = wrapper.block}
+  {@const align = alignmentClass(wrapper.alignment)}
+  {@const $type = inner.$type as string}
+
+  {#if $type === B("text")}
+    <p class="leaflet-text{align ? ` ${align}` : ''}">
+      <LeafletFacets plaintext={getPlaintext(inner)} facets={getFacets(inner)} schema={SCHEMA} />
+    </p>
+
+  {:else if $type === B("header")}
+    {@const level = Math.min(Math.max((inner.level as number) ?? 1, 1), 6)}
+    {#if level === 1}
+      <h1 class="leaflet-h1{align ? ` ${align}` : ''}">
+        <LeafletFacets plaintext={getPlaintext(inner)} facets={getFacets(inner)} schema={SCHEMA} />
+      </h1>
+    {:else if level === 2}
+      <h2 class="leaflet-h2{align ? ` ${align}` : ''}">
+        <LeafletFacets plaintext={getPlaintext(inner)} facets={getFacets(inner)} schema={SCHEMA} />
+      </h2>
+    {:else if level === 3}
+      <h3 class="leaflet-h3{align ? ` ${align}` : ''}">
+        <LeafletFacets plaintext={getPlaintext(inner)} facets={getFacets(inner)} schema={SCHEMA} />
+      </h3>
+    {:else if level === 4}
+      <h4 class="leaflet-h4{align ? ` ${align}` : ''}">
+        <LeafletFacets plaintext={getPlaintext(inner)} facets={getFacets(inner)} schema={SCHEMA} />
+      </h4>
+    {:else if level === 5}
+      <h5 class="leaflet-h5{align ? ` ${align}` : ''}">
+        <LeafletFacets plaintext={getPlaintext(inner)} facets={getFacets(inner)} schema={SCHEMA} />
+      </h5>
+    {:else}
+      <h6 class="leaflet-h6{align ? ` ${align}` : ''}">
+        <LeafletFacets plaintext={getPlaintext(inner)} facets={getFacets(inner)} schema={SCHEMA} />
+      </h6>
+    {/if}
+
+  {:else if $type === B("blockquote")}
+    <blockquote class="leaflet-blockquote{align ? ` ${align}` : ''}">
+      <LeafletFacets plaintext={getPlaintext(inner)} facets={getFacets(inner)} schema={SCHEMA} />
+    </blockquote>
+
+  {:else if $type === B("code")}
+    <LeafletCode plaintext={(inner.plaintext as string) ?? ""} language={inner.language as string | undefined} />
+
+  {:else if $type === B("math")}
+    <LeafletMath tex={(inner.tex as string) ?? ""} />
+
+  {:else if $type === B("horizontalRule")}
+    <hr class="leaflet-hr" />
+
+  {:else if $type === B("image")}
+    {@const ar = getAspectRatio(inner)}
+    <LeafletImage
+      src={inner._imageSrc as string}
+      alt={inner.alt as string | undefined}
+      width={ar?.width}
+      height={ar?.height}
+      fullBleed={inner.fullBleed as boolean | undefined}
+    />
+
+  {:else if $type === B("unorderedList")}
+    <ul class="leaflet-list{align ? ` ${align}` : ''}">
+      {#each (inner.children as Record<string, unknown>[]) ?? [] as item}
+        {@render listItem(item, false)}
+      {/each}
+    </ul>
+
+  {:else if $type === B("orderedList")}
+    <ol class="leaflet-list ordered{align ? ` ${align}` : ''}" start={inner.startIndex as number | undefined}>
+      {#each (inner.children as Record<string, unknown>[]) ?? [] as item}
+        {@render listItem(item, true)}
+      {/each}
+    </ol>
+
+  {:else if $type === B("iframe")}
+    <LeafletEmbed
+      url={inner.url as string}
+      height={inner.height as number | undefined}
+      aspectRatio={getAspectRatio(inner)}
+    />
+
+  {:else if $type === B("website")}
+    <LeafletWebsiteCard
+      src={inner.src as string}
+      title={inner.title as string | undefined}
+      description={inner.description as string | undefined}
+      previewImageSrc={inner._previewImageSrc as string | undefined}
+    />
+
+  {:else if $type === B("button")}
+    <LeafletButton text={inner.text as string} url={inner.url as string} />
+
+  {:else if $type === B("bskyPost")}
+    <LeafletBskyPost
+      postRef={inner.postRef as { uri: string; cid: string }}
+      clientHost={inner.clientHost as string | undefined}
+    />
+
+  {:else if $type === B("page")}
+    <div class="leaflet-unsupported">Embedded page</div>
+
+  {:else if $type === B("poll")}
+    <div class="leaflet-unsupported">Poll</div>
+
+  {:else if $type === B("postsList")}
+    <div class="leaflet-unsupported">Posts list</div>
+
+  {:else if $type === B("signup")}
+    <div class="leaflet-unsupported">Signup form</div>
+
+  {:else if $type === B("standardSitePost")}
+    <div class="leaflet-unsupported">
+      <a href={inner.uri as string} target="_blank" rel="noopener">Linked post</a>
+    </div>
+
+  {:else}
+    <!-- Unknown block type — skip silently -->
+  {/if}
+{/each}
+
+{#snippet listItem(item: Record<string, unknown>, ordered: boolean)}
+  <li class="leaflet-list-item">
+    {#if item.checked !== undefined}
+      <input type="checkbox" checked={item.checked as boolean} disabled />
+    {/if}
+    {#if item.content}
+      {@const content = item.content as Record<string, unknown>}
+      {@const contentType = content.$type as string}
+      {#if contentType === B("image")}
+        {@const ar = getAspectRatio(content)}
+        <LeafletImage
+          src={content._imageSrc as string}
+          alt={content.alt as string | undefined}
+          width={ar?.width}
+          height={ar?.height}
+        />
+      {:else}
+        <LeafletFacets plaintext={getPlaintext(content)} facets={getFacets(content)} schema={SCHEMA} />
+      {/if}
+    {/if}
+    {#if Array.isArray(item.children) && item.children.length > 0}
+      <ul class="leaflet-list nested">
+        {#each item.children as child}
+          {@render listItem(child, false)}
+        {/each}
+      </ul>
+    {:else if item.orderedListChildren}
+      {@const olc = item.orderedListChildren as Record<string, unknown>}
+      <ol class="leaflet-list ordered nested" start={olc.startIndex as number | undefined}>
+        {#each (olc.children as Record<string, unknown>[]) ?? [] as child}
+          {@render listItem(child, true)}
+        {/each}
+      </ol>
+    {/if}
+  </li>
+{/snippet}
diff --git a/src/lib/components/leaflet/LeafletBskyPost.svelte b/src/lib/components/leaflet/LeafletBskyPost.svelte
new file mode 100644
index 0000000..1f035e9
--- /dev/null
+++ b/src/lib/components/leaflet/LeafletBskyPost.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  /**
+   * Render a Leaflet Bluesky post embed block.
+   * Uses the Bluesky embed URL for a lightweight embed.
+   */
+
+  let { postRef, clientHost }: {
+    postRef: { uri: string; cid: string };
+    clientHost?: string;
+  } = $props();
+
+  const BSKY_HOST = "bsky.app";
+
+  function getEmbedUrl(): string {
+    const host = clientHost?.replace(/\/$/, "") || `https://${BSKY_HOST}`;
+    // at-uri: at://did:.../app.bsky.feed.post/rkey
+    const parts = postRef.uri.replace("at://", "").split("/");
+    const did = parts[0];
+    const rkey = parts[parts.length - 1];
+    return `${host}/profile/${did}/post/${rkey}`;
+  }
+
+  let embedUrl = $derived(getEmbedUrl());
+</script>
+
+<div class="leaflet-bsky-post">
+  <a href={embedUrl} target="_blank" rel="noopener" class="bsky-post-link">
+    Bluesky post &rarr;
+  </a>
+</div>
diff --git a/src/lib/components/leaflet/LeafletButton.svelte b/src/lib/components/leaflet/LeafletButton.svelte
new file mode 100644
index 0000000..bb4d164
--- /dev/null
+++ b/src/lib/components/leaflet/LeafletButton.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  /**
+   * Render a Leaflet button block.
+   */
+
+  let { text, url }: { text: string; url: string } = $props();
+</script>
+
+<div class="leaflet-button">
+  <a href={url} target="_blank" rel="noopener">{text}</a>
+</div>
diff --git a/src/lib/components/leaflet/LeafletCode.svelte b/src/lib/components/leaflet/LeafletCode.svelte
new file mode 100644
index 0000000..9f0dc63
--- /dev/null
+++ b/src/lib/components/leaflet/LeafletCode.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  /**
+   * Render a Leaflet code block.
+   */
+
+  let { plaintext, language }: {
+    plaintext: string;
+    language?: string;
+  } = $props();
+</script>
+
+<pre class="leaflet-code"><code class={language ? `language-${language}` : undefined}>{plaintext}</code></pre>
diff --git a/src/lib/components/leaflet/LeafletEmbed.svelte b/src/lib/components/leaflet/LeafletEmbed.svelte
new file mode 100644
index 0000000..ba643e1
--- /dev/null
+++ b/src/lib/components/leaflet/LeafletEmbed.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  /**
+   * Render a Leaflet iframe/embed block.
+   */
+
+  let { url, height, aspectRatio }: {
+    url: string;
+    height?: number;
+    aspectRatio?: { width: number; height: number };
+  } = $props();
+
+  let ratio = $derived(
+    aspectRatio && aspectRatio.width > 0 && aspectRatio.height > 0
+      ? `${aspectRatio.width} / ${aspectRatio.height}`
+      : "16 / 9"
+  );
+</script>
+
+<div class="leaflet-embed">
+  <iframe
+    src={url}
+    {height}
+    style="aspect-ratio: {ratio}"
+    loading="lazy"
+    sandbox="allow-scripts allow-same-origin allow-popups"
+    title="Embedded content"
+  ></iframe>
+</div>
diff --git a/src/lib/components/leaflet/LeafletFacets.svelte b/src/lib/components/leaflet/LeafletFacets.svelte
new file mode 100644
index 0000000..70f4336
--- /dev/null
+++ b/src/lib/components/leaflet/LeafletFacets.svelte
@@ -0,0 +1,164 @@
+<script lang="ts">
+  /**
+   * Render Leaflet plaintext + facets as inline HTML.
+   * Handles bold, italic, code, strikethrough, and links.
+   * Lossy features (highlight, underline, mentions, footnotes) are
+   * preserved as plain text.
+   */
+
+  import type { FacetSchema } from "$lib/providers/facets";
+
+  /** Loosely-typed facet shape from serialised block data. */
+  interface SerialisedFacet {
+    $type?: string;
+    index: { byteStart: number; byteEnd: number };
+    features: { $type?: string; [k: string]: unknown }[];
+  }
+
+  let { plaintext, facets, schema }: {
+    plaintext: string;
+    facets?: SerialisedFacet[];
+    schema: FacetSchema;
+  } = $props();
+
+  const encoder = new TextEncoder();
+  function byteLength(s: string): number {
+    return encoder.encode(s).length;
+  }
+
+  interface MarkSet {
+    bold: boolean;
+    italic: boolean;
+    code: boolean;
+    strike: boolean;
+    link?: string;
+  }
+
+  function emptyMarks(): MarkSet {
+    return { bold: false, italic: false, code: false, strike: false };
+  }
+
+  function sameMarks(a: MarkSet, b: MarkSet): boolean {
+    return (
+      a.bold === b.bold &&
+      a.italic === b.italic &&
+      a.code === b.code &&
+      a.strike === b.strike &&
+      a.link === b.link
+    );
+  }
+
+  interface Seg {
+    text: string;
+    marks: MarkSet;
+  }
+
+  function computeSegments(): Seg[] {
+    if (!plaintext) return [];
+    if (!facets || facets.length === 0) {
+      return [{ text: plaintext, marks: emptyMarks() }];
+    }
+
+    const ranges: { start: number; end: number; marks: Partial<MarkSet> }[] = [];
+    for (const f of facets) {
+      const marks: Partial<MarkSet> = {};
+      for (const feat of f.features ?? []) {
+        switch (feat.$type) {
+          case schema.bold: marks.bold = true; break;
+          case schema.italic: marks.italic = true; break;
+          case schema.code: marks.code = true; break;
+          case schema.strike: marks.strike = true; break;
+          case schema.link:
+            if (typeof feat.uri === "string") marks.link = feat.uri;
+            break;
+        }
+      }
+      if (Object.keys(marks).length > 0)
+        ranges.push({ start: f.index.byteStart, end: f.index.byteEnd, marks });
+    }
+
+    const bounds = new Set<number>([0, byteLength(plaintext)]);
+    for (const r of ranges) {
+      bounds.add(r.start);
+      bounds.add(r.end);
+    }
+
+    const segments: Seg[] = [];
+    let buf = "";
+    let bytePos = 0;
+    const sortedBounds = [...bounds].sort((a, b) => a - b);
+    let nextBound = sortedBounds.findIndex((b) => b > 0);
+
+    const marksAt = (bp: number): MarkSet => {
+      const m = emptyMarks();
+      for (const r of ranges) {
+        if (bp >= r.start && bp < r.end) {
+          if (r.marks.bold) m.bold = true;
+          if (r.marks.italic) m.italic = true;
+          if (r.marks.code) m.code = true;
+          if (r.marks.strike) m.strike = true;
+          if (r.marks.link) m.link = r.marks.link;
+        }
+      }
+      return m;
+    };
+
+    const flush = (segStartByte: number) => {
+      if (!buf) return;
+      const marks = marksAt(segStartByte);
+      const last = segments[segments.length - 1];
+      if (last && sameMarks(last.marks, marks)) last.text += buf;
+      else segments.push({ text: buf, marks });
+      buf = "";
+    };
+
+    let segStartByte = 0;
+    for (const ch of plaintext) {
+      const target = nextBound >= 0 ? sortedBounds[nextBound] : Infinity;
+      if (bytePos >= target) {
+        flush(segStartByte);
+        segStartByte = bytePos;
+        while (nextBound >= 0 && sortedBounds[nextBound] <= bytePos) nextBound++;
+        if (nextBound >= sortedBounds.length) nextBound = -1;
+      }
+      buf += ch;
+      bytePos += byteLength(ch);
+    }
+    flush(segStartByte);
+    return segments;
+  }
+
+  /** Escape HTML special characters. */
+  function esc(s: string): string {
+    return s
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;");
+  }
+
+  /** Render a segment to HTML string. */
+  function renderSeg(seg: Seg): string {
+    const t = esc(seg.text);
+    if (!seg.marks.bold && !seg.marks.italic && !seg.marks.code && !seg.marks.strike && !seg.marks.link) {
+      return t;
+    }
+
+    let inner = t;
+    if (seg.marks.code) {
+      inner = `<code>${t}</code>`;
+    } else {
+      if (seg.marks.strike) inner = `<del>${inner}</del>`;
+      if (seg.marks.italic) inner = `<em>${inner}</em>`;
+      if (seg.marks.bold) inner = `<strong>${inner}</strong>`;
+    }
+    if (seg.marks.link) {
+      inner = `<a href="${esc(seg.marks.link)}" target="_blank" rel="noopener">${inner}</a>`;
+    }
+    return inner;
+  }
+
+  let html = $derived(computeSegments().map(renderSeg).join(""));
+</script>
+
+{@html html}
diff --git a/src/lib/components/leaflet/LeafletImage.svelte b/src/lib/components/leaflet/LeafletImage.svelte
new file mode 100644
index 0000000..82f5b63
--- /dev/null
+++ b/src/lib/components/leaflet/LeafletImage.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  /**
+   * Render a Leaflet image block.
+   * The `src` is a pre-resolved PDS blob URL (set during serialisation).
+   */
+
+  let { src, alt, width, height, fullBleed }: {
+    src: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+    fullBleed?: boolean;
+  } = $props();
+
+  let aspectRatio = $derived(
+    width && height && width > 0 && height > 0
+      ? `${width} / ${height}`
+      : undefined
+  );
+</script>
+
+<figure class="leaflet-image" class:full-bleed={fullBleed}>
+  <img
+    src={src}
+    alt={alt ?? ""}
+    {width}
+    {height}
+    style={aspectRatio ? `aspect-ratio: ${aspectRatio}` : undefined}
+    loading="lazy"
+    decoding="async"
+  />
+  {#if alt}
+    <figcaption class="leaflet-image-alt">{alt}</figcaption>
+  {/if}
+</figure>
diff --git a/src/lib/components/leaflet/LeafletMath.svelte b/src/lib/components/leaflet/LeafletMath.svelte
new file mode 100644
index 0000000..bbc75bd
--- /dev/null
+++ b/src/lib/components/leaflet/LeafletMath.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  /**
+   * Render a Leaflet math block (LaTeX).
+   * Displays the TeX source in a code block for now.
+   * KaTeX/MathJax integration can be added later.
+   */
+
+  let { tex }: { tex: string } = $props();
+</script>
+
+<pre class="leaflet-math"><code class="language-math">{tex}</code></pre>
diff --git a/src/lib/components/leaflet/LeafletWebsiteCard.svelte b/src/lib/components/leaflet/LeafletWebsiteCard.svelte
new file mode 100644
index 0000000..72444bd
--- /dev/null
+++ b/src/lib/components/leaflet/LeafletWebsiteCard.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  /**
+   * Render a Leaflet website card block (link preview).
+   */
+
+  import { ExternalLink } from "@lucide/svelte";
+
+  let { src, title, description, previewImageSrc }: {
+    src: string;
+    title?: string;
+    description?: string;
+    previewImageSrc?: string;
+  } = $props();
+</script>
+
+<a href={src} target="_blank" rel="noopener" class="leaflet-website-card">
+  {#if previewImageSrc}
+    <div class="website-card-image">
+      <img src={previewImageSrc} alt="" loading="lazy" decoding="async" />
+    </div>
+  {/if}
+  <div class="website-card-body">
+    {#if title}
+      <strong class="website-card-title">{title}</strong>
+    {/if}
+    {#if description}
+      <p class="website-card-desc">{description}</p>
+    {/if}
+    <span class="website-card-url">
+      <ExternalLink size={12} strokeWidth={2} />
+      {new URL(src).hostname}
+    </span>
+  </div>
+</a>
diff --git a/src/lib/providers/serialise.ts b/src/lib/providers/serialise.ts
new file mode 100644
index 0000000..225fab1
--- /dev/null
+++ b/src/lib/providers/serialise.ts
@@ -0,0 +1,120 @@
+/**
+ * Serialise Leaflet content blocks for SvelteKit server→client transfer.
+ *
+ * The raw AT Protocol record contains BlobRef objects with CID class instances
+ * that SvelteKit cannot dehydrate. This module does a JSON round-trip to
+ * convert class instances to plain POJOs, then walks the result replacing
+ * every image/previewImage BlobRef with a PDS blob URL stored as
+ * `_imageSrc` / `_previewImageSrc`. The original blob fields are removed.
+ */
+
+const LINEAR = "pub.leaflet.pages.linearDocument";
+
+type Obj = Record<string, unknown>;
+
+/** A Leaflet block wrapper after BlobRef→URL serialisation. */
+export interface SerialisedBlock {
+  block: Obj;
+  alignment?: string;
+}
+
+/**
+ * Build a PDS blob URL from a DID and a CID string.
+ */
+export function pdsBlobUrl(did: string, cid: string): string {
+  return `https://eurosky.social/xrpc/com.atproto.sync.getBlob?did=${encodeURIComponent(did)}&cid=${encodeURIComponent(cid)}`;
+}
+
+/**
+ * Extract CID string from a plain-object BlobRef (after JSON round-trip).
+ * Shape: { $type: "blob", ref: { $link: "bafy..." }, mimeType, size }
+ * or legacy: { ref: { $link: "bafy..." } } or { ref: "bafy..." }
+ */
+function extractCid(obj: Obj): string | null {
+  const ref = obj.ref;
+  if (typeof ref === "string") return ref;
+  if (ref && typeof ref === "object" && "$link" in (ref as Obj)) {
+    return (ref as Obj).$link as string;
+  }
+  return null;
+}
+
+/**
+ * Walk a plain-object tree, replacing image/previewImage BlobRefs
+ * with PDS blob URLs.
+ */
+function replaceBlobs(obj: unknown, did: string): void {
+  if (Array.isArray(obj)) {
+    obj.forEach((item) => replaceBlobs(item, did));
+    return;
+  }
+  if (typeof obj !== "object" || obj === null) return;
+
+  const o = obj as Obj;
+  for (const [key, val] of Object.entries(o)) {
+    if (val && typeof val === "object" && !Array.isArray(val)) {
+      const v = val as Obj;
+      // Check if this is a BlobRef (after JSON round-trip)
+      if (v.$type === "blob" || ("mimeType" in v && "ref" in v)) {
+        const cid = extractCid(v);
+        if (cid) {
+          const url = pdsBlobUrl(did, cid);
+          if (key === "image") {
+            o._imageSrc = url;
+            delete o.image;
+          } else if (key === "previewImage") {
+            o._previewImageSrc = url;
+            delete o.previewImage;
+          } else {
+            o[key] = url;
+          }
+        }
+      } else {
+        replaceBlobs(v, did);
+      }
+    } else if (Array.isArray(val)) {
+      replaceBlobs(val, did);
+    }
+  }
+}
+
+/**
+ * Serialise a Leaflet content record into a plain-POJO blocks array
+ * safe for SvelteKit dehydration.
+ *
+ * @param content The raw `pub.leaflet.content` record value
+ * @param did The DID that owns the record (for blob URL construction)
+ * @param fetchBlob Async function to fetch blob pages if needed
+ * @returns The blocks array with BlobRefs replaced by PDS URLs
+ */
+export async function serialiseBlocks(
+  content: unknown,
+  did: string,
+  fetchBlob: (ref: unknown) => Promise<Uint8Array>,
+): Promise<SerialisedBlock[]> {
+  const c = content as Obj;
+  let pages = (c.pages as Obj[]) ?? [];
+
+  // Handle blobPages (large content stored as a blob)
+  if (c.blobPages) {
+    try {
+      const bytes = await fetchBlob(c.blobPages);
+      pages = JSON.parse(new TextDecoder().decode(bytes)) as Obj[];
+    } catch {
+      /* fall back to inline pages */
+    }
+  }
+
+  const page = pages.find((p) => p.$type === LINEAR) ?? pages[0];
+  const blocks = (page?.blocks as Obj[]) ?? [];
+
+  // JSON round-trip converts BlobRef/CID class instances to plain POJOs.
+  // BlobRef.toJSON() produces { $type: "blob", ref: { $link: "cid" }, ... }
+  // CID.toString() produces the CID string.
+  const cloned = JSON.parse(JSON.stringify(blocks)) as SerialisedBlock[];
+
+  // Walk the cloned blocks, replacing BlobRefs with PDS URLs
+  replaceBlobs(cloned, did);
+
+  return cloned;
+}
diff --git a/src/lib/styles/leaflet-blocks.css b/src/lib/styles/leaflet-blocks.css
new file mode 100644
index 0000000..3b3636c
--- /dev/null
+++ b/src/lib/styles/leaflet-blocks.css
@@ -0,0 +1,341 @@
+@layer components {
+  /* ================================================================
+   * leaflet-blocks.css — Native Leaflet block rendering
+   *
+   * Styles for LeafletBlocks.svelte and its child components.
+   * Uses the same design tokens as prose.css for visual consistency.
+   * ================================================================ */
+
+  /* ── Text blocks ─────────────────────────────────────────────── */
+
+  .leaflet-text {
+    margin-top: 0;
+    margin-bottom: var(--space-md);
+  }
+
+  .leaflet-text:last-child {
+    margin-bottom: 0;
+  }
+
+  /* ── Headings ───────────────────────────────────────────────── */
+
+  .leaflet-h1,
+  .leaflet-h2,
+  .leaflet-h3,
+  .leaflet-h4,
+  .leaflet-h5,
+  .leaflet-h6 {
+    color: var(--color-ink-950);
+    font-weight: 800;
+    letter-spacing: -0.025em;
+    line-height: 1.2;
+    margin-top: var(--space-lg);
+    margin-bottom: var(--space-sm);
+  }
+
+  .leaflet-h1 {
+    font-size: var(--text-xl);
+  }
+  .leaflet-h2 {
+    font-size: var(--text-lg);
+    font-weight: 700;
+  }
+  .leaflet-h3 {
+    font-size: var(--text-md);
+    font-weight: 700;
+  }
+  .leaflet-h4 {
+    font-size: var(--text-md);
+    font-weight: 600;
+    opacity: 0.9;
+  }
+  .leaflet-h5 {
+    font-size: var(--text-sm);
+    font-weight: 700;
+  }
+  .leaflet-h6 {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    opacity: 0.7;
+  }
+
+  :is(
+    .leaflet-h1,
+    .leaflet-h2,
+    .leaflet-h3,
+    .leaflet-h4,
+    .leaflet-h5,
+    .leaflet-h6
+  ):first-child {
+    margin-top: 0;
+  }
+
+  /* ── Blockquote ────────────────────────────────────────────── */
+
+  .leaflet-blockquote {
+    border-left: 3px solid var(--color-primary-500);
+    padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
+    margin: var(--space-md) 0;
+    color: var(--color-ink-700);
+    font-style: italic;
+  }
+
+  /* ── Code blocks ────────────────────────────────────────────── */
+
+  .leaflet-code {
+    font-family:
+      "JetBrains Mono", ui-monospace, "Cascadia Code", "Fira Code", Menlo,
+      monospace;
+    font-size: var(--text-sm);
+    line-height: 1.7;
+    color: var(--color-ink-800);
+    background-color: var(--surface-raised);
+    border: 1px solid var(--surface-color);
+    border-radius: var(--radius-md);
+    padding: var(--space-md);
+    overflow-x: auto;
+    margin: var(--space-md) 0;
+  }
+
+  /* ── Math blocks ────────────────────────────────────────────── */
+
+  .leaflet-math {
+    font-family:
+      "JetBrains Mono", ui-monospace, "Cascadia Code", "Fira Code", Menlo,
+      monospace;
+    font-size: var(--text-sm);
+    line-height: 1.7;
+    color: var(--color-ink-800);
+    background-color: var(--surface-raised);
+    border: 1px solid var(--surface-color);
+    border-radius: var(--radius-md);
+    padding: var(--space-md);
+    overflow-x: auto;
+    margin: var(--space-md) 0;
+  }
+
+  /* ── Horizontal rule ────────────────────────────────────────── */
+
+  .leaflet-hr {
+    border: none;
+    border-top: 1px solid var(--surface-color);
+    margin: var(--space-lg) 0;
+  }
+
+  /* ── Images ─────────────────────────────────────────────────── */
+
+  .leaflet-image {
+    margin: var(--space-md) 0;
+  }
+
+  .leaflet-image img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--radius-md);
+  }
+
+  .leaflet-image.full-bleed img {
+    border-radius: 0;
+    max-width: none;
+    width: 100%;
+  }
+
+  .leaflet-image-alt {
+    margin-top: var(--space-xs);
+    font-size: var(--text-xs);
+    color: var(--color-ink-600);
+    text-align: center;
+  }
+
+  /* ── Lists ──────────────────────────────────────────────────── */
+
+  .leaflet-list {
+    margin-top: 0;
+    margin-bottom: var(--space-md);
+    padding-left: var(--space-lg);
+  }
+
+  .leaflet-list.ordered {
+    list-style-type: decimal;
+  }
+
+  .leaflet-list.nested {
+    margin-top: var(--space-xs);
+    margin-bottom: var(--space-xs);
+  }
+
+  .leaflet-list-item {
+    margin-bottom: var(--space-xs);
+    line-height: 1.7;
+  }
+
+  .leaflet-list-item:last-child {
+    margin-bottom: 0;
+  }
+
+  /* Checklist items */
+  .leaflet-list-item:has(> input[type="checkbox"]) {
+    list-style: none;
+    margin-left: calc(-1 * var(--space-md));
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-sm);
+  }
+
+  .leaflet-list-item input[type="checkbox"] {
+    accent-color: var(--color-primary-500);
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+  }
+
+  /* Marker colours */
+  .leaflet-list:not(.ordered) > .leaflet-list-item::marker {
+    color: var(--color-primary-500);
+  }
+
+  .leaflet-list.ordered > .leaflet-list-item::marker {
+    color: var(--color-ink-600);
+    font-weight: 600;
+  }
+
+  /* ── Embeds ─────────────────────────────────────────────────── */
+
+  .leaflet-embed {
+    margin: var(--space-md) 0;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    border: 1px solid var(--surface-color);
+  }
+
+  .leaflet-embed iframe {
+    width: 100%;
+    border: none;
+  }
+
+  /* ── Website card ───────────────────────────────────────────── */
+
+  .leaflet-website-card {
+    display: flex;
+    border: 1px solid var(--surface-color);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    text-decoration: none;
+    color: var(--color-ink-900);
+    margin: var(--space-md) 0;
+    transition:
+      background-color var(--duration-fast) var(--ease-out-quart),
+      border-color var(--duration-fast) var(--ease-out-quart);
+  }
+
+  .leaflet-website-card:hover {
+    background-color: var(--surface-raised);
+    border-color: var(--color-primary-500);
+  }
+
+  .website-card-image {
+    width: 120px;
+    flex-shrink: 0;
+    overflow: hidden;
+  }
+
+  .website-card-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .website-card-body {
+    padding: var(--space-sm) var(--space-md);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+    min-width: 0;
+  }
+
+  .website-card-title {
+    font-size: var(--text-sm);
+    font-weight: 700;
+    color: var(--color-ink-950);
+  }
+
+  .website-card-desc {
+    font-size: var(--text-xs);
+    color: var(--color-ink-600);
+    margin: 0;
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .website-card-url {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    font-size: var(--text-xs);
+    color: var(--color-ink-500);
+  }
+
+  /* ── Button ─────────────────────────────────────────────────── */
+
+  .leaflet-button {
+    margin: var(--space-md) 0;
+  }
+
+  .leaflet-button a {
+    display: inline-block;
+    padding: var(--space-sm) var(--space-lg);
+    background-color: var(--color-primary-500);
+    color: var(--color-ink-950);
+    border-radius: var(--radius-md);
+    text-decoration: none;
+    font-weight: 600;
+    font-size: var(--text-sm);
+    transition:
+      background-color var(--duration-fast) var(--ease-out-quart),
+      color var(--duration-fast) var(--ease-out-quart);
+  }
+
+  .leaflet-button a:hover {
+    background-color: var(--color-primary-400);
+  }
+
+  /* ── Bluesky post embed ─────────────────────────────────────── */
+
+  .leaflet-bsky-post {
+    margin: var(--space-md) 0;
+    padding: var(--space-md);
+    border: 1px solid var(--surface-color);
+    border-radius: var(--radius-lg);
+    background-color: var(--surface-raised);
+  }
+
+  .bsky-post-link {
+    color: var(--color-primary-500);
+    text-decoration: none;
+    font-size: var(--text-sm);
+  }
+
+  .bsky-post-link:hover {
+    text-decoration: underline;
+  }
+
+  /* ── Unsupported block placeholder ──────────────────────────── */
+
+  .leaflet-unsupported {
+    margin: var(--space-md) 0;
+    padding: var(--space-sm) var(--space-md);
+    border: 1px dashed var(--surface-color);
+    border-radius: var(--radius-md);
+    font-size: var(--text-xs);
+    color: var(--color-ink-500);
+    text-align: center;
+  }
+
+  .leaflet-unsupported a {
+    color: var(--color-primary-500);
+  }
+}
diff --git a/src/routes/blog/[year]/[month]/[day]/[slug]/+page.server.ts b/src/routes/blog/[year]/[month]/[day]/[slug]/+page.server.ts
index 2f07646..a3e154d 100644
--- a/src/routes/blog/[year]/[month]/[day]/[slug]/+page.server.ts
+++ b/src/routes/blog/[year]/[month]/[day]/[slug]/+page.server.ts
@@ -9,6 +9,10 @@ import { error } from "@sveltejs/kit";
 import { normalizeSlug } from "$lib/utils/slugify";
 import { renderMarkdown } from "$lib/utils/markdown";
 import { leafletProvider } from "$lib/providers/leaflet";
+import {
+  serialiseBlocks,
+  type SerialisedBlock,
+} from "$lib/providers/serialise";
 
 export const load: PageServerLoad = async ({ params, fetch }) => {
   const { year, month, day, slug } = params;
@@ -38,31 +42,42 @@ export const load: PageServerLoad = async ({ params, fetch }) => {
     throw error(404, "Post not found");
   }
 
-  let markdown = "";
+  // Serialise Leaflet blocks — replaces BlobRef/CID instances with PDS URLs
+  let blocks: SerialisedBlock[] = [];
+  let renderedContent = "";
+
   if (
     post.content &&
     typeof post.content === "object" &&
     leafletProvider.matches(post.content)
   ) {
+    // Native block rendering: serialise blocks for Svelte components
+    blocks = await serialiseBlocks(post.content, PUBLIC_ATPROTO_DID, fetchBlob);
+
+    // Fallback: also render markdown for search, RSS, and non-JS contexts
     const result = await leafletProvider.toMarkdown(post.content, {
       fetchBlob,
     });
-    markdown = result.markdown;
+    renderedContent = await renderMarkdown(result.markdown);
   } else {
-    markdown =
+    const markdown =
       typeof post.content === "string" ? post.content : post.textContent || "";
+    renderedContent = await renderMarkdown(markdown);
   }
 
-  const renderedContent = await renderMarkdown(markdown);
-
   // Fetch comments via Constellation + Slingshot
   const comments = await fetchComments(post.uri, fetch);
 
+  // Strip raw content before serialisation — it contains BlobRef/CID class
+  // instances that SvelteKit cannot dehydrate across the server boundary.
+  const { content: _content, ...serialisable } = post;
+
   return {
     post: {
-      ...post,
+      ...serialisable,
       createdAt: post.publishedAt,
       renderedContent,
+      blocks,
     },
     blog: blogPublication
       ? {
diff --git a/src/routes/blog/[year]/[month]/[day]/[slug]/+page.svelte b/src/routes/blog/[year]/[month]/[day]/[slug]/+page.svelte
index 716e123..5a6368f 100644
--- a/src/routes/blog/[year]/[month]/[day]/[slug]/+page.svelte
+++ b/src/routes/blog/[year]/[month]/[day]/[slug]/+page.svelte
@@ -2,10 +2,14 @@
     import ShareButtons from '$lib/components/ShareButtons.svelte';
     import SiteHead from '$lib/components/SiteHead.svelte';
     import TableOfContents from '$lib/components/TableOfContents.svelte';
+    import LeafletBlocks from '$lib/components/leaflet/LeafletBlocks.svelte';
     import { Rss, MessageCircle } from '@lucide/svelte';
     import { page } from '$app/state';
 
     let { data } = $props();
+
+    /** Use native block rendering when blocks are available. */
+    let useBlocks = $derived(data.post.blocks && data.post.blocks.length > 0);
 </script>
 
 <SiteHead title={data.post.title} description={data.blog?.description} />
@@ -24,7 +28,11 @@
         </aside>
         <div class="post-body">
             <article class="prose">
-                {@html data.post.renderedContent}
+                {#if useBlocks}
+                    <LeafletBlocks blocks={data.post.blocks} />
+                {:else}
+                    {@html data.post.renderedContent}
+                {/if}
             </article>
 
             <div class="post-after">
diff --git a/src/routes/layout.css b/src/routes/layout.css
index 720af64..aa6ad31 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -1,3 +1,4 @@
 @import "tailwindcss";
 @import "../lib/styles/theme.css";
 @import "../lib/styles/content.css";
+@import "../lib/styles/leaflet-blocks.css";