Visualize whitespace for a smoother debugging experience.
Design systems are starting to adopt layout components such as
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.