# lil-gui

> Makes a floating panel for controllers on the web.

Latest version **0.21.0** (published 2025-10-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install lil-gui
pnpm add lil-gui
yarn add lil-gui
bun add lil-gui
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.21.0 |
| Published | 2025-10-12 |
| First published | 2019-09-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 221.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1649 |
| Author | George Michael Brower |
| Maintainers | georgebrower |

## Links

- npm: https://www.npmjs.com/package/lil-gui
- Repository: https://github.com/georgealways/lil-gui
- Homepage: https://lil-gui.georgealways.com
- Issues: https://github.com/georgealways/lil-gui/issues
- npm.io page: https://npm.io/package/lil-gui

## Recent versions

- 0.21.0 (latest) — 2025-10-12
- 0.20.0 — 2024-11-03
- 0.19.2 — 2024-03-03
- 0.19.1 — 2023-11-04
- 0.19.0 — 2023-10-27
- 0.18.2 — 2023-06-11
- 0.18.1 — 2023-03-12
- 0.18.0 — 2023-02-11
- 0.17.0 — 2022-07-09
- 0.16.1 — 2022-02-11
- 0.16.0 — 2021-12-31
- 0.15.0 — 2021-12-06
- 0.14.0 — 2021-11-22
- 0.13.0 — 2021-11-15
- 0.12.0 — 2021-11-09
- … 21 more at https://npm.io/package/lil-gui/versions

## README

# lil-gui

Makes a floating panel for controllers on the web. Works as a drop-in replacement for dat.gui in most projects. See [Migrating](https://lil-gui.georgealways.com/#Migrating) for a list of breaking changes.

[**Homepage**](https://lil-gui.georgealways.com/) •
[**Basic Demo**](https://lil-gui.georgealways.com/examples/basic/) •
[Examples](https://lil-gui.georgealways.com/#Examples) •
[Guide](https://lil-gui.georgealways.com/#Guide) •
[API](https://lil-gui.georgealways.com/#API) •
[GitHub](https://github.com/georgealways/lil-gui)

```js
import GUI from 'lil-gui'; 

const gui = new GUI();

const myObject = {
	myBoolean: true,
	myFunction: function() { ... },
	myString: 'lil-gui',
	myNumber: 1
};

gui.add( myObject, 'myBoolean' );  // Checkbox
gui.add( myObject, 'myFunction' ); // Button
gui.add( myObject, 'myString' );   // Text Field
gui.add( myObject, 'myNumber' );   // Number Field

// Add sliders to number fields by passing min and max
gui.add( myObject, 'myNumber', 0, 1 );
gui.add( myObject, 'myNumber', 0, 100, 2 ); // snap to even numbers

// Create dropdowns by passing an array or object of named values
gui.add( myObject, 'myNumber', [ 0, 1, 2 ] );
gui.add( myObject, 'myNumber', { Label1: 0, Label2: 1, Label3: 2 } );

// Chainable methods
gui.add( myObject, 'myProperty' )
	.name( 'Custom Name' )
	.onChange( value => {
		console.log( value );
	} );

// Create color pickers for multiple color formats
const colorFormats = {
	string: '#ffffff',
	int: 0xffffff,
	object: { r: 1, g: 1, b: 1 },
	array: [ 1, 1, 1 ]
};

gui.addColor( colorFormats, 'string' );
```

---
_Source: https://npm.io/package/lil-gui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._