Get started with dat-gui CDN

// Include dat.gui.min.js from the CDN
const gui = require('dat-gui');

// Create a new folder in dat.gui
const folder = new gui.Folder('My Folder');

// Add controls to the folder
folder.add(new gui.SliderControl('My Slider', 0, 1, 0.5));
folder.add(new gui.ColorControl('My Color', 0xff0000));
folder.add(new gui.BooleanControl('My Checkbox', false));

// Add the folder to the DOM
folder.domElement.style.position = 'absolute';
folder.domElement.style.top = '0';
folder.domElement.style.left = '0';
document.body.appendChild(folder.domElement);

// Update the controls when a value changes
const update = () => {
  console.log('Slider:', folder.controllers[0].value);
  console.log('Color:', folder.controllers[1].value.toString());
  console.log('Checked:', folder.controllers[2].value);
};
folder.onChange(update);

// Update the controls initially
update();