React

import { useParams, useValue, useButton, usePlot, useTexture } from '@haxiomic/devui/react';

function Fluid({ sim }) {
  const p = useParams('Fluid', { viscosity: 0.2, dye: '#ff6a00', reset: () => sim.reset() });
  const gravity = useValue(sim, 'gravity', { folder: 'Fluid', softMax: 20 }); // re-renders on change
  useTexture('velocity', sim.velocity, { folder: 'Fluid' });
  // p is live: read it in your frame loop, or in JSX (the component re-renders on change)
  return <h1>viscosity {p.viscosity}</h1>;
}

The hooks use your app's React (a peer of this entry only; the panel keeps its own Preact) and the same gui as the vanilla API. Controls register on mount and are removed a moment after unmount, so StrictMode's double mount and Fast Refresh keep them, and your tweaks return when a component remounts. Button closures are always the latest render's. DevUIProvider gui={…} uses another GUI.

The rest: useControl(obj, key, hints) binds a property and returns its control (to read or set it without re-rendering), useMonitor(obj, key, hints) a readout or a graph, useFolder(path) the folder at a path, and useGUI() the GUI in use. useParams(folder, schema, { rerender: false }) doesn't re-render on change: read the object in your frame loop. In production, aliasing @haxiomic/devui to the noop build makes the hooks no-ops too.