lil-gui

Makes a floating panel for controllers on the web.

MIT 36 个版本
安装
npm install lil-gui
yarn add lil-gui
pnpm add lil-gui
bun add lil-gui
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 for a list of breaking changes.

HomepageBasic DemoExamplesGuideAPIGitHub

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' );
版本列表
0.21.0 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
0.11.0 2021-10-31
0.10.0 2021-10-27
0.9.3 2019-10-21
0.9.2 2019-10-20
0.9.1 2019-10-17
0.9.0 2019-10-14
0.8.14 2019-10-13
0.8.11 2019-10-12
0.8.9 2019-10-03
0.8.8 2019-09-28
0.8.7 2019-09-28
0.8.6 2019-09-27
0.8.4 2019-09-24
0.7.1 2019-09-24
0.7.0 2019-09-24
0.5.0 2019-09-22
0.4.0 2019-09-22
0.3.3 2019-09-15
0.3.2 2019-09-15
0.3.1 2019-09-15
0.3.0 2019-09-15