Guify

Guify is a GUI system you can use in your JavaScript projects to modify variables and trigger actions. I initially used dat.GUI while working on the other JavaScript projects on this website, but I needed functionality it didn’t have, and I wanted something more suited to my needs.

Guify is my solution. It’s an opinionated take on UI that’s designed to be easily graftable onto any website. It’s ideal for p5.js projects and toys, but it’ll work on anything; in fact, all of the JS projects on this website use it. It has also been ported to React.

Here’s all you need to do to get started in your HTML:

<script src="https://unpkg.com/[email protected]/lib/guify.min.js"></script>

<script>
    var gui = new guify({
        title: 'My App',
    });

    var someNumber = 0;
    gui.Register({
        type: 'range',
        label: 'Some Number',
        min: 0, max: 10,
        object: this, property: "someNumber",
        onChange: (data) => {
            console.log(someNumber);
        }
    });
</script>

You can find more information on the GitHub repo, and you can get the latest version yourself as an NPM package or for browser embedding through a CDN at unpkg.com/guify.