pmndrs/leva

Leva is a React library that generates a floating control panel in your browser automatically, based on values you pass to a hook in your code. The idea is that instead of hardcoding a number or a color and restarting the app each time you want to tweak it, you declare the value through Leva and a panel appears on screen where you can adjust it live while the app runs. Using it requires calling the useControls hook from your React component and passing it an object with the values you want to control. Leva reads the types of those values and picks the right kind of input automatically: a number gets a slider, a string gets a text field, a color gets a color picker, and so on. The README states over 12 input types are available. No configuration or setup is needed beyond installing the package. The panel is designed to look styled out of the box and can be customized or themed. It is keyboard accessible, and the library supports writing custom plugins if the built-in input types do not cover a specific use case. Leva is built for use in React applications and is particularly common in 3D scenes and creative coding projects built with tools like React Three Fiber, where being able to tune values visually is especially useful. The README notes the project was under heavy development at the time it was written. It is maintained by the Poimandres open-source collective and available on npm.