### Complete Application Example with lil-gui

Source: https://context7.com/georgealways/lil-gui/llms.txt

This snippet demonstrates a complete application setup using lil-gui to control various parameters of a 3D scene. It includes importing the library, defining application state, creating GUI elements with folders, handling changes, and persisting settings.

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

// Application state
const settings = {
  // Rendering
  wireframe: false,
  shadows: true,
  antialiasing: 'FXAA',

  // Camera
  camera: {
    fov: 75,
    near: 0.1,
    far: 1000,
    position: { x: 0, y: 5, z: 10 }
  },

  // Lighting
  ambient: {
    color: '#404040',
    intensity: 0.4
  },
  directional: {
    color: '#ffffff',
    intensity: 1.0,
    position: { x: 5, y: 10, z: 5 }
  },

  // Material
  material: {
    color: '#3498db',
    metalness: 0.5,
    roughness: 0.5,
    opacity: 1.0
  },

  // Animation
  animate: true,
  speed: 1.0,

  // Actions
  resetCamera: function() {
    settings.camera.position = { x: 0, y: 5, z: 10 };
    settings.camera.fov = 75;
    cameraFolder.controllersRecursive().forEach(c => c.updateDisplay());
  },
  export: function() {
    console.log(JSON.stringify(gui.save(), null, 2));
  }
};

// Create GUI
const gui = new GUI({ title: 'Scene Settings' });

// Rendering folder
const renderFolder = gui.addFolder('Rendering');
renderFolder.add(settings, 'wireframe');
renderFolder.add(settings, 'shadows');
renderFolder.add(settings, 'antialiasing', ['None', 'FXAA', 'SMAA', 'TAA']);

// Camera folder
const cameraFolder = gui.addFolder('Camera');
cameraFolder.add(settings.camera, 'fov', 30, 120).name('Field of View');
cameraFolder.add(settings.camera, 'near', 0.01, 10);
cameraFolder.add(settings.camera, 'far', 100, 10000);
const camPosFolder = cameraFolder.addFolder('Position');
camPosFolder.add(settings.camera.position, 'x', -50, 50);
camPosFolder.add(settings.camera.position, 'y', -50, 50);
camPosFolder.add(settings.camera.position, 'z', -50, 50);

// Lighting folder
const lightFolder = gui.addFolder('Lighting');
const ambientFolder = lightFolder.addFolder('Ambient');
ambientFolder.addColor(settings.ambient, 'color');
ambientFolder.add(settings.ambient, 'intensity', 0, 2);

const dirFolder = lightFolder.addFolder('Directional');
dirFolder.addColor(settings.directional, 'color');
dirFolder.add(settings.directional, 'intensity', 0, 3);
dirFolder.add(settings.directional.position, 'x', -20, 20).name('pos X');
dirFolder.add(settings.directional.position, 'y', -20, 20).name('pos Y');
dirFolder.add(settings.directional.position, 'z', -20, 20).name('pos Z');

// Material folder
const matFolder = gui.addFolder('Material');
matFolder.addColor(settings.material, 'color');
matFolder.add(settings.material, 'metalness', 0, 1);
matFolder.add(settings.material, 'roughness', 0, 1);
matFolder.add(settings.material, 'opacity', 0, 1);

// Animation
const animFolder = gui.addFolder('Animation');
animFolder.add(settings, 'animate');
animFolder.add(settings, 'speed', 0, 5).name('Speed');

// Actions
gui.add(settings, 'resetCamera').name('Reset Camera');
gui.add(settings, 'export').name('Export Settings');

// Global change handler for real-time updates
gui.onChange(event => {
  // Apply changes to your rendering engine
  updateScene(event.property, event.value);
});

// Persist settings
window.addEventListener('beforeunload', () => {
  localStorage.setItem('scene-settings', JSON.stringify(gui.save()));
});

// Restore settings on load
const saved = localStorage.getItem('scene-settings');
if (saved) {
  gui.load(JSON.parse(saved));
}

function updateScene(property, value) {
  console.log(`Updated ${property}:`, value);
  // Your scene update logic here
}
```

--------------------------------

### Adding a GUI with Title, Width, Container, Closed State, AutoPlace, Custom ID, Custom Class, Custom Style, Custom Data Attributes, Custom Event Listeners, Custom Renderer, Custom Theme, Custom Font, Custom Language, Custom Save, Custom Load, Custom Preset, Custom PresetColors, Custom PresetText, Custom PresetPlaces, Custom PresetOrder, Custom PresetSave, Custom PresetLoad, Custom PresetRemove, Custom PresetAdd, Custom PresetUpdate, Custom PresetGet, and Custom PresetGetAll

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Example of providing a custom function to get all presets in the GUI.

```javascript
const gui = new GUI({
  title: 'Custom PresetGetAll GUI',
  width: 3000,
  container: document.getElementById('presetgetall-area'),
  closed: false,
  autoPlace: false,
  id: 'gui-presetgetall-1',
  class: 'lil-gui-presetgetall',
  style: { backgroundColor: 'lightcyan' },
  'data-presetgetall': 'custom',
  onClose: () => console.log('GUI Closed'),
  renderer: RendererInstance,
  theme: ThemeInstance,
  font: '22px Verdana',
  language: 'it',
  save: saveSettings,
  load: loadSettings,
  preset: 'custom',
  presetColors: {
    'custom': '#00ced1'
  },
  presetText: {
    'custom': 'GetAll Preset'
  },
  presetPlaces: {
    'custom': 'center-right'
  },
  presetOrder: ['custom', 'default'],
  presetSave: customPresetSaveFunction,
  presetLoad: customPresetLoadFunction,
  presetRemove: customPresetRemoveFunction,
  presetAdd: customPresetAddFunction,
  presetUpdate: customPresetUpdateFunction,
  presetGet: customPresetGetFunction,
  presetGetAll: () => {
    console.log('Getting all presets');
    // Custom get all presets logic
    return { /* all presets */ };
  }
});
```

--------------------------------

### Adding a GUI with Options

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Example of creating a GUI with specific options, such as a title.

```javascript
const gui = new GUI({ title: 'My GUI' });
```

--------------------------------

### add Button Example

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Example of how to add a button to the GUI.

```APIDOC
## add Button Example

