whatisgithub

What is leva?

pmndrs/leva — explained in plain English

Analysis updated 2026-06-26

★ 5,940TypeScriptAudience · developerComplexity · 2/5Setup · easy

In one sentence

Leva is a React hook that automatically creates a live floating control panel in your browser so you can tweak values like numbers, colors, and sliders in real time without restarting your app.

Mindmap

mindmap
  root((leva))
    What it does
      Live control panel
      Auto-detects value types
      12+ input types
    Tech stack
      React hook
      TypeScript
      npm package
    Use cases
      3D scene tuning
      Creative coding
      React prototyping
    Audience
      React developers
      Creative coders
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Add a live slider to tune animation speed or physics values in a React Three Fiber 3D scene without restarting the app.

USE CASE 2

Create a color picker panel to experiment with color palettes in a React prototype in real time.

USE CASE 3

Build a debug panel for a React game or simulation to adjust parameters on the fly.

What is it built with?

TypeScriptReactnpm

How does it compare?

pmndrs/levamicrosoft/tsyringelucaong/minisearch
Stars5,9405,9475,950
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasymoderateeasy
Complexity2/53/52/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

So what is it?

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.

Copy-paste prompts

Prompt 1
I'm using Leva in my React Three Fiber project. Show me how to add a useControls hook with a color picker and a number slider that drives my 3D object's color and rotation speed.
Prompt 2
Using the Leva library, set up a floating control panel with custom theme colors and a button to toggle it visible or hidden.
Prompt 3
How do I write a custom Leva plugin to support a value type that isn't covered by the 12+ built-in input types?
Prompt 4
Set up Leva useControls in a React component to control position x y z and scale of a 3D mesh and log changes to the console.

Frequently asked questions

What is leva?

Leva is a React hook that automatically creates a live floating control panel in your browser so you can tweak values like numbers, colors, and sliders in real time without restarting your app.

What language is leva written in?

Mainly TypeScript. The stack also includes TypeScript, React, npm.

How hard is leva to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is leva for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.

What are similar repos?