dataarts/dat.gui

Lightweight controller library for JavaScript.

Source code at GitHub https://github.com/dataarts/dat.gui

{
  "createdAt": "2011-01-23T21:04:58Z",
  "defaultBranch": "master",
  "description": "Lightweight controller library for JavaScript.",
  "fullName": "dataarts/dat.gui",
  "homepage": "",
  "language": "JavaScript",
  "name": "dat.gui",
  "pushedAt": "2025-11-18T11:51:12Z",
  "stargazersCount": 7704,
  "topics": [],
  "updatedAt": "2025-11-26T13:01:04Z",
  "url": "https://github.com/dataarts/dat.gui"
}

dat.GUI

A lightweight graphical user interface for changing variables in JavaScript.

Get started with dat.GUI by reading the [API documentation]!(API.md).

Packaged Builds

The easiest way to use dat.GUI in your code is by using the built source at build/dat.gui.min.js. These built JavaScript files bundle all the necessary dependencies to run dat.GUI.

In your head tag, include the following code:

<script type="text/javascript" unsrc="dat.gui.min.js"></script>

Installing from npm

$ npm install --save dat.gui

// CommonJS:
const dat = require('dat.gui');

// ES6:
import * as dat from 'dat.gui';

const gui = new dat.GUI();

Directory Contents

├── build - Compiled source code.
├── src - Source files.
└── tests - Tests.

Building your own dat.GUI

In the terminal, enter the following:

$ npm install
$ npm run build

npm scripts

npm run build - Build development and production version of scripts.
npm run dev - Build development version of script and watch for changes.

Working with Content Security Policy

If you’re using a server with a Content Security Policy in place that blocks ‘unsafe-inline’, you will have problems when dat.gui.js tries to inject style information. To get around this, load ‘build/dat.gui.css’ as an external style sheet.

Changes

View the Change Log

Thanks

The following libraries / open-source projects were used in the development of dat.GUI: