# Examples (https://microcharts.dev/examples) 7 independent apps, each deployed and each installing `@microcharts/react` from npm the way you would. Between them they render every chart type in the catalog. The source for all of them sits in the repository beside the running site. ### Cortex An eval console that reads a model's answer through the model's own confidence. Every screen is built out of the model's own eval output: token-confidence spans over the answer text, calibration strips beside it, a confusion grid for the run as a whole. A reviewer can see where the model was unsure without reading a number. - Live: [microcharts-cortex.pages.dev](https://microcharts-cortex.pages.dev) - Charts used: 22 - Detail page: [https://microcharts.dev/examples/cortex](https://microcharts.dev/examples/cortex) ### Pulse Product analytics rendered in Server Components. Static routes ship no chart JS at all. Dozens of series, funnels and cohort triangles, all drawn on the server. Hydration happens only on the screens where a reader reaches in to scrub something, so most of the app arrives as HTML and stays that way. - Live: [microcharts-pulse.pages.dev](https://microcharts-pulse.pages.dev) - Charts used: 35 - Detail page: [https://microcharts.dev/examples/pulse](https://microcharts.dev/examples/pulse) ### Ledger A night-session trading terminal where the marks redraw as quotes tick. Every chart here is the interactive entry: OHLC candles, depth wedges and order-flow marks that draw on as quotes arrive, each one driven by a single pointer listener and the shared animate engine. It is the densest app of the seven, and the one that spends the most on interaction. - Live: [microcharts-ledger.pages.dev](https://microcharts-ledger.pages.dev) - Charts used: 25 - Detail page: [https://microcharts.dev/examples/ledger](https://microcharts.dev/examples/ledger) ### Dispatch A print magazine where the charts sit inside the sentences, as typography. The editorial preset and the inline seat let a sparkline or a dumbbell stand on the baseline like a letter rather than sit in a box beside the text. Nothing in the issue is captioned, because nothing in it is a figure. - Live: [microcharts-dispatch.pages.dev](https://microcharts-dispatch.pages.dev) - Charts used: 20 - Detail page: [https://microcharts.dev/examples/dispatch](https://microcharts.dev/examples/dispatch) ### Shipyard A grayscale service-health console where color is spent only on meaning. The mono preset holds every mark neutral until something needs to speak. An error budget going red or a burn-down falling behind is the only color on the screen, which is what makes it readable at three in the morning. - Live: [microcharts-shipyard.pages.dev](https://microcharts-shipyard.pages.dev) - Charts used: 22 - Detail page: [https://microcharts.dev/examples/shipyard](https://microcharts.dev/examples/shipyard) ### Vitals A gentle health almanac on cream stock, where a year of sleep fits on one page. Sleep stages, activity and streaks, printed at almanac scale on cream stock. Per-instance categorical palettes keep a night's stages apart without ever moving the valence hues, so up is still good and down is still bad. - Live: [microcharts-vitals.pages.dev](https://microcharts-vitals.pages.dev) - Charts used: 25 - Detail page: [https://microcharts.dev/examples/vitals](https://microcharts.dev/examples/vitals) ### Atlas Housing-market intelligence, dense enough that every table cell carries its own chart. Regional price and supply data on limestone stock, under a custom ink theme. One accent, run through defineTheme, derives the whole color-blind-safe palette and its dark twin, and the tables lean on it hard: heat cells, dumbbells and slopes sit inside the rows rather than beside them. - Live: [microcharts-atlas.pages.dev](https://microcharts-atlas.pages.dev) - Charts used: 25 - Detail page: [https://microcharts.dev/examples/atlas](https://microcharts.dev/examples/atlas) ## Machine-readable surfaces - [https://microcharts.dev/llms.txt](https://microcharts.dev/llms.txt) — index of this site, written for agents. - [https://microcharts.dev/llms-full.txt](https://microcharts.dev/llms-full.txt) — every documentation page as one file. - [https://microcharts.dev/catalog.json](https://microcharts.dev/catalog.json) — all 106 chart types with props and data shapes. - [https://microcharts.dev/api/charts.json](https://microcharts.dev/api/charts.json) — the same catalog as an index, one chart per fetch. - [https://microcharts.dev/openapi.json](https://microcharts.dev/openapi.json) — OpenAPI 3.1 description of every endpoint here. - [https://microcharts.dev/agent-setup.md](https://microcharts.dev/agent-setup.md) — paste-and-run setup prompt for a coding agent. Any page on this site answers `Accept: text/markdown` with its Markdown twin, and every twin is also fetchable by adding `.md` to the URL.