---
schema: 1
runtime_version: "0.1.0"
base_url: "https://cdn.pagelet.link/v1/"
capabilities: [markdown, mermaid, math, code, charts, theme, toolbar, toc]
status: alpha
---

# Pagelet runtime — v1 capabilities (alpha)

> Served alongside the runtime. To learn what it can do right now, fetch this file and follow it. This is the authoritative menu (D15); the installed skill only teaches the protocol. Each capability is **lazy-loaded** — only the modules a page uses are fetched.

## The tag

```html
<script src="https://cdn.pagelet.link/v1/pagelet.js" defer></script>
```

Add it to any HTML. The ~12 KB loader scans the DOM, lazy-loads the needed modules, enhances in place, and removes the offline banner on success. Self-host by pointing the tag at your own copy; pin a version with `/v1.x.y/`.

## markdown — *stable*

`<script type="text/markdown" data-pagelet="markdown">…</script>` → rendered (marked + sanitised) into `.pagelet-prose`. Source retained (hidden) for round-trip export. Indentation is auto-stripped. Fenced ` ```mermaid ` blocks become diagrams; ` ```lang ` blocks get highlighting; `$$…$$` / `\(…\)` / `\[…\]` get math.

## mermaid — *stable*

A ` ```mermaid ` fenced block (inside markdown) or `<pre class="mermaid">…</pre>` → an SVG diagram with **pan / zoom / fullscreen**.

## math — *stable*

KaTeX over the prose. Delimiters: `$$…$$` and `\[…\]` (display), `\(…\)` (inline). `$…$` inline is **off** by default (currency). Fonts load from a pinned CDN.

## code — *stable*

` ```lang ` fenced blocks (or `<pre><code class="language-x">`) → syntax highlighting + a copy button. Theme-aware.

## charts — *stable*

`<script type="application/json" data-pagelet="chart">{ Chart.js config }</script>` → a responsive `<canvas>`, themed to the page.

## theme — *stable*

`<script type="application/json" data-pagelet="theme">{ "colors": { "primary": "#…" }, "radius": "…" }</script>` → compiled to `:root` / `[data-theme="dark"]` with shadcn variable names. `<html data-theme="dark">` forces dark.

## toolbar & toc — *stable*

Auto-mounted: a floating toolbar (theme toggle, print/PDF, PNG export, copy-as-Markdown round-trip), a scroll-progress bar, and — for documents with ≥3 headings — a sticky table of contents with scroll-spy. Disable the toolbar with `<body data-pagelet-toolbar="off">`.

## offline banner

Include this so a no-network open degrades gracefully; the runtime removes it on boot:

```html
<div id="pagelet-offline">⏳ This pagelet needs an internet connection to render its interactive parts.</div>
```

## Coming next

Cloud publish (short `pagelet.link` URLs), cloud PDF, accounts, and private artifacts — feature-detected, so they light up here when shipped with no reinstall.
