A square button with a Material Design icon and optional toggle state. Perfect for compact
interfaces — music apps, tools, playback controls, and game UIs. The button responds to
clicks with onClick callback and can be toggled between active/inactive states.
Create an IconButton with just a position and an icon name. The button uses Material Design icons — a huge library of recognizable symbols. Click the button and check the browser console to see the event fire. Browse available icons →
Add the toggle property to make the button switch between two states. When toggled,
the button glows with the style's accent color. The active property sets the starting
state — true means glowing at start, false means off.
toggle: true, clicking the button automatically
flips active and fires the callback with the new state.
Arrange multiple IconButtons by offsetting their x positions. This pattern is common in music production interfaces (transport controls) and game UIs (action buttons). ProControls handles the click and keyboard events for each button independently.
Add a label below the button to identify its function. Customize the appearance
with ControlStyle themes (like black, red, blue)
to match your interface design. The label appears below the button.
An XYPad is a two-dimensional drag surface — like the touchpad on a synthesizer. You drag the crosshair anywhere inside the pad to set two values at once: one for the X axis (left–right) and one for the Y axis (up–down). It is great for controlling two parameters simultaneously, like filter cutoff and resonance, or panning and reverb depth. Double-click to reset the crosshair to its starting position.
One line creates a working XYPad. Both axes default to a 0–1 range and the crosshair starts in the center. Drag it around and notice it tracks both directions at once!
Use minX, maxX, minY, maxY to set
independent value ranges for each axis. valueX and valueY set
where the crosshair starts. crosshairColor changes the dot and line color —
try any CSS color string.
Set springBack: true and the crosshair will animate back to its starting
position every time you let go. This is perfect for controls that should "snap to neutral"
like a pitch bend wheel or an effects send. springDuration controls how long
the snap takes in seconds. Try dragging and releasing!
onChange
The onChange callback receives two arguments: vx (the X value)
and vy (the Y value), both passed together every time either axis changes.
You can also listen to each axis separately using onChangeX and
onChangeY. Drag the crosshair below and watch the console!
draw() loop with
pad.valueX and pad.valueY — no callback needed.
You can also set them programmatically to move the crosshair:
pad.valueX = 0.5; pad.valueY = 0.5;
A GridPad is a grid of interactive cells — think of a step sequencer on a drum
machine, or the launch pads on a hardware controller. Each cell can behave in different ways
depending on the mode you choose: cells can toggle on and off, hold a continuous
value you fill by holding the mouse, or each display a chosen color from a palette.
The default mode is 'toggle' — click any cell to turn it on (lit up) or off.
The grid defaults to 4 rows and 4 columns. Try clicking around!
rows and cols control how many cells there are.
cellSize sets how big each cell is in pixels.
hGroup and vGroup draw a subtle dividing line every N cells —
useful for marking beats in a sequencer or organizing a larger grid into sections.
The mode option changes how cells behave. toggle — click to
flip each cell on or off. percent — hold the left mouse button to raise a
cell's value, right-click to lower it (good for velocity grids). colorselect
— each cell cycles through a list of colours you define; the value returned is a label you
assign, not the colour itself. Try editing mode below!
All three modes side by side:
onChange
The onChange callback receives the entire grid as a 2-D array — one row per
row of cells, one value per column. In toggle mode the values are 0 or
1; in percent mode they are decimals from 0 to 1; in colorselect mode they
are the value strings you defined. Click cells below to see the full grid
printed to the console.
seq.getValue(row, col),
or set one programmatically with seq.setValue(row, col, 1).
Read the whole grid with seq.values — returns a deep copy of the 2-D array.
An interactive piano keyboard for selecting notes. Rendered with white and black keys, with support for highlighting chords or scales.
Create a simple piano keyboard with default settings:
Start from a different note and adjust the range:
Pre-highlight notes to show chords or scales:
Listen to key state changes with the onChange and onRelease callbacks:
Change highlighted notes dynamically: