dat.gui

dat.GUI is a lightweight controller library for JavaScript that lets developers expose object properties as an interactive on-page panel, so numbers, colors, booleans, dropdown options, and function calls can be tweaked live without touching code or reloading the page. Originally built by Google’s Data Arts Team, it became a staple of creative-coding, WebGL, and Three.js projects where rapid visual experimentation matters more than hand-building a custom debug UI.

Each variable is registered as a typed controller — number sliders, color pickers, checkboxes, text fields, dropdowns, and buttons — and organized into collapsible folders inside a small fixed-position panel. Values can be observed with onChange/onFinishChange callbacks, and panel state can be saved and restored across sessions via localStorage-backed presets, making it useful both for quick prototyping and for shipping-quality parameter panels in generative art, shaders, and simulations.

What You Get

• Typed controllers for every JS primitive — sliders/number boxes for numbers, checkboxes for booleans, dropdowns for lists, color pickers with hex/RGB/HSV support, and buttons for functions.
• Nested folders for organizing large parameter sets into collapsible groups.
• Built-in preset save/load backed by localStorage, so panel states persist across page reloads.
• Prebuilt UMD, CommonJS, and ES module builds (build/dat.gui.js, .module.js, .min.js) plus a standalone CSS file for strict CSP environments.

Common Use Cases

• Exposing shader/material parameters for live tweaking in Three.js/WebGL demos.
• Building debug and tuning panels for generative art, simulations, and particle systems.
• Quick prototyping tools where designers or artists adjust numeric constants without touching code.
• Wiring buttons to trigger one-off functions (reset state, export, replay) during development.

Under The Hood

Architecture GUI.js is the central orchestrator: it composes ControllerFactory (src/dat/controllers/ControllerFactory.js) to instantiate typed controllers — BooleanController, NumberControllerBox/Slider, ColorController, FunctionController, StringController, OptionController — all extending the shared base Controller class (src/dat/controllers/Controller.js), which wraps a DOM element and exposes onChange/onFinishChange/updateDisplay. Folders are implemented as nested GUI instances rather than a separate tree structure, giving a simple compositional shape. Styling is applied via css.inject() pulling in a Sass-compiled stylesheet at import time, coupling the JS entry point directly to the build’s CSS bundling step. Persistence flows through a “remembered” objects array serialized to localStorage keyed by GUI name. Because folders, controllers, and the factory dispatch logic are all tightly coupled to the base Controller contract, changing that contract would ripple through every controller subclass.

Tech Stack Pure ES6 JavaScript (classes, const/let), transpiled with babel-preset-env via .babelrc and bundled with Rollup (rollup.config.js / rollup.config.min.js) using rollup-plugin-babel, rollup-plugin-node-resolve, rollup-plugin-sass (inlines style.scss), and rollup-plugin-uglify for the minified build. There are zero runtime dependencies — everything needed ships in the built bundle. No framework, ORM, or database is involved; it targets the browser DOM and localStorage directly. API docs are generated from JSDoc comments via jsdoc-to-markdown into API.md, and the package is published to both npm and Bower.

Code Quality Tests exist only as a manual QUnit suite (tests/index.html loading qunit.js and jquery.js) intended to be run in a browser — there is no automated npm test script and no CI configuration, so the tests are not wired into any pipeline. ESLint is configured (airbnb-base with numerous rules relaxed) and run via npm run lint / preversion, providing some static-analysis coverage, but there is no TypeScript and no runtime type checking. Naming is consistent (double-underscore-prefixed internal fields, PascalCase classes) and error handling is minimal and defensive (e.g. try/catch around localStorage feature detection) rather than exhaustive.

What Makes It Unique The pattern of an auto-typed, draggable parameter panel is not novel by current standards — newer libraries cover similar ground with smaller footprints — but dat.GUI was one of the originals that popularized this exact interaction model in creative-coding and WebGL circles, and its gui.add(object, property, min, max) API became a de-facto convention that later libraries in this space still imitate.