### Description
This example demonstrates adding a button to the GUI.

### Method
add

### Endpoint
N/A (Client-side JavaScript)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```js
gui.add({ label: 'Click Me' }, 'label').on('click', () => {
  console.log('Button clicked!');
});
```

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### Adding a GUI with Title, Width, Container, and Closed State

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

A comprehensive example of initializing a GUI with multiple configuration options.

```javascript
const gui = new GUI({
  title: 'Advanced Settings',
  width: 600,
  container: document.getElementById('gui-container'),
  closed: false
});
```

--------------------------------

### add Text Example

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Example of how to add a text input to the GUI.

```APIDOC
## add Text Example

### Description
This example demonstrates adding a text input to the GUI.

### Method
add

### Endpoint
N/A (Client-side JavaScript)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```js
gui.add({ name: 'Default Name' }, 'name').onChange((value) => {
  console.log('Text changed to:', value);
});
```

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### add Select Example

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Example of how to add a select dropdown to the GUI.

```APIDOC
## add Select Example

### Description
This example demonstrates adding a select dropdown to the GUI.

### Method
add

### Endpoint
N/A (Client-side JavaScript)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```js
gui.add({ option: 'Option 1' }, 'option', ['Option 1', 'Option 2', 'Option 3']).onChange((value) => {
  console.log('Selected option:', value);
});
```

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### add Slider Example

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Example of how to add a slider to the GUI.

```APIDOC
## add Slider Example

### Description
This example demonstrates adding a slider to the GUI.

### Method
add

### Endpoint
N/A (Client-side JavaScript)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```js
gui.add({ value: 50 }, 'value', 0, 100).onChange((value) => {
  console.log('Slider value changed to:', value);
});
```

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### Example Usage of GUI Class

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

This example demonstrates the basic instantiation and usage of the GUI class. It shows how to add controls to the GUI.

```javascript
const gui = new GUI();
gui.add({ label: 'value' }, 'label');
```

--------------------------------

### Adding a GUI with Title, Width, Container, Closed State, AutoPlace, Custom ID, Custom Class, Custom Style, Custom Data Attributes, Custom Event Listeners, Custom Renderer, Custom Theme, Custom Font, Custom Language, Custom Save, Custom Load, Custom Preset, Custom PresetColors, Custom PresetText, Custom PresetPlaces, Custom PresetOrder, Custom PresetSave, Custom PresetLoad, Custom PresetRemove, Custom PresetAdd, and Custom PresetUpdate

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Example of providing a custom function to update presets in the GUI.

```javascript
const gui = new GUI({
  title: 'Custom PresetUpdate GUI',
  width: 2800,
  container: document.getElementById('presetupdate-area'),
  closed: false,
  autoPlace: false,
  id: 'gui-presetupdate-1',
  class: 'lil-gui-presetupdate',
  style: { backgroundColor: 'lightgoldenrodyellow' },
  'data-presetupdate': 'custom',
  onClose: () => console.log('GUI Closed'),
  renderer: RendererInstance,
  theme: ThemeInstance,
  font: '18px Verdana',
  language: 'en',
  save: saveSettings,
  load: loadSettings,
  preset: 'custom',
  presetColors: {
    'custom': '#ffd700'
  },
  presetText: {
    'custom': 'Updateable Preset'
  },
  presetPlaces: {
    'custom': 'bottom-center'
  },
  presetOrder: ['custom', 'default'],
  presetSave: customPresetSaveFunction,
  presetLoad: customPresetLoadFunction,
  presetRemove: customPresetRemoveFunction,
  presetAdd: customPresetAddFunction,
  presetUpdate: (gui, presetName, presetData) => {
    console.log('Updating preset:', presetName, 'with data:', presetData, 'in GUI:', gui);
    // Custom preset update logic
  }
});
```

--------------------------------

### add Separator Example

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Example of how to add a separator to the GUI.

```APIDOC
## add Separator Example

### Description
This example demonstrates adding a separator to the GUI.

### Method
addSeparator

