devpage

System widgets

Every widget devpage ships, in every document, each shown live beside the Markdown that makes it. It is the reference page under Widgets; how to write props and content is on Using widgets.

Widget Props Content
Callout kind: note (default), tip, warning or danger; title (optional) Markdown
Tabs — Tab widgets
Tab title Markdown
Example title (optional) Markdown
FileTree — A Markdown list, nested for folders
Terminal title (optional) Text in a code block
Keys — Key names separated by spaces
Steps — A numbered Markdown list
Cards columns (optional, 2–4; default fits the width) A Markdown list of links
Diagram — Mermaid text

Notes is taken too, though it is not a widget: it holds a slide's notes and is never shown.

Callout

A highlighted box with a colored edge, an icon for its kind and an optional title.

Every open page updates the moment you do.

Never expose devpage without the proxy.

Tabs and Tab

Tabs, the first one open; clicking a tab's title shows it. Printed, only the open tab shows. A Tab outside a Tabs is a problem.

Press ⌘ P.

Press Ctrl P.

Example

The Markdown source, highlighted, beside — or, on a narrow page, above — what it renders to. A long source line scrolls inside its box; on paper it wraps. Every example on this page is one.

FileTree

A folder tree with file and folder icons, written as a list so it reads well anywhere. A list item's link makes its entry a link; text after the name and — is shown as a note beside it, with its inline Markdown — code, emphasis, links — kept.

  • garden/
    • devpage.yml — the site
    • README.md — the root page, with ## Topics
    • planting.md

Terminal

A terminal window, written as a code block. Lines starting with $ are commands, shown with a prompt; the rest is output. A long line scrolls on screen and wraps on paper.

$ devpage garden
Garden → http://localhost:3030

Keys

Each key as a keycap, inline in the text.

Press ⌘ P to print, F for fullscreen.

Steps

Numbered steps down the page, written as a numbered list. Each item's first line is its title and the lines after it its body; a paragraph of lines starting with $ becomes command chips.

  1. Install devpage It builds from crates.io.

    $ cargo install devpage --locked

  2. Run it from the top of your repository $ devpage docs

Cards

A grid of link cards, written as a list of links. Each item's first link is the card's title and target, the text after it its one-line summary; an (icon) before the link adds a Lucide icon. An icon name Lucide doesn't have is a problem.

Diagram

The diagram, drawn by pele. Every mermaid fence renders through it, so the tag itself is rarely written — see Diagrams.

flowchart LR
  Markdown --> devpage --> Page