Inspect Component

Gist

Design systems are starting to adopt layout components such as Stack, Flex, Grid, and more.
A component model makes it extremely intuitive and declarative to describe layouts.

However, nested components can make it hard to understand the exact structure of the layout.

By including a debug property on a layout component, developers can manually toggle it on and off to visualize whitespace changes.

The component(s) will then use a different shade of background based on the nesting level. Elements that provide whitespace also display their raw (pixel) values on hover.