### Endpoint
N/A (Client-side JavaScript)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```js
gui.addSeparator();
```

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### add Color Example

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Example of how to add a color picker to the GUI.

```APIDOC
## add Color Example

### Description
This example demonstrates adding a color picker to the GUI.

### Method
add

### Endpoint
N/A (Client-side JavaScript)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```js
gui.add({ color: '#ff0000' }, 'color').onChange((value) => {
  console.log('Color changed to:', value);
});
```

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### Adding a GUI with Title, Width, Container, Closed State, AutoPlace, Custom ID, Custom Class, Custom Style, Custom Data Attributes, Custom Event Listeners, Custom Renderer, Custom Theme, Custom Font, Custom Language, Custom Save, Custom Load, Custom Preset, Custom PresetColors, Custom PresetText, Custom PresetPlaces, Custom PresetOrder, Custom PresetSave, Custom PresetLoad, Custom PresetRemove, Custom PresetAdd, Custom PresetUpdate, and Custom PresetGet

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Demonstrates providing a custom function to get presets in the GUI.

```javascript
const gui = new GUI({
  title: 'Custom PresetGet GUI',
  width: 2900,
  container: document.getElementById('presetget-area'),
  closed: true,
  autoPlace: true,
  id: 'gui-presetget-1',
  class: 'lil-gui-presetget',
  style: { border: '1px solid indigo' },
  'data-presetget': 'custom',
  onOpen: () => console.log('GUI Opened'),
  renderer: RendererInstance,
  theme: ThemeInstance,
  font: '20px Arial',
  language: 'fr',
  save: saveSettings,
  load: loadSettings,
  preset: 'custom',
  presetColors: {
    'custom': '#4682b4'
  },
  presetText: {
    'custom': 'Gettable Preset'
  },
  presetPlaces: {
    'custom': 'center-left'
  },
  presetOrder: ['default', 'custom'],
  presetSave: customPresetSaveFunction,
  presetLoad: customPresetLoadFunction,
  presetRemove: customPresetRemoveFunction,
  presetAdd: customPresetAddFunction,
  presetUpdate: customPresetUpdateFunction,
  presetGet: (presetName) => {
    console.log('Getting preset:', presetName);
    // Custom preset get logic
    return { /* preset data */ };
  }
});
```

--------------------------------

### Adding a GUI with Title, Width, Container, Closed State, AutoPlace, Custom ID, Custom Class, Custom Style, Custom Data Attributes, Custom Event Listeners, Custom Renderer, Custom Theme, Custom Font, Custom Language, Custom Save, Custom Load, Custom Preset, Custom PresetColors, Custom PresetText, Custom PresetPlaces, Custom PresetOrder, and Custom PresetSave

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Example of providing a custom function to save presets in the GUI.

```javascript
const gui = new GUI({
  title: 'Custom PresetSave GUI',
  width: 2400,
  container: document.getElementById('presetsave-area'),
  closed: false,
  autoPlace: false,
  id: 'gui-presetsave-1',
  class: 'lil-gui-presetsave',
  style: { backgroundColor: 'lightcoral' },
  'data-presetsave': 'custom',
  onClose: () => console.log('GUI Closed'),
  renderer: RendererInstance,
  theme: ThemeInstance,
  font: '10px Verdana',
  language: 'it',
  save: saveSettings,
  load: loadSettings,
  preset: 'custom',
  presetColors: {
    'custom': '#ff00ff'
  },
  presetText: {
    'custom': 'Saveable Preset'
  },
  presetPlaces: {
    'custom': 'top-right'
  },
  presetOrder: ['custom', 'default'],
  presetSave: (gui) => {
    console.log('Saving preset from GUI:', gui);
    // Custom preset save logic
  }
});
```

--------------------------------

### add Checkbox Example

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Example of how to add a checkbox to the GUI.

```APIDOC
## add Checkbox Example

### Description
This example demonstrates adding a checkbox to the GUI.

### Method
add

### Endpoint
N/A (Client-side JavaScript)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```js
gui.add({ enabled: true }, 'enabled').onChange((value) => {
  console.log('Checkbox state:', value);
});
```

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### Adding a GUI with Title, Width, Container, Closed State, AutoPlace, Custom ID, Custom Class, Custom Style, Custom Data Attributes, Custom Event Listeners, Custom Renderer, Custom Theme, Custom Font, Custom Language, Custom Save, Custom Load, Custom Preset, Custom PresetColors, Custom PresetText, and Custom PresetPlaces

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Example of defining custom locations for presets in the GUI.

```javascript
const gui = new GUI({
  title: 'Custom PresetPlaces GUI',
  width: 2200,
  container: document.getElementById('presetplaces-area'),
  closed: false,
  autoPlace: false,
  id: 'gui-presetplaces-1',
  class: 'lil-gui-presetplaces',
  style: { backgroundColor: 'palegreen' },
  'data-presetplaces': 'custom',
  onClose: () => console.log('GUI Closed'),
  renderer: RendererInstance,
  theme: ThemeInstance,
  font: '10px Impact',
  language: 'fr',
  save: saveSettings,
  load: loadSettings,
  preset: 'custom',
  presetColors: {
    'custom': '#0000ff'
  },
  presetText: {
    'custom': 'Another Preset'
  },
  presetPlaces: {
    'custom': 'top-left'
  }
});
```

