diff --git a/.agents/skills/data-client-rest/references/expiry-policy.md b/.agents/skills/data-client-rest/references/expiry-policy.md
index c5c20f474268..cd082dd7ad5a 100644
--- a/.agents/skills/data-client-rest/references/expiry-policy.md
+++ b/.agents/skills/data-client-rest/references/expiry-policy.md
@@ -39,6 +39,8 @@ to make it becomes [stale](#stale) almost instantly; or a very large number to s
 Toggling between 'first' and 'second' changes the parameters. If the data is still considered fresh
 you will continue to see the old time without any refresh.
 
+Files with a `route` are pages mounted at that path, with its params as props; `Link` and `useNavigate()` stand for your router (with react-router, read params with `useParams()`).
+
 ```ts title="api/lastUpdated"
 import { Entity, RestEndpoint } from '@data-client/rest';
 import { Temporal } from 'temporal-polyfill';
@@ -64,11 +66,11 @@ import { lastUpdated } from './api/lastUpdated';
 export const getUpdated = lastUpdated.extend({ dataExpiryLength: 10000 });
 ```
 
-```tsx title="TimePage"
+```tsx title="TimePage" route="/time/:id" start="/time/1"
 import { useSuspense } from '@data-client/react';
 import { getUpdated } from './getUpdated';
 
-export default function TimePage({ id }) {
+export default function TimePage({ id }: { id: string }) {
   const { updatedAt } = useSuspense(getUpdated, { id });
   return (
     <div>
@@ -81,34 +83,21 @@ export default function TimePage({ id }) {
 }
 ```
 
-```tsx title="Navigator"
-import React from 'react';
-import { AsyncBoundary } from '@data-client/react';
-import TimePage from './TimePage';
-
-function Navigator() {
-  const [id, setId] = React.useState('1');
-  const handleChange = e => setId(e.currentTarget.value);
+```tsx title="Navigator" layout
+export default function Navigator({ children }) {
   return (
     <div>
-      <div>
-        <button value="1" onClick={handleChange}>
-          First
-        </button>
-        <button value="2" onClick={handleChange}>
-          Second
-        </button>
-      </div>
-      <AsyncBoundary fallback={<div>loading...</div>}>
-        <TimePage id={id} />
-      </AsyncBoundary>
+      <nav>
+        <Link to="/time/1">First</Link>
+        <Link to="/time/2">Second</Link>
+      </nav>
+      {children}
       <div>
         Current Time: <CurrentTime />
       </div>
     </div>
   );
 }
-render(<Navigator />);
 ```
 
 <details>
@@ -166,8 +155,10 @@ const NoRetryResource = resource({
 [Endpoint.invalidIfStale](https://dataclient.io/rest/api/Endpoint#invalidifstale) eliminates the '[stale](#stale)' status, making data
 that expires immediately be considered '[invalid](#invalid)'.
 
-This is demonstrated by the component suspending once its data goes stale. If the data is still
-within the expiry time it just continues to display it.
+This is demonstrated by the page suspending once its data goes stale (navigation waits on the progress bar).
+If the data is still within the expiry time it just continues to display it.
+
+Files with a `route` are pages mounted at that path, with its params as props; `Link` and `useNavigate()` stand for your router (with react-router, read params with `useParams()`).
 
 ```ts title="api/lastUpdated"
 import { Entity, RestEndpoint } from '@data-client/rest';
@@ -197,11 +188,11 @@ export const getUpdated = lastUpdated.extend({
 });
 ```
 
-```tsx title="TimePage"
+```tsx title="TimePage" route="/time/:id" start="/time/1"
 import { useSuspense } from '@data-client/react';
 import { getUpdated } from './getUpdated';
 
-export default function TimePage({ id }) {
+export default function TimePage({ id }: { id: string }) {
   const { updatedAt } = useSuspense(getUpdated, { id });
   return (
     <div>
@@ -214,34 +205,21 @@ export default function TimePage({ id }) {
 }
 ```
 
-```tsx title="Navigator"
-import React from 'react';
-import { AsyncBoundary } from '@data-client/react';
-import TimePage from './TimePage';
-
-function Navigator() {
-  const [id, setId] = React.useState('1');
-  const handleChange = e => setId(e.currentTarget.value);
+```tsx title="Navigator" layout
+export default function Navigator({ children }) {
   return (
     <div>
-      <div>
-        <button value="1" onClick={handleChange}>
-          First
-        </button>
-        <button value="2" onClick={handleChange}>
-          Second
-        </button>
-      </div>
-      <AsyncBoundary fallback={<div>loading...</div>}>
-        <TimePage id={id} />
-      </AsyncBoundary>
+      <nav>
+        <Link to="/time/1">First</Link>
+        <Link to="/time/2">Second</Link>
+      </nav>
+      {children}
       <div>
         Current Time: <CurrentTime />
       </div>
     </div>
   );
 }
-render(<Navigator />);
 ```
 
 ## Force refresh
diff --git a/.agents/skills/data-client-rest/references/expiry-policy.vue.md b/.agents/skills/data-client-rest/references/expiry-policy.vue.md
index 993a1a6bd0b3..8fdf3744105e 100644
--- a/.agents/skills/data-client-rest/references/expiry-policy.vue.md
+++ b/.agents/skills/data-client-rest/references/expiry-policy.vue.md
@@ -36,6 +36,8 @@ to make it becomes [stale](#stale) almost instantly; or a very large number to s
 Toggling between 'first' and 'second' changes the parameters. If the data is still considered fresh
 you will continue to see the old time without any refresh.
 
+Files with a `route` are pages mounted at that path, with its params as props (vue-router `props: true`).
+
 ```ts title="api/lastUpdated"
 import { Entity, RestEndpoint } from '@data-client/rest';
 import { Temporal } from 'temporal-polyfill';
@@ -61,7 +63,7 @@ import { lastUpdated } from './api/lastUpdated';
 export const getUpdated = lastUpdated.extend({ dataExpiryLength: 10000 });
 ```
 
-```html title="TimePage.vue"
+```html title="TimePage.vue" route="/time/:id" start="/time/1"
 <script setup lang="ts">
   import { useSuspense } from '@data-client/vue';
   import { getUpdated } from './getUpdated';
@@ -78,25 +80,24 @@ export const getUpdated = lastUpdated.extend({ dataExpiryLength: 10000 });
 </template>
 ```
 
-```html title="Navigator.vue"
-<script setup lang="ts">
-  import { ref } from 'vue';
-  import TimePage from './TimePage.vue';
-
-  const id = ref('1');
-</script>
-
+```html title="Navigator.vue" layout
 <template>
   <div>
-    <div>
-      <button @click="id = '1'">First</button>
-      <button @click="id = '2'">Second</button>
-    </div>
-    <!-- :key remounts TimePage so it suspends for the new id -->
-    <Suspense timeout="0">
-      <TimePage :key="id" :id="id" />
-      <template #fallback><div>loading...</div></template>
-    </Suspense>
+    <nav>
+      <RouterLink to="/time/1">First</RouterLink>
+      <RouterLink to="/time/2">Second</RouterLink>
+    </nav>
+    <RouterView v-slot="{ Component, route }">
+      <!-- :key remounts TimePage so it suspends for the new id -->
+      <Suspense timeout="0">
+        <component
+          :is="Component"
+          :key="route.fullPath"
+          :id="route.params.id"
+        />
+        <template #fallback><div>loading...</div></template>
+      </Suspense>
+    </RouterView>
   </div>
 </template>
 ```
@@ -156,8 +157,10 @@ const NoRetryResource = resource({
 [Endpoint.invalidIfStale](https://dataclient.io/rest/api/Endpoint#invalidifstale) eliminates the '[stale](#stale)' status, making data
 that expires immediately be considered '[invalid](#invalid)'.
 
-This is demonstrated by the component suspending once its data goes stale. If the data is still
-within the expiry time it just continues to display it.
+This is demonstrated by the page suspending once its data goes stale.
+If the data is still within the expiry time it just continues to display it.
+
+Files with a `route` are pages mounted at that path, with its params as props (vue-router `props: true`).
 
 ```ts title="api/lastUpdated"
 import { Entity, RestEndpoint } from '@data-client/rest';
@@ -187,7 +190,7 @@ export const getUpdated = lastUpdated.extend({
 });
 ```
 
-```html title="TimePage.vue"
+```html title="TimePage.vue" route="/time/:id" start="/time/1"
 <script setup lang="ts">
   import { useSuspense } from '@data-client/vue';
   import { getUpdated } from './getUpdated';
@@ -204,25 +207,24 @@ export const getUpdated = lastUpdated.extend({
 </template>
 ```
 
-```html title="Navigator.vue"
-<script setup lang="ts">
-  import { ref } from 'vue';
-  import TimePage from './TimePage.vue';
-
-  const id = ref('1');
-</script>
-
+```html title="Navigator.vue" layout
 <template>
   <div>
-    <div>
-      <button @click="id = '1'">First</button>
-      <button @click="id = '2'">Second</button>
-    </div>
-    <!-- :key remounts TimePage so it suspends for the new id -->
-    <Suspense timeout="0">
-      <TimePage :key="id" :id="id" />
-      <template #fallback><div>loading...</div></template>
-    </Suspense>
+    <nav>
+      <RouterLink to="/time/1">First</RouterLink>
+      <RouterLink to="/time/2">Second</RouterLink>
+    </nav>
+    <RouterView v-slot="{ Component, route }">
+      <!-- :key remounts TimePage so it suspends for the new id -->
+      <Suspense timeout="0">
+        <component
+          :is="Component"
+          :key="route.fullPath"
+          :id="route.params.id"
+        />
+        <template #fallback><div>loading...</div></template>
+      </Suspense>
+    </RouterView>
   </div>
 </template>
 ```
diff --git a/docs/core/concepts/error-policy.md b/docs/core/concepts/error-policy.md
index 2be89c85f00a..ac04c4154461 100644
--- a/docs/core/concepts/error-policy.md
+++ b/docs/core/concepts/error-policy.md
@@ -40,7 +40,7 @@ A soft error keeps showing the last data. Hard errors (and soft ones with nothin
 
 </SiteOnly>
 
-<FrameworkPlayground fixtures={[
+<FrameworkPlayground row fixtures={[
 {
 endpoint: new RestEndpoint({
 path: '/api/currentTime/:id',
diff --git a/docs/core/concepts/expiry-policy.md b/docs/core/concepts/expiry-policy.md
index 2beb53c1a7f9..d274674f9ee5 100644
--- a/docs/core/concepts/expiry-policy.md
+++ b/docs/core/concepts/expiry-policy.md
@@ -62,7 +62,7 @@ to make it becomes [stale](#stale) almost instantly; or a very large number to s
 Toggling between 'first' and 'second' changes the parameters. If the data is still considered fresh
 you will continue to see the old time without any refresh.
 
-<FrameworkPlayground fixtures={[
+<FrameworkPlayground row defaultTab="getUpdated" fixtures={[
 {
 endpoint: new RestEndpoint({
 path: '/api/currentTime/:id',
@@ -106,11 +106,11 @@ export const getUpdated = lastUpdated.extend({ dataExpiryLength: 10000 });
 
 :::react
 
-```tsx title="TimePage"
+```tsx title="TimePage" route="/time/:id" start="/time/1"
 import { useSuspense } from '@data-client/react';
 import { getUpdated } from './getUpdated';
 
-export default function TimePage({ id }) {
+export default function TimePage({ id }: { id: string }) {
   const { updatedAt } = useSuspense(getUpdated, { id });
   return (
     <div>
@@ -123,41 +123,28 @@ export default function TimePage({ id }) {
 }
 ```
 
-```tsx title="Navigator" collapsed
-import React from 'react';
-import { AsyncBoundary } from '@data-client/react';
-import TimePage from './TimePage';
-
-function Navigator() {
-  const [id, setId] = React.useState('1');
-  const handleChange = e => setId(e.currentTarget.value);
+```tsx title="Navigator" layout collapsed
+export default function Navigator({ children }) {
   return (
     <div>
-      <div>
-        <button value="1" onClick={handleChange}>
-          First
-        </button>
-        <button value="2" onClick={handleChange}>
-          Second
-        </button>
-      </div>
-      <AsyncBoundary fallback={<div>loading...</div>}>
-        <TimePage id={id} />
-      </AsyncBoundary>
+      <nav>
+        <Link to="/time/1">First</Link>
+        <Link to="/time/2">Second</Link>
+      </nav>
+      {children}
       <div>
         Current Time: <CurrentTime />
       </div>
     </div>
   );
 }
-render(<Navigator />);
 ```
 
 :::
 
 :::vue
 
-```html title="TimePage.vue"
+```html title="TimePage.vue" route="/time/:id" start="/time/1"
 <script setup lang="ts">
   import { useSuspense } from '@data-client/vue';
   import { getUpdated } from './getUpdated';
@@ -174,25 +161,24 @@ render(<Navigator />);
 </template>
 ```
 
-```html title="Navigator.vue" collapsed
-<script setup lang="ts">
-  import { ref } from 'vue';
-  import TimePage from './TimePage.vue';
-
-  const id = ref('1');
-</script>
-
+```html title="Navigator.vue" layout collapsed
 <template>
   <div>
-    <div>
-      <button @click="id = '1'">First</button>
-      <button @click="id = '2'">Second</button>
-    </div>
-    <!-- :key remounts TimePage so it suspends for the new id -->
-    <Suspense timeout="0">
-      <TimePage :key="id" :id="id" />
-      <template #fallback><div>loading...</div></template>
-    </Suspense>
+    <nav>
+      <RouterLink to="/time/1">First</RouterLink>
+      <RouterLink to="/time/2">Second</RouterLink>
+    </nav>
+    <RouterView v-slot="{ Component, route }">
+      <!-- :key remounts TimePage so it suspends for the new id -->
+      <Suspense timeout="0">
+        <component
+          :is="Component"
+          :key="route.fullPath"
+          :id="route.params.id"
+        />
+        <template #fallback><div>loading...</div></template>
+      </Suspense>
+    </RouterView>
   </div>
 </template>
 ```
@@ -255,10 +241,10 @@ const NoRetryResource = resource({
 [Endpoint.invalidIfStale](/rest/api/Endpoint#invalidifstale) eliminates the '[stale](#stale)' status, making data
 that expires immediately be considered '[invalid](#invalid)'.
 
-This is demonstrated by the component suspending once its data goes stale. If the data is still
-within the expiry time it just continues to display it.
+This is demonstrated by the page suspending once its data goes stale:react[ (navigation waits on the progress bar)].
+If the data is still within the expiry time it just continues to display it.
 
-<FrameworkPlayground fixtures={[
+<FrameworkPlayground row defaultTab="getUpdated" fixtures={[
 {
 endpoint: new RestEndpoint({
 path: '/api/currentTime/:id',
@@ -305,11 +291,11 @@ export const getUpdated = lastUpdated.extend({
 
 :::react
 
-```tsx title="TimePage"
+```tsx title="TimePage" route="/time/:id" start="/time/1"
 import { useSuspense } from '@data-client/react';
 import { getUpdated } from './getUpdated';
 
-export default function TimePage({ id }) {
+export default function TimePage({ id }: { id: string }) {
   const { updatedAt } = useSuspense(getUpdated, { id });
   return (
     <div>
@@ -322,41 +308,28 @@ export default function TimePage({ id }) {
 }
 ```
 
-```tsx title="Navigator" collapsed
-import React from 'react';
-import { AsyncBoundary } from '@data-client/react';
-import TimePage from './TimePage';
-
-function Navigator() {
-  const [id, setId] = React.useState('1');
-  const handleChange = e => setId(e.currentTarget.value);
+```tsx title="Navigator" layout collapsed
+export default function Navigator({ children }) {
   return (
     <div>
-      <div>
-        <button value="1" onClick={handleChange}>
-          First
-        </button>
-        <button value="2" onClick={handleChange}>
-          Second
-        </button>
-      </div>
-      <AsyncBoundary fallback={<div>loading...</div>}>
-        <TimePage id={id} />
-      </AsyncBoundary>
+      <nav>
+        <Link to="/time/1">First</Link>
+        <Link to="/time/2">Second</Link>
+      </nav>
+      {children}
       <div>
         Current Time: <CurrentTime />
       </div>
     </div>
   );
 }
-render(<Navigator />);
 ```
 
 :::
 
 :::vue
 
-```html title="TimePage.vue"
+```html title="TimePage.vue" route="/time/:id" start="/time/1"
 <script setup lang="ts">
   import { useSuspense } from '@data-client/vue';
   import { getUpdated } from './getUpdated';
@@ -373,25 +346,24 @@ render(<Navigator />);
 </template>
 ```
 
-```html title="Navigator.vue" collapsed
-<script setup lang="ts">
-  import { ref } from 'vue';
-  import TimePage from './TimePage.vue';
-
-  const id = ref('1');
-</script>
-
+```html title="Navigator.vue" layout collapsed
 <template>
   <div>
-    <div>
-      <button @click="id = '1'">First</button>
-      <button @click="id = '2'">Second</button>
-    </div>
-    <!-- :key remounts TimePage so it suspends for the new id -->
-    <Suspense timeout="0">
-      <TimePage :key="id" :id="id" />
-      <template #fallback><div>loading...</div></template>
-    </Suspense>
+    <nav>
+      <RouterLink to="/time/1">First</RouterLink>
+      <RouterLink to="/time/2">Second</RouterLink>
+    </nav>
+    <RouterView v-slot="{ Component, route }">
+      <!-- :key remounts TimePage so it suspends for the new id -->
+      <Suspense timeout="0">
+        <component
+          :is="Component"
+          :key="route.fullPath"
+          :id="route.params.id"
+        />
+        <template #fallback><div>loading...</div></template>
+      </Suspense>
+    </RouterView>
   </div>
 </template>
 ```
@@ -409,7 +381,7 @@ We sometimes want to fetch new data; while continuing to show the old (stale) da
 [Controller.fetch](../api/Controller#fetch) can be used to trigger a fetch while still showing
 the previous data. This can be done even with 'fresh' data.
 
-<FrameworkPlayground fixtures={[
+<FrameworkPlayground row fixtures={[
 {
 endpoint: new RestEndpoint({
 path: '/api/currentTime/:id',
@@ -497,7 +469,7 @@ render(<ShowTime />);
 
 [Controller.expireAll()](../api/Controller.md#expireAll) sets all responses' [expiry status](#expiry-status) matching `testKey` to [Stale](#stale).
 
-<FrameworkPlayground fixtures={[
+<FrameworkPlayground row fixtures={[
 {
 endpoint: new RestEndpoint({
 path: '/api/currentTime/:id',
@@ -657,7 +629,7 @@ is `true`. Components mounted after invalidation suspend until the new data arri
 
 In this example [invalidating the endpoint](../api/Controller.md#invalidate) :react[shows the loading fallback since the data is not allowed to be displayed]:vue[refetches it, even though its data is still fresh].
 
-<FrameworkPlayground fixtures={[
+<FrameworkPlayground row fixtures={[
 {
 endpoint: new RestEndpoint({
 path: '/api/currentTime/:id',
diff --git a/docs/core/concepts/validation.md b/docs/core/concepts/validation.md
index 888aba4f3d87..5119ecd2fac7 100644
--- a/docs/core/concepts/validation.md
+++ b/docs/core/concepts/validation.md
@@ -23,7 +23,7 @@ thus operates on POJOs rather than an instance of the class.
 
 Here we can make sure the title field is included, and of the expected type.
 
-<FrameworkPlayground fixtures={[
+<FrameworkPlayground row fixtures={[
 {
 endpoint: new RestEndpoint({path: '/article/:id'}),
 args: [{ id: 1 }],
@@ -102,7 +102,7 @@ render(<ArticlePage id="2" />);
 
 [validateRequired()](/rest/api/validateRequired) can be used to check if all defined fields are present.
 
-<FrameworkPlayground fixtures={[
+<FrameworkPlayground row fixtures={[
 {
 endpoint: new RestEndpoint({path: '/article/:id'}),
 args: [{ id: 1 }],
@@ -183,7 +183,7 @@ useful when some fields consume lots of bandwidth or are computationally expensi
 
 Consider using [validateRequired](/rest/api/validateRequired) to reduce code.
 
-<FrameworkPlayground fixtures={[
+<FrameworkPlayground row fixtures={[
 {
 endpoint: new RestEndpoint({path: '/article'}),
 args: [],
diff --git a/website/src/components/Playground/README.md b/website/src/components/Playground/README.md
index eb28af07752f..a6c4fdbe241c 100644
--- a/website/src/components/Playground/README.md
+++ b/website/src/components/Playground/README.md
@@ -115,7 +115,7 @@ DesignSystem/       components injected into preview scope
 ### Editor
 
 - Fence metastring: `title="…"`, `path="…"` (quotes optional), `collapsed`, `column`,
-  `route="…"` (see Router), `{1-3}` highlight ranges (pre-selected in Monaco); `language-*` class. Element props
+  `route="…"`, `start="…"` and `layout` (see Router), `{1-3}` highlight ranges (pre-selected in Monaco); `language-*` class. Element props
   override metastring values (Demo passes them directly). `defaultTab`
   overrides `collapsed`.
 - `row` layout: non-`column` files are tabs (focus switches tab); `column`
@@ -301,6 +301,11 @@ DesignSystem/       components injected into preview scope
   the design system; Vue pages use `RouterLink` and `vue-router`'s
   `useRouter()`, and keep the same `route` fences only to name their path
   (Vue examples don't run).
+  A `layout` fence's default export wraps every page as its `children` and
+  stays mounted through navigation (links shared by every page, a clock to
+  compare against); `<Link>` marks the one to the current path
+  `aria-current="page"`. A `start="/time/1"` on a page's fence opens the router
+  there (and Home returns there) instead of `/`.
   Navigation is a transition: the page stays until the next one is ready,
   with a progress bar along the preview's top edge meanwhile, so a page needs
   no `startTransition` of its own. Pages render in a Suspense boundary whose
diff --git a/website/src/components/Playground/editor/__tests__/codeModel.test.tsx b/website/src/components/Playground/editor/__tests__/codeModel.test.tsx
index ac28293a1e6c..9569298db67e 100644
--- a/website/src/components/Playground/editor/__tests__/codeModel.test.tsx
+++ b/website/src/components/Playground/editor/__tests__/codeModel.test.tsx
@@ -82,6 +82,25 @@ describe('code document model', () => {
     ]);
   });
 
+  test("reads the router's start path and bare layout flag", () => {
+    expect(
+      parseCodeDocuments([
+        code({ metastring: 'title="Nav" layout collapsed' }, 'a'),
+        code(
+          { metastring: 'title="Page" route="/time/:id" start="/time/1"' },
+          'b',
+        ),
+        code({ metastring: 'title="Page layout" route="/layout/:id"' }, 'c'),
+        code({ metastring: 'title=layout path=src/layout.tsx' }, 'd'),
+      ]).map(({ layout, start }) => [layout, start]),
+    ).toEqual([
+      [true, undefined],
+      [false, '/time/1'],
+      [false, undefined],
+      [false, undefined],
+    ]);
+  });
+
   test('updates only the addressed document', () => {
     const documents = parseCodeDocuments([
       code({ metastring: 'title="One"' }, 'one'),
diff --git a/website/src/components/Playground/editor/codeModel.ts b/website/src/components/Playground/editor/codeModel.ts
index c9bd6a08e4f7..5c2151e1a9e1 100644
--- a/website/src/components/Playground/editor/codeModel.ts
+++ b/website/src/components/Playground/editor/codeModel.ts
@@ -12,6 +12,11 @@ export interface CodeDocument {
   /** Path pattern (`/posts/:id`) the preview's router renders this file's
    * default export at */
   route?: string;
+  /** The path the preview's router opens at, when not `/` */
+  start?: string;
+  /** This file's default export wraps every page of the preview's router,
+   * which renders as its `children` */
+  layout?: boolean;
   language: string;
   autoFocus?: boolean;
 }
@@ -29,6 +34,14 @@ function metaValue(metastring: string, key: string): string | undefined {
     .find(value => value !== undefined);
 }
 
+/** A bare `key` flag in a fence metastring, not the word inside another
+ * key's value like `title="Page layout"` or `path=src/layout.tsx` */
+function metaFlag(metastring: string, key: string): boolean {
+  return new RegExp(`(?:^|\\s)${key}(?=\\s|$)`).test(
+    metastring.replace(/\w+=(?:(["']).*?\1|\S+)/g, ''),
+  );
+}
+
 export function parseCodeDocuments(
   children: string | React.ReactNode | React.ReactNode[],
   defaultTab?: string,
@@ -69,13 +82,15 @@ export function parseCodeDocuments(
           defaultTab ?
             // Vue SFC tabs are titled `Name.vue`; match them by component name
             title?.replace(/\.vue$/, '') !== defaultTab
-          : /\bcollapsed\b/.test(metastring),
-        col: /\bcolumn\b/.test(metastring),
+          : metaFlag(metastring, 'collapsed'),
+        col: metaFlag(metastring, 'column'),
         path:
           metaValue(metastring, 'path') ||
           (fileBase.includes('.') ? fileBase : `${fileBase}.${extension}`),
         highlights: /\{([\d\-,.]+)\}/.exec(metastring)?.[1],
         route: metaValue(metastring, 'route'),
+        start: metaValue(metastring, 'start'),
+        layout: metaFlag(metastring, 'layout'),
         language,
         // Direct element props (title, path, collapsed, autoFocus) override
         // metastring-derived values — Demo/CodeEditor relies on this.
diff --git a/website/src/components/Playground/index.tsx b/website/src/components/Playground/index.tsx
index 32bfc82e164a..493121a95715 100644
--- a/website/src/components/Playground/index.tsx
+++ b/website/src/components/Playground/index.tsx
@@ -29,11 +29,10 @@ export interface PlaygroundProps<T = any> {
   /** Store inspector open by default */
   defaultOpen?: 'y' | 'n';
   /** Tabs for files + editor beside preview (when wide enough).
-   * Use when the code is one tall open file and the preview is short. Stay
-   * stacked when the Store opens by default (it would cover the code), when
-   * the fixtures are the lesson (row folds them behind a toggle in the
-   * preview's header), or when the preview renders a long list (it gets tall
-   * in the narrow column). */
+   * Use when the code is one tall open file and the preview is short; row
+   * folds fixtures behind a toggle in the preview's header. Stay stacked when
+   * the Store opens by default (it would cover the code), or when the preview
+   * renders a long list (it gets tall in the narrow column). */
   row?: boolean;
   /** Inactive (e.g. unselected Demo tab): no Monaco until first shown, no preview */
   hidden?: boolean;
diff --git a/website/src/components/Playground/preview/FixturePreview.tsx b/website/src/components/Playground/preview/FixturePreview.tsx
index 705754e031a7..f362234e8123 100644
--- a/website/src/components/Playground/preview/FixturePreview.tsx
+++ b/website/src/components/Playground/preview/FixturePreview.tsx
@@ -24,7 +24,8 @@ export default memo(FixturePreview);
  * mounts while open */
 function FixtureRow({ fixture }: { fixture: FixtureOrInterceptor }) {
   const [open, setOpen] = useState(false);
-  const { method, path, fnName, hint, error, delay } = summarize(fixture);
+  const { method, path, fnName, hint, error, status, delay } =
+    summarize(fixture);
   const delayFn =
     typeof fixture.delay === 'function' ? fixture.delay : undefined;
   // a function's source can differ between the server and browser bundles
@@ -33,7 +34,11 @@ function FixtureRow({ fixture }: { fixture: FixtureOrInterceptor }) {
     <div className={styles.fixture}>
       <button
         type="button"
-        className={clsx('clean-btn', styles.fixtureToggle)}
+        className={clsx(
+          'clean-btn',
+          styles.fixtureToggle,
+          error && styles.fixtureError,
+        )}
         aria-expanded={open}
         onClick={() => setOpen(o => !o)}
       >
@@ -59,7 +64,9 @@ function FixtureRow({ fixture }: { fixture: FixtureOrInterceptor }) {
         </span>
         {error ?
           <span className={clsx(styles.pill, styles.danger)}>
-            <Translate id="playground.fixtures.error">error</Translate>
+            {status ?? (
+              <Translate id="playground.fixtures.error">error</Translate>
+            )}
           </span>
         : null}
         {delay ?
@@ -99,6 +106,7 @@ const HINT_CHARS = 160;
 export function summarize(fixture: FixtureOrInterceptor) {
   const response = responseOf(fixture);
   const { delay } = fixture;
+  const error = 'error' in fixture && fixture.error === true;
   return {
     ...endpointOf(fixture),
     fnName: 'fn' in response ? response.name : undefined,
@@ -108,11 +116,21 @@ export function summarize(fixture: FixtureOrInterceptor) {
       response.fn.returnedSource
     : (JSON.stringify(response.data) ?? String(response.data))
     )?.slice(0, HINT_CHARS),
-    error: 'error' in fixture && fixture.error === true,
+    error,
+    status: error ? statusOf(response) : undefined,
     delay: delayMs(delay),
   };
 }
 
+/** The HTTP status an error response gives, as `{ status: 404, ... }` */
+function statusOf(response: ReturnType<typeof responseOf>) {
+  if (!('data' in response)) return;
+  const { status } = (response.data ?? {}) as { status?: unknown };
+  // an HTTP error status, not some other number the body names `status`
+  if (typeof status === 'number' && status >= 400 && status < 600)
+    return status;
+}
+
 /** 150, also for a function that always returns 150 (as pinned by
  * fixture-source.js), and nothing for no delay; a delay that isn't one
  * number is `'varies'` */
diff --git a/website/src/components/Playground/preview/__tests__/FixturePreview.test.tsx b/website/src/components/Playground/preview/__tests__/FixturePreview.test.tsx
index 2839f1e79c22..f6e53698d0e8 100644
--- a/website/src/components/Playground/preview/__tests__/FixturePreview.test.tsx
+++ b/website/src/components/Playground/preview/__tests__/FixturePreview.test.tsx
@@ -63,6 +63,23 @@ describe('FixturePreview', () => {
     expect(toggle.textContent).toContain('150 ms');
   });
 
+  test("names an error's status when its response gives one", () => {
+    render(
+      <FixturePreview
+        fixtures={[
+          {
+            endpoint: getArticle,
+            args: [{ id: 2 }],
+            response: { status: 404, response: 'Not found' },
+            error: true,
+          },
+        ]}
+      />,
+    );
+    expect(screen.getByText('404')).toBeTruthy();
+    expect(screen.queryByText('error')).toBeNull();
+  });
+
   test('function rows show what the function returns, once pinned', () => {
     const response = () => ({ id: 1 });
     const { container } = render(
diff --git a/website/src/components/Playground/preview/__tests__/router.test.tsx b/website/src/components/Playground/preview/__tests__/router.test.tsx
index d16910ebcee2..c8da066fb3c8 100644
--- a/website/src/components/Playground/preview/__tests__/router.test.tsx
+++ b/website/src/components/Playground/preview/__tests__/router.test.tsx
@@ -34,6 +34,31 @@ describe('routerTrailer', () => {
       '\n;render(<__PlaygroundRouter routes={[["/", PostList], ["/posts/:id", PostDetail]]} />);',
     );
   });
+
+  test('passes null for a layout without a named default export', () => {
+    expect(
+      routerTrailer([
+        doc('export default function Page() {}', '/'),
+        { ...doc('export default () => null;'), layout: true },
+      ]),
+    ).toBe(
+      '\n;render(<__PlaygroundRouter routes={[["/", Page]]} layout={null} />);',
+    );
+  });
+
+  test('passes the layout and start path', () => {
+    expect(
+      routerTrailer([
+        {
+          ...doc('export default function Page() {}', '/p/:id'),
+          start: '/p/1',
+        },
+        { ...doc('export default function Nav() {}'), layout: true },
+      ]),
+    ).toBe(
+      '\n;render(<__PlaygroundRouter routes={[["/p/:id", Page]]} layout={Nav} start={"/p/1"} />);',
+    );
+  });
 });
 
 describe('Router', () => {
@@ -122,6 +147,41 @@ describe('Router', () => {
     expect(screen.getByText('Missing')).toBeTruthy();
   });
 
+  test('keeps the layout around pages, marking the current link', async () => {
+    function Nav({ children }: { children: React.ReactNode }) {
+      return (
+        <>
+          <nav>
+            <Link to="/p/1">One</Link>
+            <Link to="/p/2">Two</Link>
+          </nav>
+          {children}
+        </>
+      );
+    }
+    renderInPreview(
+      <Router
+        routes={[['/p/:id', ({ id }: { id: string }) => <>page {id}</>]]}
+        layout={Nav}
+        start="/p/1"
+      />,
+    );
+    expect(screen.getByText('page 1')).toBeTruthy();
+    expect(screen.getByText('One').getAttribute('aria-current')).toBe('page');
+
+    await act(async () => {
+      fireEvent.click(screen.getByText('Two'));
+    });
+    expect(screen.getByText('page 2')).toBeTruthy();
+    expect(screen.getByText('Two').getAttribute('aria-current')).toBe('page');
+    expect(screen.getByText('One').getAttribute('aria-current')).toBeNull();
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Home' }));
+    });
+    expect(screen.getByText('page 1')).toBeTruthy();
+  });
+
   test('Home returns to the first page from deep in the history', async () => {
     renderInPreview(
       <Router
diff --git a/website/src/components/Playground/preview/router.tsx b/website/src/components/Playground/preview/router.tsx
index 29ed806cb1ff..eaab8cf5a595 100644
--- a/website/src/components/Playground/preview/router.tsx
+++ b/website/src/components/Playground/preview/router.tsx
@@ -8,6 +8,7 @@ import React, {
   useCallback,
   useState,
   useTransition,
+  Fragment,
   type ComponentType,
 } from 'react';
 import { createPortal } from 'react-dom';
@@ -30,22 +31,37 @@ type Route = readonly [
 /** Appended to the preview's code: renders the documents that declare a
  * `route` as the pages of a router, so demos need no navigation code of their
  * own. A page is its document's default export; its path's params are its
- * props.
+ * props. A `layout` document's default export wraps every page, and a
+ * `start` path opens the router somewhere other than `/`.
  */
 export function routerTrailer(documents: readonly CodeDocument[]) {
   const routes = documents
     .filter(document => document.route)
     .map(
-      document =>
-        `[${JSON.stringify(document.route)}, ${defaultExportName(document.value) ?? 'undefined'}]`,
+      document => `[${JSON.stringify(document.route)}, ${exportOf(document)}]`,
     );
   if (!routes.length) return '';
-  return `\n;render(<${ROUTER} routes={[${routes.join(', ')}]} />);`;
+  const layout = documents.find(document => document.layout);
+  const start = documents.find(document => document.start)?.start;
+  const props = [
+    `routes={[${routes.join(', ')}]}`,
+    // null, unlike a missing layout, reports an unnamed export
+    ...(layout ?
+      [`layout={${defaultExportName(layout.value) ?? 'null'}}`]
+    : []),
+    ...(start ? [`start={${JSON.stringify(start)}}`] : []),
+  ];
+  return `\n;render(<${ROUTER} ${props.join(' ')} />);`;
 }
 
+const exportOf = (document: CodeDocument) =>
+  defaultExportName(document.value) ?? 'undefined';
+
 const NavigateContext = createContext<(to: string) => void>(() => {
   throw new Error('useNavigate() only works in a page with a `route`');
 });
+/** The path shown, which Links to it mark as current */
+const PathContext = createContext<string | undefined>(undefined);
 
 /** Opens `to` in the preview's router */
 export function useNavigate() {
@@ -57,6 +73,7 @@ export function Link({ to, onClick, ...props }: LinkProps) {
   return (
     <a
       href={to}
+      aria-current={use(PathContext) === to ? 'page' : undefined}
       {...props}
       onClick={event => {
         onClick?.(event);
@@ -71,12 +88,24 @@ interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   to: string;
 }
 
-/** Starts at `/`, with Back, Home and the path shown in the preview's header.
- * Navigation is a transition: the current page stays until the next one is
- * ready, with a progress bar along the preview's top edge meanwhile.
+/** Starts at `start`, with Back, Home and the path shown in the preview's
+ * header. Navigation is a transition: the current page stays until the next
+ * one is ready, with a progress bar along the preview's top edge meanwhile.
+ * `layout` stays mounted around the pages, so what it shows (say, links
+ * between them) holds through navigation.
  */
-export function Router({ routes }: { routes: readonly Route[] }) {
-  const [history, setHistory] = useState(['/']);
+export function Router({
+  routes,
+  layout: Layout = Fragment,
+  start = '/',
+}: {
+  routes: readonly Route[];
+  layout?: ComponentType<{ children: React.ReactNode }> | null;
+  start?: string;
+}) {
+  if (Layout === null)
+    throw new Error("The layout must be its file's named default export");
+  const [history, setHistory] = useState([start]);
   const [pending, startTransition] = useTransition();
   const navigate = useCallback(
     (to: string) =>
@@ -104,7 +133,7 @@ export function Router({ routes }: { routes: readonly Route[] }) {
                 ),
               )
             }
-            onHome={() => startTransition(() => setHistory(['/']))}
+            onHome={() => startTransition(() => setHistory([start]))}
           />,
           controlsSlot,
         )}
@@ -113,15 +142,19 @@ export function Router({ routes }: { routes: readonly Route[] }) {
         data-pending={pending || undefined}
         aria-hidden="true"
       />
-      <Suspense fallback={<Loading />}>
-        {/* the header's controls stay usable when a page throws, so Back
-            recovers; a new path clears the error. Suspense stays outside this
-            key: a newly mounted one would show its fallback rather than hold
-            the page */}
-        <ErrorBoundary key={path} fallbackComponent={ErrorMessage}>
-          <Page routes={routes} path={path} />
-        </ErrorBoundary>
-      </Suspense>
+      <PathContext value={path}>
+        <Layout>
+          <Suspense fallback={<Loading />}>
+            {/* the header's controls stay usable when a page throws, so
+                Back recovers; a new path clears the error. Suspense stays
+                outside this key: a newly mounted one would show its fallback
+                rather than hold the page */}
+            <ErrorBoundary key={path} fallbackComponent={ErrorMessage}>
+              <Page routes={routes} path={path} />
+            </ErrorBoundary>
+          </Suspense>
+        </Layout>
+      </PathContext>
     </NavigateContext>
   );
 }
diff --git a/website/src/components/Playground/styles.module.css b/website/src/components/Playground/styles.module.css
index 925a7a156821..b1e9f2ae8a7a 100644
--- a/website/src/components/Playground/styles.module.css
+++ b/website/src/components/Playground/styles.module.css
@@ -439,11 +439,13 @@ div.playgroundTextEdit > .playgroundHeader,
 }
 
 /* The Store toggle in the code's corner, over the Store as it slides in
-   under it; its label rises out as the other rises in */
+   under it; its label rises out as the other rises in. Closed, it stays
+   under the fixtures floating over the code: same z-index as theirs, and the
+   preview (with them) comes after the editor in the DOM. */
 .storeBadge {
   --swap-in: 0 110%;
   --swap-out: 0 -110%;
-  z-index: 3;
+  z-index: 1;
   align-self: end;
   justify-self: end;
   margin: 0.75rem;
@@ -460,6 +462,10 @@ div.playgroundTextEdit > .playgroundHeader,
   text-transform: uppercase;
   white-space: nowrap;
 }
+/* over the Store (z-index 2) from opening until it has slid back out */
+.storeHost:has(> .storePanel[data-visible]) + .storeBadge {
+  z-index: 3;
+}
 .storeBadge:hover {
   background: var(--pg-tab-hover-bg)
     linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06));
@@ -784,6 +790,19 @@ div.playgroundTextEdit > .playgroundHeader,
 .playgroundPreview textarea:where(:not([class])) {
   padding: 0.3rem 0.5rem;
 }
+/* A demo's links between its pages (Link), the one shown marked as current */
+.playgroundPreview nav:where(:not([class])) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1rem;
+  margin-bottom: 0.5rem;
+}
+.playgroundPreview nav a[aria-current='page'] {
+  color: var(--ifm-font-color-base);
+  font-weight: 600;
+  text-decoration: underline 2px var(--ifm-color-primary);
+  text-underline-offset: 0.35em;
+}
 /* Groups a form's fields so one `disabled` locks them all */
 .playgroundPreview fieldset {
   min-width: 0;
@@ -1031,6 +1050,20 @@ div.playgroundTextEdit > .playgroundHeader,
     background-color: var(--store-hover);
   }
 }
+/* an error response: a red edge and wash, so it stands apart from the
+   successes at a glance (a wash in background-image, under hover's color) */
+.fixtureError {
+  box-shadow: inset 3px 0 var(--store-null);
+  --fixture-error-wash: color-mix(in srgb, var(--store-null) 10%, transparent);
+  background-image: linear-gradient(
+    var(--fixture-error-wash),
+    var(--fixture-error-wash)
+  );
+}
+.fixtureError .pill.danger {
+  background-color: color-mix(in srgb, var(--store-null) 16%, transparent);
+  font-weight: 600;
+}
 .fixtureToggle:focus-visible {
   outline: 2px solid var(--ifm-color-primary);
   outline-offset: -2px;