nc9 · Aug 26, 2026 · Aug 25, 2026 · Aug 25, 2026
diff --git a/README.md b/README.md
@@ -42,7 +42,7 @@
 - **Custom components.** Drop an `.astro` component into `components/` and use it from MDX. Hot-reloads, no registration.
 - **Drafts.** Mark a page `draft: true`. Hidden in production, visible in `tangly dev`, shippable with `--include-drafts`.
 - **Readable config errors.** `tangly check` reports problems key-by-key with line numbers, plain-English reasons, and did-you-mean fixes.
-- **Fast dev, ejectable.** Astro 6 + Vite under the hood: HMR under 250ms, cold start under 2s on a hundred pages. `tangly eject` to a raw Astro project whenever you outgrow the magic.
+- **Fast dev, ejectable.** Astro 7 + Vite under the hood: HMR under 250ms, cold start under 2s on a hundred pages. `tangly eject` to a raw Astro project whenever you outgrow the magic.
 
 ## Install
 

diff --git a/bun.lock b/bun.lock
diff --git a/docs/architecture/overview.mdx b/docs/architecture/overview.mdx
@@ -6,7 +6,7 @@ icon: "blocks"
 
 ## Architecture
 
-Tangly is a thin layer over Astro 6. Your project is `docs.json` + `*.mdx`; Tangly synthesizes an Astro app, loads your content via virtual modules, and renders prerendered HTML through a single catch-all route.
+Tangly is a thin layer over Astro 7. Your project is `docs.json` + `*.mdx`; Tangly synthesizes an Astro app, loads your content via virtual modules, and renders prerendered HTML through a single catch-all route.
 
 ### High-level flow
 