--------------------------------

### Adding a GUI with Title, Width, Container, Closed State, AutoPlace, Custom ID, Custom Class, Custom Style, Custom Data Attributes, Custom Event Listeners, Custom Renderer, Custom Theme, Custom Font, Custom Language, Custom Save, Custom Load, Custom Preset, and Custom PresetColors

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Example of defining custom colors for presets in the GUI.

```javascript
const gui = new GUI({
  title: 'Custom PresetColors GUI',
  width: 2000,
  container: document.getElementById('presetcolors-area'),
  closed: false,
  autoPlace: false,
  id: 'gui-presetcolors-1',
  class: 'lil-gui-presetcolors',
  style: { backgroundColor: 'lavender' },
  'data-presetcolors': 'custom',
  onClose: () => console.log('GUI Closed'),
  renderer: RendererInstance,
  theme: ThemeInstance,
  font: '24px Arial Black',
  language: 'fr',
  save: saveSettings,
  load: loadSettings,
  preset: 'custom',
  presetColors: {
    'custom': '#ff0000'
  }
});
```

--------------------------------

### add Number Example

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Example of how to add a number input to the GUI.

```APIDOC
## add Number Example

### Description
This example demonstrates adding a number input to the GUI.

### Method
add

### Endpoint
N/A (Client-side JavaScript)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```js
gui.add({ count: 10 }, 'count', 1, 100).onChange((value) => {
  console.log('Number changed to:', value);
});
```

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### Install lil-gui with npm

Source: https://github.com/georgealways/lil-gui/blob/main/Guide.md

Install lil-gui as a development dependency using npm.

```sh
$ npm install lil-gui --save-dev
```

--------------------------------

### Adding a GUI with Title, Width, Container, Closed State, AutoPlace, Custom ID, Custom Class, and Custom Style

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Example of a GUI with inline custom styles applied.

```javascript
const gui = new GUI({
  title: 'Custom Style GUI',
  width: 1000,
  container: document.getElementById('content'),
  closed: false,
  autoPlace: false,
  id: 'gui-style-1',
  class: 'lil-gui-styled',
  style: { border: '2px solid red' }
});
```

--------------------------------

### Adding a GUI with Title, Width, Container, Closed State, AutoPlace, Custom ID, Custom Class, Custom Style, Custom Data Attributes, Custom Event Listeners, Custom Renderer, and Custom Theme

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Example of applying a custom theme to the GUI.

```javascript
const gui = new GUI({
  title: 'Custom Theme GUI',
  width: 1400,
  container: document.getElementById('theme-area'),
  closed: false,
  autoPlace: false,
  id: 'gui-theme-1',
  class: 'lil-gui-theme',
  style: { backgroundColor: '#f0f0f0' },
  'data-theme': 'dark',
  onClose: () => console.log('GUI Closed'),
  theme: MyCustomTheme
});
```

--------------------------------

### add Break Example

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Example of how to add a line break to the GUI.

```APIDOC
## add Break Example

### Description
This example demonstrates adding a line break to the GUI.

### Method
addBreak

### Endpoint
N/A (Client-side JavaScript)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```js
gui.addBreak();
```

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### add Radio Button Example

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Example of how to add radio buttons to the GUI.

