VST UI Calibrator

Click to select, drag to reposition, drag the bottom-right square to resize. Shift + arrow keys moves by 10 master pixels; arrow keys move by 1. Coordinates are always in master-canvas units, regardless of preview zoom.

Load a chassis image, then add groups and elements. Files stay in your browser.

01 / Master canvas

WidthHeight

Fit chassis uniformly (contain, no crop)

Use the actual canvas your JUCE editor renders. The image is never trimmed.

02 / Groups

Group

Group name

ShapeSprite preview state

OFF sprite PNGON sprite PNG

Sprite images are loaded for preview only. Exports contain their original filenames, not binary data.

Group widthGroup height

Move X (delta)Move Y (delta)

03 / Elements

Element

Element name

XYWidthHeight

Element group Visible

Use single elements for irregular locations and groups for repeated steps, pattern banks, knobs, etc.

04 / Red hotspot detection

Red minMinimum area (px²)

Detects connected red shapes. Clusters similar widths/heights into editable groups. Review detected bounds before exporting; generated artwork may contain decorative reds.

05 / Import, export & evidence

Import calibration JSON

Sprite output scaleFit mode

Creates a separate transparent RGBA PNG for each element and state, resized to exact exported frame dimensions. Includes a manifest, JSON and C++ header. No source trimming or background baked in. The preview uses the same fit mode.

Schema: vst-ui-calibration/v1. JSON, C++ header and PNG bundle derive from the same geometry. ZIP uses browser-native PNG encoding and an uncompressed ZIP container (no external dependencies).