Component demos¶
Every public Hedron component has a dedicated, usable example and a detailed operating guide. Static components use real semantic HTML. Features that normally call an HTMX endpoint use a clearly labelled JavaScript simulation so loading, replacement, retry, paging, polling, editing, and validation remain usable on the hosted documentation site.
What the simulation does
JavaScript supplies deterministic in-browser responses only inside these docs previews. Production examples keep authentication, authorization, CSRF, validation, persistence, caching, and fragment rendering on the Python server. Each interactive page explains that boundary.
Start with these 10¶
| Component | Why |
|---|---|
Page / Text |
First full document |
Stack / Card |
Layout and surfaces |
Form / TextInput / SubmitButton |
Classic forms |
Button / RefreshButton |
Commands and HTMX refresh |
DataTable |
Tabular data (hedron[data]) |
Then browse the groups below. Golden path: HTMX interactions → Minimal form.
Use the pages below to choose a component, inspect its output, understand its constructor, and test its accessibility and backend contract.
Document and composition¶
Full pages, metadata, and fragment composition.
Page · Fragment · Head · Title
Landmarks¶
Semantic regions that give a page its accessible structure. LANDMARK-019: real typed exports (Header, Main, Nav, Aside, Footer, Section) with allowlisted safe HTML attrs — not factory variables.
Header · Main · Nav · Aside · Footer · Section
Layout¶
Explicit containers and one-dimensional or grid composition.
Container · Stack · Inline · Grid · Divider · MainPanel · AppShell · ActionDock · BottomDock · Spacer
Content¶
Text, links, media, code, lists, tables, and Markdown.
Heading · Text · Link · Image · CodeBlock · List · DescriptionList · Table · Markdown · Audio · PredictionLabel · ParameterViewer · Dialogue · Gallery · GeoJSONLayer · GeolocationHint · IFrame · Logo · Map · Math · PageIcon · PdfViewer · Video
Surfaces and status¶
Cards, labels, alerts, and loading placeholders.
Card · Badge · Alert · Skeleton · Carousel · ContextMenu · Help · Popover · Timeline · Tooltip
Controls¶
Buttons and links for commands and navigation.
HtmxLink · NavLink · Button · LinkButton · IconButton · ClipboardCopy · ConfirmButton · MenuButton
Forms¶
Typed, labelled controls and validation presentation.
Form · FormField · Label · TextInput · TextArea · Select · Checkbox · RadioGroup · SubmitButton · FormErrors · AutoForm · CameraCapture · ChipInput · ColorInput · DateInput · DateTimeInput · DirectoryUpload · GeolocationButton · MicrophoneCapture · MultiSelect · NumberInput · Pills · RangeInput · RatingInput · SegmentedControl · SelectSlider · TimeInput · ToggleSwitch
Interaction¶
FastAPI and HTMX-oriented request/response components.
OobHost · AttrHost · RefreshButton · Lazy · Poll · InfiniteScroll · Pagination · Loading · ErrorState · Dialog · ChatMessage · ChatInput
Data¶
Automatic rendering, tabular display, and editable data.
Auto · DataTable · DataEditor
Utilities¶
Metrics, viewers, progress, status, disclosure, tabs, and files.
Metric · FileUpload · DownloadButton · CodeViewer · JSONViewer · Progress · Status · Toast · Expander · Tabs · Sidebar · CircularProgress · HelpInspector
Theme¶
User-facing color-mode preference controls.
Charts¶
Accessible visualization components and optional plotting adapters.
LineChart · AreaChart · BarChart · ScatterChart · MatplotlibChart · PlotlyChart · AltairChart