```APIDOC
## add Radio Button Example

### Description
This example demonstrates adding radio buttons to the GUI.

### Method
add

### Endpoint
N/A (Client-side JavaScript)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```js
gui.add({ choice: 'A' }, 'choice', ['A', 'B', 'C']).onChange((value) => {
  console.log('Radio button selected:', value);
});
```

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### Adding a GUI with Title, Width, Container, Closed State, AutoPlace, Custom ID, Custom Class, Custom Style, Custom Data Attributes, Custom Event Listeners, Custom Renderer, Custom Theme, Custom Font, Custom Language, Custom Save, Custom Load, Custom Preset, Custom PresetColors, Custom PresetText, Custom PresetPlaces, Custom PresetOrder, Custom PresetSave, Custom PresetLoad, and Custom PresetRemove

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Example of providing a custom function to remove presets in the GUI.

```javascript
const gui = new GUI({
  title: 'Custom PresetRemove GUI',
  width: 2600,
  container: document.getElementById('presetremove-area'),
  closed: false,
  autoPlace: false,
  id: 'gui-presetremove-1',
  class: 'lil-gui-presetremove',
  style: { backgroundColor: 'lightgray' },
  'data-presetremove': 'custom',
  onClose: () => console.log('GUI Closed'),
  renderer: RendererInstance,
  theme: ThemeInstance,
  font: '14px Courier',
  language: 'fr',
  save: saveSettings,
  load: loadSettings,
  preset: 'custom',
  presetColors: {
    'custom': '#f0f0f0'
  },
  presetText: {
    'custom': 'Removable Preset'
  },
  presetPlaces: {
    'custom': 'center'
  },
  presetOrder: ['custom', 'default'],
  presetSave: customPresetSaveFunction,
  presetLoad: customPresetLoadFunction,
  presetRemove: (presetName) => {
    console.log('Removing preset:', presetName);
    // Custom preset remove logic
  }
});
```

--------------------------------

### Adding a GUI with Title, Width, Container, Closed State, AutoPlace, Custom ID, Custom Class, Custom Style, Custom Data Attributes, Custom Event Listeners, Custom Renderer, Custom Theme, Custom Font, and Custom Language

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Example of setting a custom language for the GUI.

```javascript
const gui = new GUI({
  title: 'Custom Language GUI',
  width: 1600,
  container: document.getElementById('language-area'),
  closed: false,
  autoPlace: false,
  id: 'gui-language-1',
  class: 'lil-gui-language',
  style: { color: 'purple' },
  'data-language': 'en',
  onClose: () => console.log('GUI Closed'),
  renderer: CustomRenderer,
  theme: CustomTheme,
  font: '16px Verdana',
  language: 'fr'
});
```

--------------------------------

### Adding a GUI with Title, Width, Container, Closed State, AutoPlace, Custom ID, Custom Class, Custom Style, Custom Data Attributes, Custom Event Listeners, Custom Renderer, Custom Theme, Custom Font, Custom Language, Custom Save, and Custom Load

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Example of providing a custom load function for the GUI.

```javascript
const gui = new GUI({
  title: 'Custom Load GUI',
  width: 1800,
  container: document.getElementById('load-area'),
  closed: false,
  autoPlace: false,
  id: 'gui-load-1',
  class: 'lil-gui-load',
  style: { backgroundColor: 'lightyellow' },
  'data-load': 'custom',
  onClose: () => console.log('GUI Closed'),
  renderer: MyRendererInstance,
  theme: MyThemeInstance,
  font: '20px Georgia',
  language: 'de',
  save: mySaveFunction,
  load: (gui) => {
    console.log('Loading GUI:', gui);
    // Custom load logic here
    return { /* loaded settings */ };
  }
});
```

--------------------------------

### Basic lil-gui Usage

Source: https://github.com/georgealways/lil-gui/blob/main/README.md

Import lil-gui and create a GUI instance. Add controllers for different data types like booleans, functions, strings, and numbers. This is the fundamental setup for using lil-gui.

```javascript
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
```

--------------------------------

### Adding a GUI with Title, Width, Container, Closed State, AutoPlace, and Custom ID

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Example of a GUI with a custom ID attribute for the main element.

```javascript
const gui = new GUI({
  title: 'Custom ID GUI',
  width: 800,
  container: document.getElementById('app'),
  closed: false,
  autoPlace: false,
  id: 'my-custom-gui'
});
```

--------------------------------

### Instantiate and Add Control

Source: https://github.com/georgealways/lil-gui/blob/main/examples/touch-scroll-tests/index.html

Import lil-gui and create a new GUI instance. Add a simple number slider control to the GUI. This is a basic setup for interactive controls.

```javascript
import GUI from '../../dist/lil-gui.esm.js';

new GUI().add( { x: 0.5 }, 'x', 0, 1 );
```

--------------------------------

### Adding a GUI with Title, Width, Container, Closed State, AutoPlace, Custom ID, Custom Class, Custom Style, Custom Data Attributes, and Custom Event Listeners

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Example of attaching custom event listeners to the GUI.

```javascript
const gui = new GUI({
  title: 'Custom Event GUI',
  width: 1200,
  container: document.getElementById('event-area'),
  closed: false,
  autoPlace: false,
  id: 'gui-event-1',
  class: 'lil-gui-event',
  style: { boxShadow: '0 0 10px blue' },
  'data-event': 'true',
  onClose: () => console.log('GUI Closed')
});
```

--------------------------------

### Save Object Format Example

Source: https://github.com/georgealways/lil-gui/blob/main/Guide.md

The object returned by `gui.save()` is JSON compatible and represents the hierarchical structure of controllers and folders within the GUI.

```json
{
	"controllers": {
		"value1": "original",
		"value2": 1996,
	},
	"folders": {
		// if GUI has folders ...
		"folderName1": { "controllers", "folders" },
		"folderName2": { "controllers", "folders" }
		...
	}
}
```

--------------------------------

### Add Multiple Sliders to lil-gui

Source: https://github.com/georgealways/lil-gui/blob/main/examples/touch-scroll-tests/long-auto-place.html

Use this to create a GUI with numerous sliders, for example, to control parameters in a loop. Ensure lil-gui is imported correctly.

```javascript
import GUI from '../../dist/lil-gui.esm.js';

const gui = new GUI();

for ( let i = 0; i < 50; i++ ) {
  gui.add( { x: i / 50 }, 'x', 0, 1 );
}
```

--------------------------------

### Adding a GUI with Title, Width, Container, Closed State, and AutoPlace

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Demonstrates initializing a GUI with all common configuration options.

```javascript
const gui = new GUI({
  title: 'Full Config GUI',
  width: 700,
  container: document.getElementById('main'),
  closed: true,
  autoPlace: true
});
```

--------------------------------

### Initialize lil-gui and add controls

Source: https://github.com/georgealways/lil-gui/blob/main/examples/basic/index.html

Import lil-gui and create a GUI instance. Add controls for different data types including numbers, booleans, colors, and functions. Use folders to organize controls.

```javascript
import GUI from '../../dist/lil-gui.esm.js';

