@alyustik/debug-panel

Reusable React debug panel controls.

Disclaimer

This package is fully vibe-coded and primarily built for internal experiments. The API may change without notice, edge cases may be missing, and no support or stability guarantees are provided. Use it at your own risk.

Development

pnpm install
pnpm check

Usage

import { color, Panel, useControls } from '@alyustik/debug-panel';

function DebugControls() {
  const [values] = useControls('Scene', {
    speed: { value: 1, min: 0, max: 5, step: 0.1 },
    enabled: true,
    background: color('#121212', { label: 'Background' }),
  });

  return (
    <>
      <Panel title="Controls" />
      <div>{values.speed}</div>
      <div style={{ color: values.background }}>Preview</div>
    </>
  );
}

Styles are loaded automatically with the package entry.

Reusable widgets are exported from @alyustik/debug-panel/widgets.