A simple GUI for inspecting and changing JavaScript variables
Guify is a runtime JS library that gives you a simple way to build a GUI for your JS projects. It pairs very well with three.js and p5.js. Consider it an opinionated take on dat.GUI.
Here are the big features:
var someVariable = 0;
guify.Register([{
{
type: 'range',
object: this, property: 'someProperty',
label: 'Some Property',
min: 0, max: 20, step: 1
},
}])
Below are some common ways to integrate Guify with your setup.
To integrate on an existing page, you can use the transpiled version in /lib
, either by including it with your files or using a CDN:
<script src="https://unpkg.com/[email protected]/lib/guify.min.js"></script>
This adds a guify
function at the global level, which you can use to construct the GUI. For example:
<script src="https://unpkg.com/[email protected]/lib/guify.min.js"></script>
<script>
var gui = new guify({ ... })
gui.register([ ... ])
</script>
See the Usage guide below for more details. example.html also demonstrates this pattern.
First, install with NPM: npm install --save guify
Then you can import using either require
or import
depending on your preference:
// ES6
import guify from 'guify'
// Require
let guify = require('guify');
Then you can make a quick GUI this way:
var gui = new guify({ ... });
gui.Register([ ... ]);
See the Usage guide below for more details.
Check out the unofficial React port.
Once you have Guify available to construct in your project, make a guify
instance:
var gui = new guify({
title: "Some Title",
});
The various controls in Guify are called "components". You can feed component definitions to Guify as follows:
gui.Register([
{ // A slider representing a value between 0 and 20
type: 'range', label: 'Range',
min: 0, max: 20, step: 1,
onChange: (value) => {
console.log(value);
}
},
{
type: 'button', label: 'Button',
action: () => {
console.log('Button clicked!');
}
},
{
type: 'checkbox', label: 'Checkbox',
onChange: (value) => {
console.log(value);
}
}
]);
You can also bind components representing a value to your JS variables instead of using an onChange()
handler. For example:
var someNumber = 10;
gui.Register([
{ // A slider representing `someNumber`, constrained between 0 and 20.
type: 'range', label: 'Range',
min: 0, max: 20, step: 1,
object: this, property: 'someNumber'
},
There are many points of customization here. See the docs at /docs/api.md. A much more robust example can also be found at example.html.
If you want to build this package, you can run npm install
and then npm run build:prod
, which will create /lib/guify.min.js
.
NPM commands:
build:prod
: Creates /lib/guify.min.js
, the default script used by this package.build:dev
: Creates /lib/guify.js
.develop
: Runs build:dev
and serves the /example
directory as a static web page.See changelog.md.
MIT license. See license.md for specifics.
This package is largely based on control-panel. For setting this up, I used webpack-library-starter.