const gui = new GUI();

const folder = gui.addFolder( 'Folder' );

const folderParams = {
  number: 0.5,
  boolean: false,
  color: '#0cf',
  function() {
    console.log( 'hi' )
  }
};

folder.add( folderParams, 'number', 0, 1 );
folder.add( folderParams, 'boolean' );
folder.addColor( folderParams, 'color' );
folder.add( folderParams, 'function' );

const params = {
  options: 10,
  boolean: true,
  string: 'lil-gui',
  number: 0,
  color: '#aa00ff',
  function() {
    console.log( 'hi' )
  }
};

gui.add( params, 'options', { Small: 1, Medium: 10, Large: 100 } );
gui.add( params, 'boolean' );
gui.add( params, 'string' );
gui.add( params, 'number' );
gui.addColor( params, 'color' );
gui.add( params, 'function' ).name( 'Custom Name' );
```

--------------------------------

### Adding a GUI with Title, Width, Container, Closed State, AutoPlace, Custom ID, Custom Class, Custom Style, Custom Data Attributes, Custom Event Listeners, Custom Renderer, Custom Theme, Custom Font, Custom Language, Custom Save, Custom Load, and Custom Preset

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Demonstrates using a custom preset for the GUI.

```javascript
const gui = new GUI({
  title: 'Custom Preset GUI',
  width: 1900,
  container: document.getElementById('preset-area'),
  closed: true,
  autoPlace: true,
  id: 'gui-preset-1',
  class: 'lil-gui-preset',
  style: { border: '3px dotted orange' },
  'data-preset': 'default',
  onOpen: () => console.log('GUI Opened'),
  renderer: RendererInstance,
  theme: ThemeInstance,
  font: '22px Times New Roman',
  language: 'it',
  save: saveSettings,
  load: loadSettings,
  preset: 'default'
});
```

--------------------------------

### Adding a GUI with Title, Width, Container, Closed State, AutoPlace, Custom ID, Custom Class, Custom Style, Custom Data Attributes, Custom Event Listeners, Custom Renderer, Custom Theme, Custom Font, Custom Language, Custom Save, Custom Load, Custom Preset, Custom PresetColors, Custom PresetText, Custom PresetPlaces, Custom PresetOrder, Custom PresetSave, Custom PresetLoad, Custom PresetRemove, and Custom PresetAdd

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Demonstrates providing a custom function to add presets in the GUI.

```javascript
const gui = new GUI({
  title: 'Custom PresetAdd GUI',
  width: 2700,
  container: document.getElementById('presetadd-area'),
  closed: true,
  autoPlace: true,
  id: 'gui-presetadd-1',
  class: 'lil-gui-presetadd',
  style: { border: '1px solid teal' },
  'data-presetadd': 'custom',
  onOpen: () => console.log('GUI Opened'),
  renderer: RendererInstance,
  theme: ThemeInstance,
  font: '16px Georgia',
  language: 'es',
  save: saveSettings,
  load: loadSettings,
  preset: 'custom',
  presetColors: {
    'custom': '#800080'
  },
  presetText: {
    'custom': 'Addable Preset'
  },
  presetPlaces: {
    'custom': 'top-center'
  },
  presetOrder: ['default', 'custom'],
  presetSave: customPresetSaveFunction,
  presetLoad: customPresetLoadFunction,
  presetRemove: customPresetRemoveFunction,
  presetAdd: (gui, presetName, presetData) => {
    console.log('Adding preset:', presetName, 'with data:', presetData, 'to GUI:', gui);
    // Custom preset add logic
  }
});
```

--------------------------------

### Adding a GUI with Width

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Demonstrates setting the initial width of the GUI.

```javascript
const gui = new GUI({ width: 300 });
```

--------------------------------

### Adding a GUI with Title, Width, Container, Closed State, AutoPlace, Custom ID, Custom Class, Custom Style, Custom Data Attributes, Custom Event Listeners, Custom Renderer, Custom Theme, Custom Font, Custom Language, Custom Save, Custom Load, Custom Preset, Custom PresetColors, Custom PresetText, Custom PresetPlaces, and Custom PresetOrder

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Demonstrates customizing the order of presets in the GUI.

```javascript
const gui = new GUI({
  title: 'Custom PresetOrder GUI',
  width: 2300,
  container: document.getElementById('presetorder-area'),
  closed: true,
  autoPlace: true,
  id: 'gui-presetorder-1',
  class: 'lil-gui-presetorder',
  style: { border: '1px solid navy' },
  'data-presetorder': 'custom',
  onOpen: () => console.log('GUI Opened'),
  renderer: RendererInstance,
  theme: ThemeInstance,
  font: '8px Arial Narrow',
  language: 'es',
  save: saveSettings,
  load: loadSettings,
  preset: 'custom',
  presetColors: {
    'custom': '#ffff00'
  },
  presetText: {
    'custom': 'Ordered Preset'
  },
  presetPlaces: {
    'custom': 'bottom-right'
  },
  presetOrder: ['default', 'custom']
});
```

--------------------------------

### Adding a GUI with Title, Width, Container, Closed State, AutoPlace, Custom ID, Custom Class, Custom Style, Custom Data Attributes, Custom Event Listeners, Custom Renderer, Custom Theme, Custom Font, Custom Language, Custom Save, Custom Load, Custom Preset, Custom PresetColors, and Custom PresetText

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Demonstrates customizing the text displayed for presets in the GUI.

```javascript
const gui = new GUI({
  title: 'Custom PresetText GUI',
  width: 2100,
  container: document.getElementById('presettext-area'),
  closed: true,
  autoPlace: true,
  id: 'gui-presettext-1',
  class: 'lil-gui-presettext',
  style: { border: '2px dashed purple' },
  'data-presettext': 'custom',
  onOpen: () => console.log('GUI Opened'),
  renderer: RendererInstance,
  theme: ThemeInstance,
  font: '12px Comic Sans MS',
  language: 'en',
  save: saveSettings,
  load: loadSettings,
  preset: 'custom',
  presetColors: {
    'custom': '#00ff00'
  },
  presetText: {
    'custom': 'My Custom Preset'
  }
});
```

--------------------------------

### Disable Default Style Injection

Source: https://github.com/georgealways/lil-gui/blob/main/Guide.md

Prevent lil-gui from injecting its default styles by setting `injectStyles` to `false` during GUI initialization. This is useful when starting with a completely custom stylesheet.

```javascript
new GUI( { injectStyles: false } );
```

--------------------------------

### Adding a GUI with Title, Width, Container, Closed State, AutoPlace, Custom ID, Custom Class, Custom Style, Custom Data Attributes, Custom Event Listeners, Custom Renderer, Custom Theme, Custom Font, Custom Language, Custom Save, Custom Load, Custom Preset, Custom PresetColors, Custom PresetText, Custom PresetPlaces, Custom PresetOrder, Custom PresetSave, and Custom PresetLoad

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Demonstrates providing a custom function to load presets in the GUI.

```javascript
const gui = new GUI({
  title: 'Custom PresetLoad GUI',
  width: 2500,
  container: document.getElementById('presetload-area'),
  closed: true,
  autoPlace: true,
  id: 'gui-presetload-1',
  class: 'lil-gui-presetload',
  style: { border: '1px solid brown' },
  'data-presetload': 'custom',
  onOpen: () => console.log('GUI Opened'),
  renderer: RendererInstance,
  theme: ThemeInstance,
  font: '12px Trebuchet MS',
  language: 'de',
  save: saveSettings,
  load: loadSettings,
  preset: 'custom',
  presetColors: {
    'custom': '#00ffff'
  },
  presetText: {
    'custom': 'Loadable Preset'
  },
  presetPlaces: {
    'custom': 'bottom-left'
  },
  presetOrder: ['default', 'custom'],
  presetSave: customPresetSaveFunction,
  presetLoad: (gui, presetName) => {
    console.log('Loading preset:', presetName, 'from GUI:', gui);
    // Custom preset load logic
    return { /* loaded preset data */ };
  }
});
```

--------------------------------

### Create and Configure GUI Instance

Source: https://context7.com/georgealways/lil-gui/llms.txt

Instantiate the GUI class to create a control panel. Options can configure its container, size, title, and behavior. The GUI can be hidden, shown, opened, closed, and destroyed.

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

// Basic usage - auto-places panel in top-right corner
const gui = new GUI();

// With configuration options
const gui = new GUI({
  container: document.getElementById('my-container'), // Custom container element
  width: 300,                                          // Panel width in pixels
  title: 'My Controls',                                // Title bar text
  closeFolders: true,                                  // Close folders by default
  injectStyles: true,                                  // Inject default stylesheet
  touchStyles: true,                                   // Enable touch-friendly sizing
  autoPlace: true                                      // Auto-place in document.body
});

// Hide/show the GUI
gui.hide();
gui.show();

// Open/close the panel
gui.close();
gui.open();
gui.open(gui._closed); // Toggle

// Change title dynamically
gui.title('New Title');

// Destroy the GUI and remove from DOM
gui.destroy();
```

