DataInspector

Open a payload, follow its structure and copy the JSON without a developer-tools panel.

Live — this one is real

Example release payload

Example release payload {4}

name"mizu-ui"

version"0.2.0"

checks {2}

typestrue

linttrue

files [2]

0"styles.css"

1"fonts.css"

Usage

import { DataInspector } from "mizu-ui";

export function Example() {
  return (
    <DataInspector
      label="Example release payload"
      value={{
        name: "mizu-ui",
        version: "0.2.0",
        checks: { types: true, lint: true },
        files: ["styles.css", "fonts.css"],
      }}
    />
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect data/Inspection.tsx

Source is included in the npm package under src/data/Inspection.tsx.

Open full source ↗

Props

Prop	Type	Default	Description
value	unknown	—	A JSON-like object, array or scalar.
label	string	"Data"	Section name.

Accessibility

Native disclosure controls. Circular objects are marked; copy is omitted when serialization fails. Depth is capped at eight and siblings at 200.

Motion

Native disclosure; no observers.

Works alongside

DataTable DescriptionList Stat BarChart