@@ -164,7 +164,7 @@ const pageTemplate = `
 			{{.CSS}}
 	</style>
 </head>
-<body class="prose" {{if .Theme}}data-theme="{{.Theme}}"{{end}}>
+<body class="{{.BodyClass}}" {{if .Theme}}data-theme="{{.Theme}}"{{end}}>
 	<main>
 			{{.Content}}
 	</main>
@@ -188,20 +188,28 @@ func SetRenderRoute(e *echo.Echo, publicPath string) {
 			finalTheme = fmt.Sprintf("%s-%s", theme, overrideTheme)
 		}
 
+		// Matches the SvelteKit route's parsing: only the exact string opts in.
+		bodyClass := "prose"
+		if c.QueryParam("compact") == "true" {
+			bodyClass = "prose compact"
+		}
+
 		// Process markdown to HTML
 		renderedHTML := processMarkdown(content)
 
 		nonce := generateNonce()
 
 		data := struct {
-			Content template.HTML
-			Nonce   string
-			Theme   string
-			CSS     template.CSS
+			Content   template.HTML
+			Nonce     string
+			Theme     string
+			BodyClass string
+			CSS       template.CSS
 		}{
-			Content: template.HTML(renderedHTML),
-			Nonce:   nonce,
-			Theme:   finalTheme,
+			Content:   template.HTML(renderedHTML),
+			Nonce:     nonce,
+			Theme:     finalTheme,
+			BodyClass: bodyClass,
 			CSS: template.CSS(`*,
 		body {
 			margin: 0;
@@ -214,11 +222,49 @@ func SetRenderRoute(e *echo.Echo, publicPath string) {
 		body {
 			overscroll-behavior: none;
 			position: relative;
+			overflow-wrap: break-word;
 			padding: 1rem;
 			white-space: pre-line;
 			font-family: sans-serif;
 		}
 
+		/* No page padding, so a short string renders as a line of text rather than
+		   a padded box. Wrapping stays on. */
+		body.compact {
+			padding: 0;
+			overflow: hidden;
+			white-space: normal;
+		}
+
+		/* The reset above sizes every element with a star selector, which beats
+		   inheritance, so compact restates the metrics or the frame renders at
+		   16px beside the 14px text around it. */
+		body.compact,
+		body.compact main,
+		body.compact p,
+		body.compact strong,
+		body.compact em,
+		body.compact a {
+			font-size: 14px;
+			line-height: 20px;
+		}
+
+		/* Blocks with the margins zeroed, not display: inline. The embedder
+		   measures the frame from main, and an inline box reports the text box
+		   rather than the line box, which clips descenders. */
+		body.compact main,
+		body.compact p {
+			display: block;
+			margin: 0;
+		}
+
+		/* Vertical padding on an inline code span grows the line box. */
+		body.compact code {
+			padding: 0 0.375rem;
+			font-size: 13px;
+			line-height: 20px;
+		}
+
 		h1 {
 			font-size: 2em;
 		}
@@ -243,6 +289,13 @@ func SetRenderRoute(e *echo.Echo, publicPath string) {
 			font-size: 0.67em;
 		}
 
+		/* Pinned rather than left to the UA default, so bold matches the 600 the
+		   SvelteKit stylesheet renders at instead of the UA's 700. */
+		strong,
+		b {
+			font-weight: 600;
+		}
+
 		blockquote,
 		q {
 			quotes: none;
@@ -374,6 +427,29 @@ func SetRenderRoute(e *echo.Echo, publicPath string) {
 		body[data-theme='dark-primary'] a {
 			color: #8098f9;
 		}
+
+		/* A compact frame paints no background of its own. An iframe's canvas is
+		   transparent when the embedded document is, so the frame takes whatever
+		   surface the page put it on, in either colour scheme, without the page
+		   having to name that surface.
+
+		   Last in the file on purpose: the theme rules above set background-color
+		   at the same specificity, so order decides. */
+		body.compact {
+			background-color: transparent;
+		}
+
+		/* The transparency only holds if this document's colour scheme matches
+		   the one the page gave the iframe element. When they differ the browser
+		   paints an opaque canvas instead, so a dark page shows a white box. The
+		   theme is an attribute on body, so the root reads it from there. */
+		html {
+			color-scheme: light;
+		}
+
+		html:has(body[data-theme^='dark']) {
+			color-scheme: dark;
+		}
 	`),
 		}
 
 
@@ -3,6 +3,9 @@ package route
 import (
 	"net/http"
 	"net/http/httptest"
+	"os"
+	"path/filepath"
+	"strings"
 	"testing"
 	"testing/fstest"
 
@@ -254,3 +257,116 @@ func TestBuildUIIndexHandler_MissingIndexHTML(t *testing.T) {
 	_, err := buildUIIndexHandler("", emptyFS)
 	assert.Error(t, err)
 }
+
+func renderRequest(t *testing.T, query string) string {
+	t.Helper()
+
+	e := echo.New()
+	SetRenderRoute(e, "/")
+
+	req := httptest.NewRequest(http.MethodGet, "/render?"+query, nil)
+	rec := httptest.NewRecorder()
+	e.ServeHTTP(rec, req)
+
+	assert.Equal(t, http.StatusOK, rec.Code)
+	return rec.Body.String()
+}
+
+// The SvelteKit route and this one are separate implementations of the same
+// page, so an embedder that asks for compact has to get it from both.
+func TestSetRenderRoute_CompactBodyClass(t *testing.T) {
+	tests := []struct {
+		name  string
+		query string
+		want  string
+	}{
+		{
+			name:  "compact opts in",
+			query: "content=hello&compact=true",
+			want:  `class="prose compact"`,
+		},
+		{
+			name:  "absent stays padded",
+			query: "content=hello",
+			want:  `class="prose"`,
+		},
+		{
+			name:  "false stays padded",
+			query: "content=hello&compact=false",
+			want:  `class="prose"`,
+		},
+		{
+			name:  "only the exact string opts in",
+			query: "content=hello&compact=TRUE",
+			want:  `class="prose"`,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			assert.Contains(t, renderRequest(t, tt.query), tt.want)
+		})
+	}
+}
+
+func TestSetRenderRoute_StylesheetCarriesCompactRules(t *testing.T) {
+	body := renderRequest(t, "content=hello&compact=true")
+
+	// Without these the class on <body> selects nothing and the frame keeps
+	// the 1rem page padding it has in the standalone view.
+	assert.Contains(t, body, "body.compact {")
+	assert.Contains(t, body, "body.compact main,")
+	assert.Contains(t, body, "body.compact code {")
+}
+
+// Regression: a star selector reset with no strong rule renders bold at normal
+// weight. This route's reset does not set font-weight, so the pinned rule is
+// what keeps it at the same 600 the SvelteKit stylesheet uses.
+func TestSetRenderRoute_BoldIsPinned(t *testing.T) {
+	body := renderRequest(t, "content=**bold**")
+
+	assert.Contains(t, body, "<strong>bold</strong>")
+	assert.Contains(t, body, "font-weight: 600;")
+}
+
+// A 255-character description can hold an unbroken token longer than the frame.
+func TestSetRenderRoute_BreaksLongWords(t *testing.T) {
+	assert.Contains(t, renderRequest(t, "content=hello"), "overflow-wrap: break-word;")
+}
+
+// This route's stylesheet is a hand-maintained copy of src/markdown.reset.css,
+// and the two have drifted before. A full comparison is not possible — the
+// SvelteKit copy resolves colors through Io theme variables this server cannot
+// read, so it hardcodes hex instead. The compact block carries no colors, so
+// that much can be held to parity here.
+func TestSetRenderRoute_CompactRulesMatchCanonicalStylesheet(t *testing.T) {
+	canonical, err := os.ReadFile(filepath.Join("..", "..", "..", "src", "markdown.reset.css"))
+	if err != nil {
+		t.Skip("canonical stylesheet not present; server module built standalone")
+	}
+
+	var want []string
+	for _, line := range strings.Split(string(canonical), "\n") {
+		if line = strings.TrimSpace(line); strings.HasPrefix(line, "body.compact") {
+			want = append(want, line)
+		}
+	}
+	assert.NotEmpty(t, want, "no compact selectors found in canonical stylesheet")
+
+	body := renderRequest(t, "content=hello&compact=true")
+	for _, selector := range want {
+		assert.Contains(t, body, selector,
+			"src/markdown.reset.css has %q; this route's copy does not", selector)
+	}
+}
+
+// Regression: a compact frame that paints its own canvas shows as a white box
+// on a dark page. Transparency needs both halves — the background and a
+// color-scheme on the root that matches what the embedder gave the iframe.
+func TestSetRenderRoute_CompactFrameIsTransparent(t *testing.T) {
+	body := renderRequest(t, "content=hello&compact=true")
+
+	assert.Contains(t, body, "background-color: transparent;")
+	assert.Contains(t, body, "color-scheme: light;")
+	assert.Contains(t, body, "html:has(body[data-theme^='dark'])")
+}
@@ -20,6 +20,18 @@
     frameId?: string;
     minHeight?: number;
     previewTheme?: 'dark' | 'light';
+    /**
+     * Render without the page padding, with the block wrappers flowing
+     * inline, so a short string hugs its own text instead of sitting in a
+     * padded box. The content still wraps, so it suits a label or a summary
+     * of a sentence or two rather than a document.
+     */
+    compact?: boolean;
+    /**
+     * Accessible name for the frame. Name what the content is, so a frame in
+     * a list of them is distinguishable.
+     */
+    title?: string;
   }
 
   let {
@@ -30,6 +42,8 @@
     frameId = '',
     minHeight = 100,
     previewTheme,
+    compact = false,
+    title = 'output',
   }: Props = $props();
 
   let iframe: HTMLIFrameElement | null = $state(null);
@@ -105,7 +119,7 @@
   );
   const previewPath = $derived(
     resolve(
-      `/render?content=${encodeURIComponent(templatedContent)}&theme=${resolvedPreviewTheme}&overrideTheme=${overrideTheme}`,
+      `/render?content=${encodeURIComponent(templatedContent)}&theme=${resolvedPreviewTheme}&overrideTheme=${overrideTheme}&compact=${compact}`,
       {},
     ),
   );
@@ -115,8 +129,8 @@
   <iframe
     bind:this={iframe}
     onload={resizeIframe}
-    title="output"
-    class="block w-full"
+    {title}
+    class="block w-full border-0"
     src={previewPath}
     id={frameId}
   ></iframe>