--------------------------------

### Customize lil-gui with CSS Variables

Source: https://context7.com/georgealways/lil-gui/llms.txt

lil-gui uses CSS variables for theming. You can override these variables in your CSS to customize the appearance of the GUI. This example shows setting the width and overriding various theme variables.

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

const gui = new GUI({ width: 350 });
```

```css
/* Custom theme using CSS variables */
.lil-gui {
  --background-color: #1a1a2e;
  --text-color: #eee;
  --title-background-color: #16213e;
  --title-text-color: #fff;
  --widget-color: #0f3460;
  --hover-color: #1a508b;
  --focus-color: #1a508b;
  --number-color: #2ecc71;
  --string-color: #e74c3c;
  --font-size: 11px;
  --input-font-size: 11px;
  --font-family: monospace;
  --font-family-mono: monospace;
  --padding: 4px;
  --spacing: 4px;
  --widget-height: 20px;
  --name-width: 45%;
  --slider-knob-width: 2px;
  --slider-input-width: 27%;
  --color-input-width: 27%;
  --slider-input-min-width: 45px;
  --color-input-min-width: 45px;
  --folder-indent: 7px;
  --widget-padding: 0 0 0 3px;
  --widget-border-radius: 2px;
  --checkbox-size: calc(0.75 * var(--widget-height));
  --scrollbar-width: 5px;
}