diff --git a/docs/changelog.mdx b/docs/changelog.mdx
@@ -5,6 +5,31 @@ description: Release notes for Tangly.
 
 Notable changes per release. Each entry is authored as an [`<Update>`](/reference/components/callouts#update) block, the same component you can use in your own docs.
 
+<Update label="v0.4.0" description="25 Aug 26" tags={["feat", "fix"]}>
+  ## Highlights
+
+  Tangly runs on Astro 7.
+
+  - **Astro 7 and Vite 8.** The runtime moves to Astro 7, `@astrojs/mdx` 7, and the current Cloudflare, Node, Vercel and Preact adapters. Nothing changes in your project: `docs.json` and your MDX are untouched, and `tangly eject` now hands you an Astro 7 app. ([#17](https://github.com/tanglydocs/tangly/pull/17))
+  - **The upgrade fixes a silent-failure mode you may already have hit.** If your project pinned Astro 7 itself (a root `overrides` entry, a monorepo that hoists it, anything that wins over Tangly's own range), every code block on your site rendered as an unstyled `<pre>`: no syntax highlighting, no copy button, no annotations. Astro 7 deprecated `remarkPlugins`/`rehypePlugins` on `mdx({...})` and stopped running them, and nothing failed: the build exited 0, `tangly check --strict` passed, every page was written. The plugin pipeline now lives on `markdown.processor`, which MDX inherits.
+  - **A release gate so it cannot happen again.** Both tarball smokes build a project with a fenced code block and assert the output really contains a highlighted `tangly-code-figure`. A pipeline that stops running now fails the release instead of shipping unstyled docs.
+
+  ## Changes
+
+  ### Features
+  - feat(runtime): support Astro 7, `@astrojs/mdx` 7 and Vite 8 ([#17](https://github.com/tanglydocs/tangly/pull/17))
+
+  ### Fixes
+  - fix(runtime): move the remark/rehype pipeline to `markdown.processor`, so code highlighting and code-block chrome survive on Astro 7
+  - fix(build): pin `@types/hast`. Astro 7 pulled a second copy, and hast's nominal types made `hastscript`'s `Child` reject an `ElementContent` from the other copy
+
+  ### Tests
+  - test(build): both tarball smokes assert the built HTML contains a highlighted code figure
+
+  ### Docs
+  - docs: Astro 6 → 7 across the introduction, architecture overview and FAQ
+</Update>
+
 <Update label="v0.3.0" description="25 Aug 26" tags={["feat"]}>
   ## Highlights
 

diff --git a/docs/introduction.mdx b/docs/introduction.mdx
@@ -39,7 +39,7 @@ It's small, it's fast, and it works the way coding agents already want to work.
 - **Custom components.** Drop an `.astro` component into `components/` and use it from MDX. Hot-reloads, no registration.
 - **Drafts.** Mark a page `draft: true`. Hidden in production, visible in `tangly dev`, shippable with `--include-drafts`.
 - **Readable config errors.** `tangly check` reports problems key-by-key with line numbers, plain-English reasons, and did-you-mean fixes.
-- **Fast dev, ejectable.** Astro 6 + Vite under the hood: HMR under 250ms, cold start under 2s on a hundred pages. `tangly eject` to a raw Astro project whenever you outgrow the magic.
+- **Fast dev, ejectable.** Astro 7 + Vite under the hood: HMR under 250ms, cold start under 2s on a hundred pages. `tangly eject` to a raw Astro project whenever you outgrow the magic.
 
 ### What you write
 

diff --git a/docs/troubleshooting/faq.mdx b/docs/troubleshooting/faq.mdx
@@ -78,7 +78,7 @@ The biggest variable is your content's MDX complexity. Pages with lots of compon
 
 #### "Will Tangly do incremental builds?"
 
-Astro 6 has incremental builds; Tangly inherits them. So yes, between full rebuilds, dev-server edits are sub-second. For CI builds, "incremental" depends on your CI provider's caching. Most pipelines cache `node_modules` but not `.astro/`. Caching `.astro/` between CI runs gives a 5–10× speedup.
+Astro 7 has incremental builds; Tangly inherits them. So yes, between full rebuilds, dev-server edits are sub-second. For CI builds, "incremental" depends on your CI provider's caching. Most pipelines cache `node_modules` but not `.astro/`. Caching `.astro/` between CI runs gives a 5–10× speedup.
 
 ### Authoring
 

diff --git a/docs/wrangler.jsonc b/docs/wrangler.jsonc
@@ -1,6 +1,7 @@
 {
   "$schema": "../node_modules/wrangler/config-schema.json",
   "name": "tangly-docs-site",
+  "account_id": "0605766fb0a185558e614a85f2a86a80",
   "compatibility_date": "2026-05-02",
   "assets": {
     "directory": "./dist",

diff --git a/examples/_site/index.html b/examples/_site/index.html
@@ -0,0 +1,239 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Tangly examples — six themes, six demos</title>
+    <meta name="description" content="Live demos of every Tangly theme. Each is a real Tangly project rendering its own docs.json + MDX." />
+    <link rel="icon" href="/favicon.ico" />
+    <style>
+      :root {
+        --ink: #0b0b0f;
+        --paper: #fafaf7;
+        --mute: #6b6b70;
+        --line: #e6e4de;
+        --tang-500: #f97316;
+        --tang-600: #ea580c;
+        --tang-700: #c2410c;
+      }
+      * { box-sizing: border-box; }
+      html, body { margin: 0; padding: 0; }
+      body {
+        background: var(--paper);
+        color: var(--ink);
+        font: 400 15px/1.5 "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
+        -webkit-font-smoothing: antialiased;
+      }
+      a { color: inherit; }
+      .wrap { max-width: 1100px; margin: 0 auto; padding: 88px 32px 96px; }
+      .eyebrow {
+        font-family: "JetBrains Mono", ui-monospace, monospace;
+        font-size: 11px;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        color: var(--tang-700);
+        margin: 0 0 14px;
+      }
+      h1 {
+        font-size: 56px;
+        line-height: 1.05;
+        letter-spacing: -0.025em;
+        font-weight: 800;
+        margin: 0;
+      }
+      h1 .accent {
+        background: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+      }
+      .lede {
+        max-width: 560px;
+        margin: 18px 0 0;
+        color: var(--mute);
+        font-size: 16px;
+        line-height: 1.55;
+      }
+      .lede code {
+        font-family: "JetBrains Mono", ui-monospace, monospace;
+        font-size: 13.5px;
+        color: var(--ink);
+      }
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+        gap: 18px;
+        margin-top: 56px;
+      }
+      .card {
+        display: flex;
+        flex-direction: column;
+        text-decoration: none;
+        background: var(--paper);
+        border: 1px solid var(--line);
+        border-radius: 12px;
+        overflow: hidden;
+        transition: border-color 0.15s ease, transform 0.15s ease;
+      }
+      .card:hover { border-color: var(--tang-600); transform: translateY(-1px); }
+      .card-head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px 14px;
+        border-bottom: 1px solid var(--line);
+      }
+      .card-head .name {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-weight: 600;
+        font-size: 13px;
+      }
+      .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--tang-600); }
+      .badge {
+        font-family: "JetBrains Mono", ui-monospace, monospace;
+        font-size: 9.5px;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        color: var(--mute);
+        border: 1px solid var(--line);
+        border-radius: 999px;
+        padding: 1px 7px;
+      }
+      .card-body { padding: 22px 18px 26px; flex: 1; }
+      .demo-name {
+        font-size: 19px;
+        line-height: 1.25;
+        font-weight: 600;
+        letter-spacing: -0.015em;
+        margin: 0 0 6px;
+      }
+      .demo-desc {
+        font-size: 13px;
+        line-height: 1.55;
+        color: var(--mute);
+        margin: 0;
+      }
+      .card-foot {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 14px;
+        border-top: 1px solid var(--line);
+        font-family: "JetBrains Mono", ui-monospace, monospace;
+        font-size: 11px;
+        color: var(--mute);
+      }
+      .card-foot .open { color: var(--ink); font-weight: 500; }
+      .card-foot .open .arrow { color: var(--tang-600); }
+      footer {
+        margin-top: 88px;
+        padding-top: 28px;
+        border-top: 1px solid var(--line);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-family: "JetBrains Mono", ui-monospace, monospace;
+        font-size: 11px;
+        color: var(--mute);
+      }
+      footer ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 20px; }
+      footer a:hover { color: var(--ink); }
+    </style>
+  </head>
+  <body>
+    <div class="wrap">
+      <p class="eyebrow">Examples</p>
+      <h1><span>Six themes.</span> <span class="accent">Same Markdown.</span></h1>
+      <p class="lede">
+        Each demo below is a real Tangly project — its own <code>docs.json</code> +
+        MDX, rendered by the same CLI you'd run locally. Pick a register, swap a
+        one-line theme value.
+      </p>
+
+      <div class="grid">
+        <a class="card" href="/tang/">
+          <div class="card-head">
+            <div class="name"><span class="dot"></span> Tang</div>
+            <div class="badge">default</div>
+          </div>
+          <div class="card-body">
+            <p class="demo-name">Cipher</p>
+            <p class="demo-desc">Encrypt anything in three lines of code. — Mintlify-Mint inspired sidebar, on-page TOC, monospace headings.</p>
+          </div>
+          <div class="card-foot"><span>tangly init --theme tang</span><span class="open">Open <span class="arrow">→</span></span></div>
+        </a>
+
+        <a class="card" href="/pith/">
+          <div class="card-head">
+            <div class="name"><span class="dot"></span> Pith</div>
+            <div class="badge">editorial</div>
+          </div>
+          <div class="card-body">
+            <p class="demo-name">On Craft</p>
+            <p class="demo-desc">A handbook of small ideas about making things. — Serif headings, cream surface, generous measure.</p>
+          </div>
+          <div class="card-foot"><span>tangly init --theme pith</span><span class="open">Open <span class="arrow">→</span></span></div>
+        </a>
+
+        <a class="card" href="/pip/">
+          <div class="card-head">
+            <div class="name"><span class="dot"></span> Pip</div>
+            <div class="badge">minimal</div>
+          </div>
+          <div class="card-body">
+            <p class="demo-name">Sprig</p>
+            <p class="demo-desc">A tiny CLI for tagging your shell history. — No sidebar. Single-column reading mode.</p>
+          </div>
+          <div class="card-foot"><span>tangly init --theme pip</span><span class="open">Open <span class="arrow">→</span></span></div>
+        </a>
+
+        <a class="card" href="/readable/">
+          <div class="card-head">
+            <div class="name"><span class="dot"></span> Readable</div>
+            <div class="badge">book-like</div>
+          </div>
+          <div class="card-body">
+            <p class="demo-name">The Long Wait</p>
+            <p class="demo-desc">A short novel in three chapters. — Narrow column, large body type, drop caps.</p>
+          </div>
+          <div class="card-foot"><span>tangly init --theme readable</span><span class="open">Open <span class="arrow">→</span></span></div>
+        </a>
+
+        <a class="card" href="/geist/">
+          <div class="card-head">
+            <div class="name"><span class="dot"></span> Geist</div>
+            <div class="badge">developer</div>
+          </div>
+          <div class="card-body">
+            <p class="demo-name">Halo</p>
+            <p class="demo-desc">Ship apps to the edge in 30 seconds. — Vercel/Linear register. Ink ground, thin rules, dense type scale.</p>
+          </div>
+          <div class="card-foot"><span>tangly init --theme geist</span><span class="open">Open <span class="arrow">→</span></span></div>
+        </a>
+
+        <a class="card" href="/starter/">
+          <div class="card-head">
+            <div class="name"><span class="dot"></span> Starter</div>
+            <div class="badge">scaffold</div>
+          </div>
+          <div class="card-body">
+            <p class="demo-name">Tangly Starter</p>
+            <p class="demo-desc">Three sections, three pages, no opinions. The fastest way to start typing.</p>
+          </div>
+          <div class="card-foot"><span>tangly init --theme starter</span><span class="open">Open <span class="arrow">→</span></span></div>
+        </a>
+      </div>
+
+      <footer>
+        <span>tangly · MIT · examples.tangly.dev</span>
+        <ul>
+          <li><a href="https://tangly.dev">tangly.dev</a></li>
+          <li><a href="https://docs.tangly.dev">Docs</a></li>
+          <li><a href="https://github.com/tanglydocs/tangly">GitHub</a></li>
+        </ul>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -60,7 +60,8 @@
     "vitest": "^4"
   },
   "overrides": {
-    "vite": "^7.3.2"
+    "@types/hast": "3.0.5",
+    "vite": "^8.2.2"
   },
   "engines": {
     "bun": ">=1.2.0"

diff --git a/packages/tangly/package.json b/packages/tangly/package.json
@@ -66,11 +66,12 @@
     "test": "vitest run --passWithNoTests"
   },
   "dependencies": {
-    "@astrojs/cloudflare": "^13.2.2",
-    "@astrojs/mdx": "^5.0.4",
-    "@astrojs/node": "^10.0.6",
-    "@astrojs/preact": "^5.1.5",
-    "@astrojs/vercel": "^10.0.6",
+    "@astrojs/cloudflare": "^14.2.4",
+    "@astrojs/markdown-remark": "^7.2.4",
+    "@astrojs/mdx": "^7.0.8",
+    "@astrojs/node": "^11.1.4",
+    "@astrojs/preact": "^6.0.4",
+    "@astrojs/vercel": "^11.0.8",
     "@clack/prompts": "^1.2.0",
     "@mdx-js/mdx": "^3.1.1",
     "@resvg/resvg-wasm": "^2.6.2",
@@ -86,7 +87,7 @@
     "@tanglydocs/theme-readable": "workspace:*",
     "@tanglydocs/theme-tang": "workspace:*",
     "@tanglydocs/theme-ui": "workspace:*",
-    "astro": "^6.1.10",
+    "astro": "^7.2.6",
     "chokidar": "^5.0.0",
     "citty": "^0.2.2",
     "github-slugger": "^2.0.0",
@@ -115,11 +116,11 @@
     "zod": "^4.3.6"
   },
   "devDependencies": {
-    "vite": "^7.3.2",
+    "vite": "^8.2.2",
     "vitest": "^4.1.5"
   },
   "peerDependencies": {
-    "vite": "^7.3.2"
+    "vite": "^8.2.2"
   },
   "engines": {
     "node": ">=20.0.0"