devuiGuideDemosAPIGitHub

devui

A dev UI for creative coding.

Controls you can feel for every parameter, a look inside your GPU textures, and a scope on each frame. For any engine; three.js built in.

Read the guide See the demos
npm install github:haxiomic/devui#release

This background is a fragment shader, and the panel is its uniforms. Drag a number sideways.

Your values, as controls

Point devui at your objects and it infers the rest: a 0–1 slider for roughness, a colour picker for a hex string, scrub fields for a position. Or ask for a live, typed object and read it in your frame loop.

The panel lives in a shadow root and loads on first show, so your page and its bundle stay yours. In production, alias the package to its no-op build: your saved values still apply and nothing is shown.

Getting started →

import { gui } from '@haxiomic/devui';

gui.add(material, 'roughness');   // slider 0–1, from the name
gui.add(mesh, 'position');        // x, y, z scrub fields

const p = gui.folder('Fluid').params({
	viscosity: 0.2,
	dye: '#ff6a00',
	curl: { value: 30, min: 0, max: 50 },
	mode: { value: 'advect', options: ['advect', 'diffuse'] },
	reset: () => sim.reset(),
});
// in your frame loop, just read p.viscosity

What's in it

Tweak

GesturesScrub any number, gear down with Shift, sweep a column of fields at once, pick a magnitude from the ladder. ColourOKLCH and HSV, wide gamut, an eyedropper; gradients with a palette library and colour-theory tools. Curves and shapesCurve and easing editors, an XY pad, knobs, direction and orientation gizmos. Presets and A/BSave, blend and animate between presets; hold A/B to flip back to a reference and compare. TimelineKey any value over time and play it back. ShadersUniforms become controls from the source; hot reload keeps your values. Audio and MIDIDrive values from sound; learn a MIDI knob for any row.

See inside

TexturesAny WebGL or WebGPU texture, live: exact texel values, a NaN finder, histograms, mips, cube maps, HDR. Frame scopeEvery pass of every frame on a timeline, CPU and GPU, with what each draws into and reads. Frame captureStep through one frame draw by draw, see what each draw changed, compare two captures. Performance and plotsFrame time and 1% lows, GPU timers, renderer counts; plot any signal.

Fit in

Windows and arrangingPin, group and reorder; tear folders off into windows that snap, stack and dock. SavingValues and layout persist; keep them in a file in your project. The panel elsewhereIn a second window, or on your phone, driving the app. three.jsMaterials, lights, render targets and the renderer, inspected; a scene outliner. ReactHooks for params, values, buttons, plots and textures. From lil-guiA compatible API, so existing code runs as it is. ExtensionsYour own types, views, inspectors and commands, on the same API the built-ins use.

Demos

Vanilla canvas No engine: params, folders, colours, vectors, options, monitors, plots and a canvas texture view, on a page with hostile CSS. Canvas 2D Raw WebGL2 Float render targets with mips viewed live, uniforms bound by { value }, and the frame scope. WebGL2Frame scope three.js The three extension: materials, lights, transforms, render targets and renderer settings. three.js React hooks useParams, useValue, useButton, usePlot and useTexture under StrictMode; a child's controls come and go with it. React Writing an extension The extension guide's worked example: springs get their own row view, an inspector and a command. Extensions haxiomic-engine A physically based viewer, unmodified, with its lil-gui based DevUI resolved to devui. three.jslil-gui API

Also: the capture viewer, to open a .devui-capture file saved anywhere and draw its frame again · the vanilla demo with a linked values file · hands-on checks, a checklist of gestures to try with a mouse, trackpad or finger · the listening kit (an experiment: the frame scope as sound)