Skip to content


Video Lecture

lil-gui lil-gui


Many Three.js projects may still use the dat.GUI, and this is because dat.GUI was the default GUI in the official Three.js examples from release 52 in 2012, up until release 135, when it was then replaced by lil-gui.

dat.GUI still works very well, but it is no longer maintained in case any libraries it depends upon also need updating.

In this lesson, we will migrate from using dat.GUI to using lil-gui.

lil-gui was designed as a drop-in replacement for dat.GUI.


Install lil-gui

When using lil-gui, you can either install it from its official repository, or use the version that is already included with the Three.js install.

To optionally install lil-gui from its official repository,

npm install lil-gui

Note that the type declarations are installed by default when installing lil-gui.

Import lil-gui

In your main.ts, if you installed using npm, then add this line,

import { GUI } from 'lil.gui'

or if you want to use the version that already comes with Three.js, then use this line,

import { GUI } from 'three/addons/libs/lil-gui.module.min.js'

or if your project doesn't support the addons alias, then use,

import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'

The usage of lil-gui compared to dat.GUI is mostly the same when migrating.

Note that all GUI folders are now open by default. You can use the folders close() method if want it closed when your application starts.

Uninstall dat.GUI

If you have dat.GUI installed in your package.json, and you no longer want it, then you can remove it by using the command,

npm uninstall dat.gui

If you also have the @types/dat.gui installed, you can remove them also using the command,

npm uninstall @types/dat.gui

Useful Links


dat.GUI (GitHub)