---
title: "MDX Demo: all the components"
description: "A complete showcase of the blog's MDX components."
date: "2026-07-02T12:00:00.000Z"
updated: "2026-08-24T15:05:22.447Z"
locale: "en"
canonical: "https://ninhache.fr/en/blog/demo-mdx"
author: "Néo Almeida"
tags: "mdx, demo"
categories: "dev"
---

# MDX Demo: all the components

This demo page showcases all the blog's MDX components, grouped by family. Each block fades in on scroll, following the site's design language.

## Inline

You can underline with dashes, with dots, with a wave, in blue, or highlight or even in purple. A term: ΔE (Delta E: perceptual distance between two colors). Statuses: resolved to review to watch. Grammar: [#N] [$C$D#P] {[COND]?a:b} |expr|. Quiz: 175901/175901. Auto external link: [the timelife project](https://timelife.aymeric.lefeyer.fr/), or forced: [ninhache.fr](https://ninhache.fr). A margin aside (Detail learned by stepping in it.) illustrates the Tufte style.

---

## Callouts

**Note**

Standard note.

**Info**

Useful information.

**Tip**

Practical tip.

**Warning**

Warning.

**Danger**

Error to avoid.

**Trap**

The trap would have been to read the buffer on the client side.

**Lesson**

Always check a hypothesis against the case that gave rise to it.

**Tip**

The legacy directives still work.

## Structure: Takeaways, Specs, Card + Grid

- The binary format is positional: one misread byte shifts everything.
- Perceived color isn't the same as the numeric color.
- Replaying byte-exact settles the choice between two candidates.

**Version**

4.2.1

**Dump size**

341 KB

**Decoded entries**

<code>175901 / 175901</code>

**Server**

Buffer reading on the backend, raw binary format.

**Client**

Tooltip rendering from the resolved grammar.

**Pipelines and comparisons**

## Steps

**Detect the drift**

We notice the format has changed.

**Replay the candidates**

We test each hypothesis byte-exact.

**Pin the winner**

The candidate that decodes everything wins.

## Compare

**v1 (broken)**

Color was replayed per pixel.

**v2 (fixed)**

Color is flattened once per shape.

## Annotated code

```ts title="decode.ts" {3} showLineNumbers
function decode(buf: Buffer) {
  const header = buf.readUInt16LE(0);
  const version = buf.readUInt8(2);
  return { header, version };
}
```

```ts title="fix.ts"
const dmg = base + level; // [!code --]
const dmg = base + level * ratio; // [!code ++]
render(dmg); // [!code focus]
```

**Visualizations**

## HexDump

_Binary header: hover over a field._

## Color: Swatch + DeltaE

**Brand cyan**

## Tables

| Tier | Risk | Action |
|---|---|---|
| Green | low | ok |
| Red | high | block |

## Charts

_Bar chart_

_Line chart_

## Figure, Details, Timeline

![A captioned image](https://picsum.photos/seed/mdxdemo/1000/560)

**See the proof (large block)**

The schema JSON was 341 KB; it's collapsed here to keep the page breathable.

**2019 - Live game**

The binary format is observed in production.

**2022 - Reverse engineering**

We reconstruct the tooltip grammar.

**2026 - Web app**

The ecosystem becomes a web application.

---

End of the demo.

## Layout

**Chapter - A big section**

_A centered section header in the site's design language, with kicker and subtitle._

_Image on the left_

The text sits to the right of the image. You can include **multiple paragraphs** and lists:

- first point
- second point

_Image on the right_

Here the image moves to the right via `side="right"`, with the text on the left. On mobile, everything stacks cleanly.

A centered line, as a bit of breathing room.

![A wide image that overflows the text column on large screens.](https://picsum.photos/seed/wide/1600/700)

**Part II - An opening banner**

_To open a big section with some breathing room._