Perfect GUI

A nice, simple and (probably not) perfect GUI for JavaScript.

API

Documentation

Features

• image buttons
• multiple panels
• easy positioning
• draggable panels
• two-dimensional vector visualization

Install

With NPM

npm i perfect-gui

Import from a CDN

<script type="importmap">
  {
    "imports": {
      "perfect-gui": "https://unpkg.com/perfect-gui@latest/dist/perfect-gui.mjs",
    }
  }
</script>

Hello world

import GUI from 'perfect-gui';

const gui = new GUI();

gui.button('Click me', callback);

Options

const gui = new GUI({
    name: 'My GUI',
    // Name of the panel. 
    // Default is null.

    container: '#container',
    // Element containing the GUI
    // Default is document.body
    
    width: 250,
    // Width of the panel (in pixels). 
    // Default is 290.

    maxHeight: 500,
    // Maximum height beyond which scrolling is necessary. 
    // Default is the smallest value between the height of the window and the height of the container.
    
    closed: false, 
    // Defines whether the panel should be closed by default. 
    // Default is false.

    position: 'bottom right',
    // Defines where to place the panel on screen.
    // Accepted values are 'top', 'bottom', 'left' and 'right' in no particular order ('bottom right' = 'right bottom').
    // If multiple instances have the same position, they will be stacked horizontally.
    // Default is 'top right'.

    draggable: false,
    // Defines if the panel can be manually moved across the screen.
    // Default is false.

    autoRepositioning: true,
    // If set to true, the panel position will be reset when the screen is resized.
    // If a panel has been dragged, it won't be be affected.
    // Default is true.

    color: '#bada55',
    // Default is #2e2e2e

    onUpdate: () => {
      // Callback function triggered each time this GUI instance is updated.    
    }
});

Methods

• button
• slider
• toggle
• list
• image
• color
• vector2
• folder
• toggleClose