Widgets

Widgets make a page more visual: React components written as HTML tags in Markdown. devpage ships a set — callouts, tabs, file trees, terminals, steps, cards — and a project adds its own as .tsx files. This page shows what a widget is and where each part is explained; it is a concept article under the viewer.

devpage believes the identity header, so expose the proxy, not devpage.

cargo install devpage --locked

cargo install --path . --locked

A widget's name starts with a capital letter, so it can never be mistaken for an HTML tag. Its attributes are its props and the Markdown between its tags is its content. It works on any page of any kind — a site's page, a doc's chapter, a slide.

Using widgets — props, content, block or inline, and what a failing widget looks like.
System widgets — every widget devpage ships, each shown live beside its source.
Writing a project widget — a .tsx file in your widgets folder: composing, helpers, styling, paper.
How widgets run — placeholders on the server, compiling with oxc, mounting with React.

Topics

Using widgets — props, content, block or inline, and failures.
System widgets — the widgets devpage ships, each shown live.
Writing a project widget — a project's own widgets in TSX.
How widgets run — from a tag in Markdown to a mounted React component.