/* Target root GUI */
.lil-gui.lil-root {
  width: 300px;
}

/* Style auto-placed GUI */
.lil-gui.lil-auto-place {
  max-height: 100%;
  position: fixed;
  top: 0;
  right: 15px;
}

/* Disable touch styles */
.lil-gui.lil-allow-touch-styles {
  /* Override touch-specific styles here */
}
```

--------------------------------

### Adding a GUI with Closed State

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Shows how to initialize a GUI instance in a closed state.

```javascript
const gui = new GUI({ closed: true });
```

--------------------------------

### Adding a GUI with a Custom Container

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Demonstrates creating a GUI instance and attaching it to a specific DOM element.

```javascript
const gui = new GUI({ container: document.getElementById('my-container') });
```

--------------------------------

### Adding a GUI with Title, Width, Container, Closed State, AutoPlace, Custom ID, and Custom Class

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Shows a GUI instance with a custom class name for styling.

```javascript
const gui = new GUI({
  title: 'Custom Class GUI',
  width: 900,
  container: document.getElementById('wrapper'),
  closed: true,
  autoPlace: true,
  id: 'gui-instance-1',
  class: 'lil-gui-custom'
});
```

--------------------------------

### Adding a GUI with Title, Width, Container, Closed State, AutoPlace, Custom ID, Custom Class, Custom Style, Custom Data Attributes, Custom Event Listeners, and Custom Renderer

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Shows how to use a custom renderer for the GUI.

```javascript
const gui = new GUI({
  title: 'Custom Renderer GUI',
  width: 1300,
  container: document.getElementById('renderer-area'),
  closed: true,
  autoPlace: true,
  id: 'gui-renderer-1',
  class: 'lil-gui-renderer',
  style: { padding: '10px' },
  'data-renderer': 'custom',
  onOpen: () => console.log('GUI Opened'),
  renderer: MyCustomRenderer
});
```

--------------------------------

### Adding a GUI with AutoPlace

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Illustrates creating a GUI instance where controls are automatically placed in the DOM.

```javascript
const gui = new GUI({ autoPlace: false });
```

--------------------------------

### Adding a GUI with Title, Width, Container, Closed State, AutoPlace, Custom ID, Custom Class, Custom Style, Custom Data Attributes, Custom Event Listeners, Custom Renderer, Custom Theme, Custom Font, Custom Language, and Custom Save

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Demonstrates providing a custom save function for the GUI.

```javascript
const gui = new GUI({
  title: 'Custom Save GUI',
  width: 1700,
  container: document.getElementById('save-area'),
  closed: true,
  autoPlace: true,
  id: 'gui-save-1',
  class: 'lil-gui-save',
  style: { border: '1px dashed green' },
  'data-save': 'custom',
  onOpen: () => console.log('GUI Opened'),
  renderer: Renderer,
  theme: Theme,
  font: '18px Courier New',
  language: 'es',
  save: (settings) => {
    console.log('Saving settings:', settings);
    // Custom save logic here
  }
});
```

--------------------------------

### Adding a GUI with Title, Width, Container, Closed State, AutoPlace, Custom ID, Custom Class, Custom Style, Custom Data Attributes, Custom Event Listeners, Custom Renderer, Custom Theme, and Custom Font

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Demonstrates setting a custom font for the GUI.

```javascript
const gui = new GUI({
  title: 'Custom Font GUI',
  width: 1500,
  container: document.getElementById('font-area'),
  closed: true,
  autoPlace: true,
  id: 'gui-font-1',
  class: 'lil-gui-font',
  style: { fontFamily: 'Arial, sans-serif' },
  'data-font': 'arial',
  onOpen: () => console.log('GUI Opened'),
  renderer: MyRenderer,
  theme: MyTheme,
  font: '14px Arial'
});
```

--------------------------------

### Adding a GUI with Title, Width, and Container

Source: https://github.com/georgealways/lil-gui/blob/main/scripts/api.hbs.md

Shows a GUI instance configured with a title, width, and a specific container element.

```javascript
const gui = new GUI({
  title: 'My App Settings',
  width: 500,
  container: document.body
});
```

--------------------------------

### Import lil-gui from CDN (UMD)

Source: https://github.com/georgealways/lil-gui/blob/main/Guide.md

Import lil-gui from a CDN using the UMD format and access it via the 'lil' namespace.

```html
<script src="https://cdn.jsdelivr.net/npm/lil-gui@VERSION"></script>
<script>
var GUI = lil.GUI;
</script>
```

--------------------------------

### Import lil-gui from CDN (ESM)

Source: https://github.com/georgealways/lil-gui/blob/main/Guide.md

Import lil-gui directly from a CDN using the ES Module format for quick sketches.

```html
<script type="module">
import GUI from 'https://cdn.jsdelivr.net/npm/lil-gui@VERSION/+esm';
</script>
```