A grid-tile GUI panel with SVG rotary knobs for creative coding

npm install @yuske-nakajima/tileui

USAGE

ESM (recommended) 
import TileUI from '@yuske-nakajima/tileui';
CDN (ESM) 
<script type="module">
  import TileUI from 'https://cdn.jsdelivr.net/npm/@yuske-nakajima/tileui/dist/tileui.js';
</script>
CDN (UMD) 
<script src="https://unpkg.com/@yuske-nakajima/tileui"></script>
<script>
  const gui = new TileUI();
</script>

EXAMPLES

2 COLUMNS
3 COLUMNS
4 COLUMNS
CUSTOM STYLES
DOCK (RIGHT DRAWER)

Press G to toggle or use the edge button

Dock Drawer — Slide-in panel from any edge

const gui = new TileUI({
  dock: 'right',
  collapsible: true,
  overlay: true,
  columns: { min: 1, max: 3 },
  title: 'Controls',
  toggleKey: 'g',
});

gui.add(params, 'speed', 0, 100);
gui.addColor(params, 'color');
gui.addBoolean(params, 'enabled');
gui.open();

Try the interactive dock demo with all four directions

Go to Dock Demo →