Skip to content
Adam Manuel’s “Dev Blog”React live block: pipeline diagram

Find your next rabbit hole

A topic, a tool, a tiny curiosity. Start anywhere.

React live block: pipeline diagram

Live blocks use approved components from the repository's registry. This example uses a responsive SVG diagram. Select a stage with the mouse or keyboard to follow a request through the application.

Follow a request

Interactive example. Enable JavaScript to run it.

View source
<Diagram id='pipeline' />

The article, headings, and diagram permalink are static HTML. Only the diagram's interactive area mounts as React when it approaches the viewport. Its source is available even when JavaScript is disabled.

See the counter example for the smallest live block.

You made it. Thanks for reading.