An open source library of hardware-inspired UI controls for p5.js sketches — faders, rotary knobs, XY pads, step-sequencer grids, VU meters, LED displays, ADSR envelopes, menus, dialogs, and more. Built by David Stein and hosted at procontrols.org. Drop in one script tag, set a style, and your controls wire themselves up — no event handlers, no layout math, no boilerplate. Eight built-in themes (black, stainless, white, brushed, red, blue, yellow, dimpled) plus touch support out of the box.
Built something cool with ProControls for p5.js? Send us a link and we'll highlight your project here.
learnProControls@gmail.comVertical or horizontal fader with dB, raw, or percent readout. Supports spring-back and multiple visual styles.
Bank of faders in one unit — ideal for EQ strips or mixer channels. Fires a single onChange with all values.
Dual-handle slider for selecting a low/high range. Works vertically or horizontally.
Rotary knob with four visual styles — default, rubber, grooved, and pointer. Drag or scroll to adjust.
Bank of rotary knobs in horizontal or vertical layout. Single onChange fires with all values.
Two-axis touch pad with independent X and Y ranges. Optional spring-back to center on release.
Grid of cells with toggle, percent, or color-select modes. Supports grouping for step-sequencer layouts.
Interactive chromatic keyboard with note selection. Highlight chords or scales, perfect for music interfaces.
Multi-state toggle — binary on/off or n-state selector. Fires onChange with the new state index and label.
Material icon button in momentary or toggle mode. Uses any Material Symbols icon name.
Option picker in row or arrow-dropdown style. Click to cycle or jump directly to any option.
Multi-select word-cloud picker. Toggle individual tags on or off; onChange reports the full selection set.
Slide-to-select strip — drag or snap through a list of labeled options.
Menubar or popup with nested submenus. Anchors to any edge or floats as a context menu.
Draggable, scrollable container for grouping controls. Add any control with pnl.add(). Create a single onChange/onRelease handler for all controls in the panel.
Modal dialog with a message and configurable button row. Fires onButton with the index and label clicked.
Modal dialog with a text input field. Fires onSubmit with the entered value and onButton per button click.
Segmented LED-style level meter. Optional fader overlay. Set .value each frame to animate.
Arc-style level meter with optional knob overlay. Driven by setting .value each frame.
Horizontal numeric LED display with configurable digit count, color, and dB or raw readout modes.
Visual envelope display with draggable attack, decay, sustain, and release handles.
Scrollable text panel that renders Wiki Markup — headings, bold, italic, lists, rules, and links.
Floating log panel that intercepts console.log/warn/error. Collapsible, resizable, auto-scrolls to the latest message.
Scrolling time-series line graph. Push a number for a single variable or an object for multiple named variables plotted together.
Scrollable list of selectable items. Supports row selection with hover and click feedback, plus scrollbar for overflow content.
Scrollable table with static header row and auto-sized columns. Supports row selection, horizontal scrolling for wide content.
Multidimensional heatmap with drill-down navigation. Visualize hierarchical data with color-coded cells; click to explore dimensions, right-click to go back.
Compact floating status display showing real-time values and messages. Monitor live metrics, sensor data, or any frequently-updating information in a minimal, always-visible overlay.