Density

Visual debug mode

The Density debugger makes the attributes that drive Density styles visible in the browser. It adds a red outline and red text to recognized Density elements, so you can see which parts of an interface are participating in the system. Chart marks, axes, grids, and lines receive matching diagnostic styling.

Click the binoculars on the example below (or any example in the docs) to see it in action:

Toggle it yourself

Debug mode is controlled by the boolean data-dn-debug-mode attribute. Add it to the page’s <body> to turn the debugger on, and remove it to turn the debugger off.

<body data-dn-debug-mode>
<!-- Your Density UI -->
</body>

From browser code, toggleAttribute() is a convenient manual toggle:

document.body.toggleAttribute("data-dn-debug-mode");

Use the base UI helpers

density-base-ui exposes browser-safe helpers for controlling debug mode. They safely do nothing when a document body is unavailable, which makes them safe to call from shared code that can also run during server-side rendering.

import {
getDensityDebugMode,
setDensityDebugMode,
toggleDensityDebugMode,
} from "density-base-ui";

setDensityDebugMode(true); // Turn it on.
setDensityDebugMode(false); // Turn it off.

const isEnabled = getDensityDebugMode();
const nextState = toggleDensityDebugMode();

setDensityDebugMode() sets an explicit state. getDensityDebugMode() reads the current state. toggleDensityDebugMode() flips the state and returns the new value, which is useful when updating a debug control in your UI.