Skip to content

Properties reference

Common#

Generic properties#

Properties shared by all widgets

property type default description
type#
 string "auto" Widget type
id#
 string "auto" Widgets sharing the same id will act as clones and update each other's value(s) without sending extra osc messages.
visible#
 boolean true Set to false to hide the widget.
interaction#
 boolean true Set to false to disable pointer interactions.
property type default description
left#
 number|
string		 "auto" When both top and left are set to auto, the widget is positioned according to the normal flow of the page (from left to right, by order of creation).

Otherwise, the widget will be absolutely positioned
top#
 number|
percentage		 "auto" When both top and left are set to auto, the widget is positioned according to the normal flow of the page (from left to right, by order of creation).

Otherwise, the widget will be absolutely positioned
width#
 number|
percentage		 "auto" Widget width
height#
 number|
percentage		 "auto" Widget height
expand#
 boolean|
number		 "false" If parent's layout is vertical or horizontal, set this to true to stretch the widget to use available space automatically.
property type default description
colorText#
 string "auto" Text color. Set to "auto" to inherit from parent widget.
colorWidget#
 string "auto" Widget's default accent color. Set to "auto" to inherit from parent widget.
colorStroke#
 string "auto" Stroke color. Set to "auto" to use colorWidget.
colorFill#
 string "auto" Fill color. Set to "auto" to use colorWidget.
alphaStroke#
 number "auto" Stroke color opacity.
alphaFillOff#
 number "auto" Fill color opacity (off).
alphaFillOn#
 number "auto" Fill color opacity (on).
lineWidth#
 number "auto" Stroke width.
padding#
 number "auto" Inner spacing.
html#
 string "" Custom html content to be inserted in the widget (before the widget's content).

The code is automatically wrapped in <div class="html"></div>

Allowed HTML tags:

  h1-6, blockquote, p, a, ul, ol, nl, li,

  b, i, strong, em, strike, code, hr, br, div,

  table, thead, img, caption, tbody, tr, th, td, pre

Allowed attributes:

  <*>: class, style, title

  <img>: src, width, height
css#
 string "" CSS rules. See documentation.

Available css variables:
- --color-background: colorBg
- --color-widget: colorWidget
- --color-fill: colorFill
- --color-stroke: colorStroke
- --color-text: colorText
- --widget-padding: padding
- --line-width: lineWidth
- --alpha-fill-on: alphaFillOn
- --alpha-fill-off: alphaFillOff
- --alpha-stroke: alphaStroke
property type default description
value#
 * "" Define the widget's value depending on other widget's values / properties using the advanced property syntax
default#
 * "" If set, the widget will be initialized with this value when the session is loaded.
linkId#
 string|
array		 "" Widgets sharing the same linkId update each other's value(s) AND send their respective osc messages.

When prefixed with >>, the linkId will make the widget act as a master (sending but not receiving)

When prefixed with <<, the linkId will make the widget act as a slave (receiving but not sending)
script#
 script "" Script executed whenever the widget's value updates. See documentation.
property type default description
address#
 string "auto" OSC address for sending / receiving messages, it must start with a slash (/)

By default ("auto"), the widget's id is used: /widget_id
preArgs#
 *|
array		 "" A value or array of values that will be prepended to the OSC messages.
typeTags#
 string "" Defines the osc argument types, one letter per argument (including preArgs)
- If empty, the types are infered automatically from the values (with numbers casted to floats by default)
- If there are more arguments than type letters, the last type is used for the extra arguments

See http://opensoundcontrol.org/spec-1_0 for existing typetags
decimals#
 integer 2 Defines the number of decimals to send.
target#
 string|
array|
null		 "" This defines the targets of the widget's OSC messages
- A string or array of strings formatted as follow: ip:port or ["ip:portA", "ip:portB"]
- If midi is enabled, targets can be midi:device_name
- If no target is set, messages can still be sent if the server has default targets
ignoreDefaults#
 boolean false Set to true to ignore the server's default targets
bypass#
 boolean false Set to true to prevent the widget from sending any osc message

Basics#

button#

On / off button.

property type default description
css#
 string "" CSS rules. See documentation.

Available css variables:
- --color-background: colorBg
- --color-widget: colorWidget
- --color-fill: colorFill
- --color-stroke: colorStroke
- --color-text: colorText
- --widget-padding: padding
- --line-width: lineWidth
- --alpha-fill-on: alphaFillOn
- --alpha-fill-off: alphaFillOff
- --alpha-stroke: alphaStroke
- --color-text-on: colorTextOn
colorTextOn#
 string "auto" Defines the widget's text color when active.
label#
 string|
boolean		 "auto" Set to false to hide completely
- Insert icons using the prefix ^ followed by the icon's name : ^play, ^pause, etc (see https://fontawesome.com/icons?d=gallery&s=solid&m=free)
- Icons can be transformed with the following suffixes: .flip-[horizontal|vertical|both], .rotate-[90|180|270], .spin, .pulse. Example: ^play.flip-horizontal
vertical#
 boolean false Set to true to display the text vertically
wrap#
 boolean false Set to true to wrap long lines automatically.
property type default description
on#
 * 1 Set to null to send send no argument in the osc message
off#
 * 0 Set to null to send send no argument in the osc message. Must be different from on.
mode#
 string "toggle" Interraction mode:
- toggle (classic on/off switch)
- push (press & release)
- tap (no release)

Choices: toggle, push, tap
doubleTap#
 boolean false Set to true to make the button require a double tap to be pushed instead of a single tap
switch#

Value selector button.

property type default description
css#
 string "" CSS rules. See documentation.

Available css variables:
- --color-background: colorBg
- --color-widget: colorWidget
- --color-fill: colorFill
- --color-stroke: colorStroke
- --color-text: colorText
- --widget-padding: padding
- --line-width: lineWidth
- --alpha-fill-on: alphaFillOn
- --alpha-fill-off: alphaFillOff
- --alpha-stroke: alphaStroke
- --color-text-on: colorTextOn
colorTextOn#
 string "auto" Defines the widget's text color when active.
layout#
 string "vertical" Defines how items should be laid out

Choices: vertical, horizontal, grid
gridTemplate#
 string|
number		 "" If layout is grid, can be either a number of columns of a value css grid-template definition.
property type default description
values#
 array|
object		 {
 "Value 1": 1,
 "Value 2": 2
}		 Array of possible values to switch between : [1,2,3]

Object of "label":value pairs. Numeric labels must be prepended or appended with a white space (or any other non-numeric character) otherwise the order of the values won't be kept
mode#
 string "tap" Interraction mode:
- tap: activates when the pointer is down but prevents further scrolling
- slide: same as tap but allows sliding between values
- click: activates upon click only and allows further scrolling

Choices: tap, slide, click

Native dropdown menu.

property type default description
string|
boolean		 "auto" Displayed text (defaults to current value). Keywords %key and %value will be replaced by the widget's selected key/value.
boolean "true" Set to false to hide the dropdown icon
string "center" Set to left or right to change text alignment (otherwise center)

Choices: center, left, right
property type default description
array|
object		 {
 "Value 1": 1,
 "Value 2": 2
}		 Array of possible values to switch between : [1,2,3]

Object of label:value pairs. Numeric labels must be prepended or appended with a white space (or any other non-numeric character) otherwise the order of the values won't be kept

Drag and drop menu with a circular or grid layout.

property type default description
number|
array		 200 - If layout is circular: diameter (in px)
- Else: square size or [width, height] array
boolean false Set to true to allow the menu overflowing its tab ancestors.
property type default description
string|
boolean		 "auto" Displayed text (defaults to current value). Keywords %key and %value will be replaced by the widget's selected key/value.
boolean "true" Set to false to hide the dropdown icon
string "center" Set to left or right to change text alignment (otherwise center)

Choices: center, left, right
string "center" Set to top or bottom to change menu alignment (otherwise center)

Choices: center, top, bottom
string "center" Set to left or right to change menu alignment (otherwise center)

Choices: center, left, right
string "circular" Defines whether the menu's layout should be rendered in a circle or in a box

Choices: circular, horizontal, vertical, grid
string|
number		 "" If layout is grid, can be either a number of columns of a value css grid-template definition.
property type default description
boolean false Set to true to make the menu stay opened after mouse/touch release
boolean false Set to true to make the menu require a double tap to be opened instead of a single tap
array|
object		 [
 1,
 2,
 3
]		 Array of possible values to switch between : [1,2,3]

Object of label:value pairs. Numeric labels must be prepended or appended with a white space (or any other non-numeric character) otherwise the order of the values won't be kept
array "" Array of number defining the weights of each value in values

Ignored when mode is grid
input#

Text input.

property type default description
align#
 string "center" Set to left or right to change text alignment (otherwise center)

Choices: center, left, right
unit#
 string "" Unit will be appended to the displayed widget's value (it doesn't affect osc messages)
property type default description
asYouType#
 boolean false Set to true to make the input send its value at each keystroke
validation#
 string "" Regular expression: if the submitted value doesn't match the regular expression, it will be reset to the last valid value.

If leading and trailing slashes are omitted, they will be added automatically and the flag will be set to "gm"

Examples:
- ^[0-9]*$ accepts digits only, any number of them
- /^[a-zs]{0,10}$/i accept between 0 and 10 alphabetic characters and spaces (case insensitive)
file#

File/Folder selector (server-side).

property type default description
align#
 string "center" Set to left or right to change text alignment (otherwise center)

Choices: center, left, right
hidePath#
 boolean false Set to true to only display the filename (the whole path will still be used as value)
property type default description
directory#
 string "auto" Default browsing directory
extension#
 string "*" Only display files with this extension
allowDir#
 boolean false Allow selecting a folder (by pressing "open" when no file is selected)

Containers#

panel#

Widgets or Tabs container.

property type default description
colorBg#
 string "auto" Panel background color. Set to "auto" to inherit from parent widget.
layout#
 string "default" Defines how children are laid out.

Choices: default, vertical, horizontal, grid
justify#
 string "start" If layout is vertical or horizontal, defines how widgets should be justified.

Choices: start, end, center, space-around, space-between
gridTemplate#
 string|
number		 "" If layout is grid, can be either a number of columns of a value css grid-template definition.
contain#
 boolean true If layout is vertical or horizontal, prevents children from overflowing the panel.
scroll#
 boolean true Set to false to disable scrollbars
innerPadding#
 boolean true Set to false to make the padding property apply only between children and not at the container's inner boundaries.
verticalTabs#
 boolean false Set to true to display for vertical tab layout
property type default description
variables#
 * "@{parent.variables}" Defines one or more arbitrary variables that can be inherited by children widgets
traversing#
 boolean false Set to true to enable traversing gestures in this widget. Set to smart or auto to limit affected widgets by the type of the first touched widget
property type default description
value#
 integer "" Defines currently selected tab in the widget

A tab can be opened only by setting its parent's value
property type default description
widgets#
 array [] Each element of the array must be a widget object. A panel cannot contain widgets and tabs simultaneously.
tabs#
 array [] Each element of the array must be a tab object. A panel cannot contain widgets and tabs simultaneously

A toggle button that opens a popup panel. Cannot contain tabs directly.

property type default description
number|
percentage		 "80%" Modal popup's size
number|
percentage		 "80%" Modal popup's size
number|
percentage		 "auto" Modal popup's position
number|
percentage		 "auto" Modal popup's position
boolean false Set to true to make the modal's position relative to the button's position.
boolean false Set to true to allow the modal overflowing its tab ancestors.
property type default description
string "auto" Panel background color. Set to "auto" to inherit from parent widget.
string "default" Defines how children are laid out.

Choices: default, vertical, horizontal, grid
string "start" If layout is vertical or horizontal, defines how widgets should be justified.

Choices: start, end, center, space-around, space-between
string|
number		 "" If layout is grid, can be either a number of columns of a value css grid-template definition.
boolean true If layout is vertical or horizontal, prevents children from overflowing the panel.
boolean true Set to false to disable scrollbars
boolean true Set to false to make the padding property apply only between children and not at the container's inner boundaries.
string|
boolean		 "auto" Set to false to hide completely
- Insert icons using the prefix ^ followed by the icon's name : ^play, ^pause, etc (see https://fontawesome.com/icons?d=gallery&s=solid&m=free)
- Icons can be transformed with the following suffixes: .flip-[horizontal|vertical|both], .rotate-[90|180|270], .spin, .pulse. Example: ^play.flip-horizontal
string|
boolean		 "auto" Alternative label for the modal popup
number "auto" Modal's inner spacing.
property type default description
* "@{parent.variables}" Defines one or more arbitrary variables that can be inherited by children widgets
boolean false Set to true to enable traversing gestures in this widget. Set to smart or auto to limit affected widgets by the type of the first touched widget
boolean false Set to true to make the modal require a double tap to open instead of a single tap
property type default description
integer "" Defines the modal's state:0 for closed, 1 for opened
property type default description
array [] Each element of the array must be a widget object. A panel cannot contain widgets and tabs simultaneously.
array [] Each element of the array must be a tab object. A panel cannot contain widgets and tabs simultaneously
clone#

Widget replication with overridable properties.

property type default description
widgetId#
 string "" id of the widget to clone
props#
 object {} Cloned widget's properties to override
matrix#

Generic matrix for creating rows/columns of widgets.

property type default description
colorBg#
 string "auto" Panel background color. Set to "auto" to inherit from parent widget.
layout#
 string "horizontal" Defines how children are laid out.

Choices: horizontal, vertical, grid
justify#
 string "start" If layout is vertical or horizontal, defines how widgets should be justified.

Choices: start, end, center, space-around, space-between
gridTemplate#
 string|
number		 "" If layout is grid, can be either a number of columns of a value css grid-template definition.
contain#
 boolean true If layout is vertical or horizontal, prevents children from overflowing the panel.
scroll#
 boolean true Set to false to disable scrollbars
innerPadding#
 boolean true Set to false to make the padding property apply only between children and not at the container's inner boundaries.
property type default description
variables#
 * "@{parent.variables}" Defines one or more arbitrary variables that can be inherited by children widgets
traversing#
 boolean false Set to true to enable traversing gestures in this widget. Set to smart or auto to limit affected widgets by the type of the first touched widget
widgetType#
 string "button" Defines the type of the widgets in the matrix
quantity#
 number 4 Defines the number of widgets in the matrix
start#
 integer 0 First widget's index
props#
 object {} Defines a set of property to override the widgets' defaults.

JS{{}} and #{} blocks in this field are resolved with an extra variable representing each widget's index: $ (e.g. #{$})

Advanced syntax blocks (@{}, OSC{}, JS{{}} and #{}) are resolved at the matrix' scope (ie @{this.variables} returns the matrix' variables property, not its parent's)

Note: by default, the widgets inherit from the matrix' id and osc properties (id and address are appended with /$)
property type default description
value#
 integer "" Defines currently selected tab in the widget

A tab can be opened only by setting its parent's value
property type default description
widgets#
 array [] Each element of the array must be a widget object. A panel cannot contain widgets and tabs simultaneously.
tabs#
 array [] Each element of the array must be a tab object. A panel cannot contain widgets and tabs simultaneously
keyboard#

Piano keyboard.

property type default description
colorWhite#
 string "auto" White keys color.
colorBlack#
 string "auto" Black keys color.
property type default description
keys#
 number 25 Defines the number keys
start#
 number 48 MIDI note number to start with (default is C4)

Standard keyboards settings are: [25, 48], [49, 36], [61, 36], [88, 21]
traversing#
 boolean true Set to false to disable traversing gestures
on#
 * 1 Set to null to send send no argument in the osc message
off#
 * 0 Set to null to send send no argument in the osc message
velocity#
 boolean false Set to true to map the touch coordinates between off (top) and on (bottom). Requires on and off to be numbers
mode#
 string "push" Interraction mode:
- push (press & release)
- toggle (on/off switches)
- tap (no release)

Choices: push, toggle, tap
patchbay#

Connect inputs to outputs.

property type default description
css#
 string "" The inputs/ouputs width can be adjusted by using the .nodes selector:

.nodes { width: 25% }
property type default description
inputs#
 array|
object		 [
 "input_1",
 "input_2"
]		 - Array of input names : ['input_1', 'input_2']
- Object of "label_1": "input_1" pairs. Numeric labels must be prepended or appended with a white space (or any other non-numeric character) otherwise the order of the values won't be kept



Patchbay inputs can be connected to one or more outputs and will send messages of the following form when they are connected/disconnected:

/patchbay_address input_x output_x output_y etc

If no output is connected to the input, the message will be /patchbay_address input_x

The inputs values can be consumed with the property inheritance syntax: @{patchbay_id/input_1} returns an array of output names connected to input_1
outputs#
 array|
object		 [
 "output_1",
 "output_2"
]		 List of output values the inputs can connect to (see inputs).
root#

Main (unique) container

property type default description
colorBg#
 string "auto" Panel background color. Set to "auto" to inherit from parent widget.
layout#
 string "default" Defines how children are laid out.

Choices: default, vertical, horizontal, grid
justify#
 string "start" If layout is vertical or horizontal, defines how widgets should be justified.

Choices: start, end, center, space-around, space-between
gridTemplate#
 string|
number		 "" If layout is grid, can be either a number of columns of a value css grid-template definition.
contain#
 boolean true If layout is vertical or horizontal, prevents children from overflowing the panel.
scroll#
 boolean true Set to false to disable scrollbars
innerPadding#
 boolean true Set to false to make the padding property apply only between children and not at the container's inner boundaries.
verticalTabs#
 boolean false Set to true to display for vertical tab layout
property type default description
variables#
 * "@{parent.variables}" Defines one or more arbitrary variables that can be inherited by children widgets
traversing#
 boolean false Set to true to enable traversing gestures in this widget. Set to smart or auto to limit affected widgets by the type of the first touched widget
property type default description
value#
 integer "" Defines currently selected tab in the widget

A tab can be opened only by setting its parent's value
property type default description
widgets#
 array [] Each element of the array must be a widget object. A panel cannot contain widgets and tabs simultaneously.
tabs#
 array [] Each element of the array must be a tab object. A panel cannot contain widgets and tabs simultaneously
tab#

Tabbed panel widget

property type default description
colorBg#
 string "auto" Panel background color. Set to "auto" to inherit from parent widget.
layout#
 string "default" Defines how children are laid out.

Choices: default, vertical, horizontal, grid
justify#
 string "start" If layout is vertical or horizontal, defines how widgets should be justified.

Choices: start, end, center, space-around, space-between
gridTemplate#
 string|
number		 "" If layout is grid, can be either a number of columns of a value css grid-template definition.
contain#
 boolean true If layout is vertical or horizontal, prevents children from overflowing the panel.
scroll#
 boolean true Set to false to disable scrollbars
innerPadding#
 boolean true Set to false to make the padding property apply only between children and not at the container's inner boundaries.
verticalTabs#
 boolean false Set to true to display for vertical tab layout
label#
 string|
boolean		 "auto" Set to false to hide completely
- Insert icons using the prefix ^ followed by the icon's name : ^play, ^pause, etc (see https://fontawesome.com/icons?d=gallery&s=solid&m=free)
- Icons can be transformed with the following suffixes: .flip-[horizontal|vertical|both], .rotate-[90|180|270], .spin, .pulse. Example: ^play.flip-horizontal
property type default description
variables#
 * "@{parent.variables}" Defines one or more arbitrary variables that can be inherited by children widgets
traversing#
 boolean false Set to true to enable traversing gestures in this widget. Set to smart or auto to limit affected widgets by the type of the first touched widget
property type default description
value#
 integer "" Defines currently selected tab in the widget

A tab can be opened only by setting its parent's value
property type default description
widgets#
 array [] Each element of the array must be a widget object. A panel cannot contain widgets and tabs simultaneously.
tabs#
 array [] Each element of the array must be a tab object. A panel cannot contain widgets and tabs simultaneously

Frames#

frame#

Embed a page in a frame (local network only).

property type default description
value#
 string "" External web page URL.
svg#

Svg parser.

property type default description
svg#
 string "" Svg xml definition (will be wrapped in a < svg /> element)
html#

Simple HTML parser.

image#

Load a image (url or base64-encoded).

property type default description
size#
 string "cover" CSS background-size
position#
 string "center" CSS background-position
repeat#
 string "no-repeat" CSS background-repeat
property type default description
cache#
 boolean true Set to false to disable image caching (forces file reload when updating or editing the widget).

When true, sending reload to the widget reloads its image without changing its value
property type default description
value#
 string "" - File url or path (relative to the session file location by default, falling back to absolute path)
- Base64 encoded image : data:image/...

Graphs#

plot#

XY coordinates plot.

property type default description
dots#
 boolean false Draw dots on the line
bars#
 boolean false Set to true to use draw bars instead (disables logScaleX and forces x axis even spacing)
pips#
 boolean true Set to false to hide the scale
property type default description
filters#
 array "" Each item must be an object with the following properties
- type: string ("highpass", "highshelf", "lowpass", "lowshelf", "peak", "bandpass" or "notch", default: "peak")
- freq: number (filter's resonant frequency, default: 1000)
- q: number (Q factor, default: 1)
- gain: number (default: 0)
- on: boolean (default: true)

See https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode
pips#
 boolean true Set to false to hide the scale
rangeX#
 object {
 "min": 20,
 "max": 22000
}		 Defines the min and max values for the x axis (in Hz, logarithmic scale)
rangeY#
 object {
 "min": -6,
 "max": 6
}		 Defines the min and max values for the y axis (in dB)
origin#
 number|
boolean		 "auto" Defines the y axis origin. Set to false to disable it
property type default description
value#
 array|
string		 "" - Array of y values
- Array of [x, y] array values
- String array
- String object to update specific coordinates only: {0:1, 4:0} will change the 1st and 5th points' coordinates
eq#

Draws logarithmic frequency response from an array of filter objects.

property type default description
dots#
 boolean false Draw dots on the line
bars#
 boolean false Set to true to use draw bars instead (disables logScaleX and forces x axis even spacing)
pips#
 boolean true Set to false to hide the scale
property type default description
filters#
 array "" Each item must be an object with the following properties
- type: string ("highpass", "highshelf", "lowpass", "lowshelf", "peak", "bandpass" or "notch", default: "peak")
- freq: number (filter's resonant frequency, default: 1000)
- q: number (Q factor, default: 1)
- gain: number (default: 0)
- on: boolean (default: true)

See https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode
pips#
 boolean true Set to false to hide the scale
rangeX#
 object {
 "min": 20,
 "max": 22000
}		 Defines the min and max values for the x axis (in Hz, logarithmic scale)
rangeY#
 object {
 "min": -6,
 "max": 6
}		 Defines the min and max values for the y axis (in dB)
origin#
 number|
boolean		 "auto" Defines the y axis origin. Set to false to disable it
property type default description
value#
 array|
string		 "" - Array of y values
- Array of [x, y] array values
- String array
- String object to update specific coordinates only: {0:1, 4:0} will change the 1st and 5th points' coordinates
visualizer#

Display its value over time.

property type default description
dots#
 boolean false Draw dots on the line
bars#
 boolean false Set to true to use draw bars instead (disables logScaleX and forces x axis even spacing)
pips#
 boolean true Set to false to hide the scale
property type default description
filters#
 array "" Each item must be an object with the following properties
- type: string ("highpass", "highshelf", "lowpass", "lowshelf", "peak", "bandpass" or "notch", default: "peak")
- freq: number (filter's resonant frequency, default: 1000)
- q: number (Q factor, default: 1)
- gain: number (default: 0)
- on: boolean (default: true)

See https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode
pips#
 boolean true Set to false to hide the scale
rangeX#
 object {
 "min": 20,
 "max": 22000
}		 Defines the min and max values for the x axis (in Hz, logarithmic scale)
rangeY#
 object {
 "min": 0,
 "max": 1
}		 Defines the min and max values for the y axis
origin#
 number "auto" Defines the y axis origin. Set to false to disable it
duration#
 number 1 Defines visualization duration in seconds
framerate#
 number 30 Defines visualization framerate
logScaleY#
 boolean|
number		 false Set to true to use logarithmic scale for the y axis (base 10). Set to a number to define the logarithm's base.
freeze#
 boolean false Set to true to freeze current view and ignore incoming values
property type default description
value#
 array|
string		 "" - Array of y values
- Array of [x, y] array values
- String array
- String object to update specific coordinates only: {0:1, 4:0} will change the 1st and 5th points' coordinates

Indicators#

led#

Intensity display.

property type default description
borderRadius#
 string "" Css border-radius property.
property type default description
mode#
 string "intensity" Defines how value is interpreted (see value)

Choices: intensity, color
range#
 object {
 "min": 0,
 "max": 1
}		 Value range
alphaRange#
 object {
 "min": 0,
 "max": 1
}		 Alpha range (if mode is color)
logScale#
 boolean false If mode is intensity, set to true to use logarithmic scale.
property type default description
value#
 number|
array|
string		 "" If mode is intensity:
- Number: intensity between range.min and range.max

If mode is color:
- Array: [r, g, b] (r, g and b between range.min and range.max)
- Array: [r, g, b, alpha] (alpha between alphaRange.min and alphaRange.max)
- String: CSS color
text#

Display text.

property type default description
vertical#
 boolean false Set to true to display the text vertically
wrap#
 boolean false Set to true to wrap long lines automatically.
align#
 string "center" Css text-align property.

Choices: center, left, right

Pads#

xy#

Two-dimensional slider.

property type default description
pointSize#
 integer 20 Defines the points' size
ephemeral#
 boolean false When set to true, the point will be drawn only while touched.
pips#
 boolean true Set to false to hide the scale
property type default description
snap#
 boolean false By default, the points are dragged from their initial position.

If set to true, touching anywhere on the widget's surface will make them snap to the touching coordinates
spring#
 boolean false When set to true, the widget will go back to its default value when released
rangeX#
 object {
 "min": 0,
 "max": 1
}		 Defines the min and max values for the x axis
rangeY#
 object {
 "min": 0,
 "max": 1
}		 Defines the min and max values for the y axis
logScaleX#
 boolean|
number		 false Set to true to use logarithmic scale for the x axis. Set to -1 for exponential scale.
logScaleY#
 boolean|
number		 false Set to true to use logarithmic scale for the y axis. Set to -1 for exponential scale.
doubleTap#
 boolean|
string		 false Set to true to make the fader reset to its default value when receiving a double tap.

Can also be an osc address, which case the widget will just send an osc message: /<doubleTap> <preArgs>
sensitivity#
 number 1 Defines the pad's sensitivity when snap is false
rgb#

Color picker with optional alpha slider.

property type default description
snap#
 boolean false By default, the points are dragged from their initial position.

If set to true, touching anywhere on the widget's surface will make them snap to the touching coordinates
spring#
 boolean false When set to true, the widget will go back to its default value when released
range#
 object {
 "min": 0,
 "max": 255
}		 Defines the widget's output scale.
alpha#
 boolean false Set to true to enable alpha channel
rangeAlpha#
 object {
 "min": 0,
 "max": 1
}		 Defines the widget's output scale for the alpha channel.
multixy#

Multi-point XY pad.

property type default description
pointSize#
 integer 20 Defines the points' size
ephemeral#
 boolean false When set to true, the points will be drawn only chile touched.
pips#
 boolean true Set to false to hide the scale
property type default description
points#
 integer|
array		 2 Defines the number of points on the pad

Can be an array of strings that will be used as labels for the points (ex: ['A', 'B'])
snap#
 boolean false By default, the points are dragged from their initial position.

If set to true, touching anywhere on the widget's surface will make them snap to the touching coordinates
spring#
 boolean false When set to true, the widget will go back to its default value when released
rangeX#
 object {
 "min": 0,
 "max": 1
}		 Defines the min and max values for the x axis
rangeY#
 object {
 "min": 0,
 "max": 1
}		 Defines the min and max values for the y axis
logScaleX#
 boolean|
number		 false Set to true to use logarithmic scale for the x axis. Set to -1 for exponential scale.
logScaleY#
 boolean|
number		 false Set to true to use logarithmic scale for the y axis. Set to -1 for exponential scale.
sensitivity#
 number 1 Defines the pad's sensitivity when snap is false

Sliders#

fader#

Vertical / horizontal slider.

property type default description
css#
 string "" CSS rules. See documentation.

Available css variables:
- --color-background: colorBg
- --color-widget: colorWidget
- --color-fill: colorFill
- --color-stroke: colorStroke
- --color-text: colorText
- --widget-padding: padding
- --line-width: lineWidth
- --alpha-fill-on: alphaFillOn
- --alpha-fill-off: alphaFillOff
- --alpha-stroke: alphaStroke
- --alpha-pips: alphaPips
- --alpha-pips-text: alphaPipsText
- --knob-size: knobSize
design#
 string "default" Design style

Choices: default, round, compact
knobSize#
 number "auto" Fader knob size
horizontal#
 boolean false Set to true to display the fader horizontally
pips#
 boolean false Set to true to show range breakpoints (ignored if design is compact)
dashed#
 boolean|
array		 false Set to true to display a dashed gauge. Can be set as an array of two numbers : [dash_size, gap_size]
gradient#
 array|
object		 [] When set, the meter's gauge will be filled with a linear color gradient
- each item must be a CSS color string.
- as an object: each key must be a number between 0 and 1
- each item must be a CSS color string.

Examples: ['blue', 'red'], {'0': 'blue', '0.9': 'blue', '1': 'red'}
property type default description
snap#
 boolean false By default, dragging the widget will modify it's value starting from its last value. Setting this to true will make it snap directly to the mouse/touch position
spring#
 boolean false When set to true, the widget will go back to its default value when released
doubleTap#
 boolean false Set to true to make the fader reset to its default value when receiving a double tap.

Can also be an osc address, in which case the widget will just send an osc message (/<doubleTap> <preArgs>)
range#
 object {
 "min": 0,
 "max": 1
}		 Defines the breakpoints of the fader's scale:
- keys can be percentages and/or min / max
- values can be number or object if a custom label is needed

Example: ({min:{"-inf": 0}, "50%": 0.25, max: {"+inf": 1}})
logScale#
 boolean|
number		 false Set to true to use logarithmic scale. Set to -1 for exponential scale.
sensitivity#
 number 1 Defines the fader's sensitivity when snap is false
steps#
 string|
number|
array		 "" Restricts the widget's value:
- auto: use values defined in range
- number: define a number of evenly spaced steps
- array: use arbitrary values
origin#
 number "auto" Defines the starting point's value of the fader's gauge
knob#

Rotative knob slider.

property type default description
css#
 string "" CSS rules. See documentation.

Available css variables:
- --color-background: colorBg
- --color-widget: colorWidget
- --color-fill: colorFill
- --color-stroke: colorStroke
- --color-text: colorText
- --widget-padding: padding
- --line-width: lineWidth
- --alpha-fill-on: alphaFillOn
- --alpha-fill-off: alphaFillOff
- --alpha-stroke: alphaStroke
- --alpha-pips: alphaPips
- --alpha-pips-text: alphaPipsText
design#
 string "default" Design style

Note: "solid" design uses "colorStroke" for the central knob color.

Choices: default, solid, line
pips#
 boolean false Set to true to show the scale's breakpoints
dashed#
 boolean|
array		 false Set to true to display a dashed gauge. Can be set as an array of two numbers : [dash_size, gap_size]
angle#
 number 270 Defines the angle's width of the knob, in degrees
property type default description
mode#
 string "vertical" - circular: relative move in circular motion
- snap: snap to touch position and move in vertical motion
- vertical: relative move in vertical motion

Choices: vertical, circular, snap
spring#
 boolean false When set to true, the widget will go back to its default value when released
doubleTap#
 boolean false Set to true to make the knob reset to its default value when receiving a double tap.

Can also be an osc address, in which case the widget will just send an osc message (/<doubleTap> <preArgs>)
range#
 object {
 "min": 0,
 "max": 1
}		 Defines the breakpoints of the fader's scale:
- keys can be percentages and/or min / max
- values can be number or object if a custom label is needed

Example: ({min:{"-inf": 0}, "50%": 0.25, max: {"+inf": 1}})
logScale#
 boolean|
number		 false Set to true to use logarithmic scale. Set to -1 for exponential scale.
sensitivity#
 number 1 Defines the knob's sensitivity when mode is not snap
steps#
 string|
number|
array		 "" Restricts the widget's value:
- auto: use values defined in range
- number: define a number of evenly spaced steps
- array: use arbitrary values
origin#
 number "auto" Defines the starting point's value of the knob's gauge
encoder#

A knob that sends a relative direction infomation instead of an absolute value.

property type default description
css#
 string "" CSS rules. See documentation.

Available css variables:
- --color-background: colorBg
- --color-widget: colorWidget
- --color-fill: colorFill
- --color-stroke: colorStroke
- --color-text: colorText
- --widget-padding: padding
- --line-width: lineWidth
- --alpha-fill-on: alphaFillOn
- --alpha-fill-off: alphaFillOff
- --alpha-stroke: alphaStroke
- --alpha-pips: alphaPips
- --alpha-pips-text: alphaPipsText
property type default description
mode#
 string "circular" - circular: relative move in circular motion
- snap: snap to touch position and move in vertical motion
- vertical: relative move in vertical motion

Choices: circular, snap, vertical
spring#
 boolean false When set to true, the widget will go back to its default value when released
doubleTap#
 boolean false Set to true to make the fader reset to its default value when receiving a double tap.

Can also be an osc address, in which case the widget will just send an osc message (/<doubleTap> <preArgs>)
range#
 object {
 "min": 0,
 "max": 1
}		 Defines the breakpoints of the fader's scale:
- keys can be percentages and/or min / max
- values can be number or object if a custom label is needed

Example: ({min:{"-inf": 0}, "50%": 0.25, max: {"+inf": 1}})
logScale#
 boolean|
number		 false Set to true to use logarithmic scale. Set to -1 for exponential scale.
sensitivity#
 number 1 When set between 0 and 1, reduces the encoder's verbosity
ticks#
 number "" Defines the granularity / verbosity of the encoder (number of step for a 360° arc)
back#
 * -1 Defines which value is sent when rotating the encoder anticlockwise
forth#
 * 1 Defines which value is sent when rotating the encoder clockwise
release#
 number "" Defines which value is sent when releasing the encoder:
- Set to null to send send no argument in the osc message
- Can be an object if the type needs to be specified
range#

A fader with two heads for setting a range.

property type default description
css#
 string "" CSS rules. See documentation.

Available css variables:
- --color-background: colorBg
- --color-widget: colorWidget
- --color-fill: colorFill
- --color-stroke: colorStroke
- --color-text: colorText
- --widget-padding: padding
- --line-width: lineWidth
- --alpha-fill-on: alphaFillOn
- --alpha-fill-off: alphaFillOff
- --alpha-stroke: alphaStroke
- --alpha-pips: alphaPips
- --alpha-pips-text: alphaPipsText
- --knob-size: knobSize
design#
 string "default" Design style

Choices: default, round, compact
knobSize#
 number "auto" Fader knob size
horizontal#
 boolean false Set to true to display the fader horizontally
pips#
 boolean false Set to true to show range breakpoints (ignored if design is compact)
dashed#
 boolean|
array		 false Set to true to display a dashed gauge. Can be set as an array of two numbers : [dash_size, gap_size]
gradient#
 array|
object		 [] When set, the meter's gauge will be filled with a linear color gradient
- each item must be a CSS color string.
- as an object: each key must be a number between 0 and 1
- each item must be a CSS color string.

Examples: ['blue', 'red'], {'0': 'blue', '0.9': 'blue', '1': 'red'}
property type default description
snap#
 boolean false By default, dragging the widget will modify it's value starting from its last value. Setting this to true will make it snap directly to the mouse/touch position
spring#
 boolean false When set to true, the widget will go back to its default value when released
doubleTap#
 boolean false Set to true to make the fader reset to its default value when receiving a double tap.

Can also be an osc address, in which case the widget will just send an osc message (/<doubleTap> <preArgs>)
range#
 object {
 "min": 0,
 "max": 1
}		 Defines the breakpoints of the fader's scale:
- keys can be percentages and/or min / max
- values can be number or object if a custom label is needed

Example: ({min:{"-inf": 0}, "50%": 0.25, max: {"+inf": 1}})
logScale#
 boolean|
number		 false Set to true to use logarithmic scale. Set to -1 for exponential scale.
sensitivity#
 number 1 Defines the fader's sensitivity when snap is false
steps#
 string|
number|
array		 "" Restricts the widget's value:
- auto: use values defined in range
- number: define a number of evenly spaced steps
- array: use arbitrary values

Scripts#

script#

Evaluates a script each time it receives a value.

property type default description
event#
 string "value" Define which events trigger the script's execution.

Choices: value, keyboard
script#
 script "" Script executed whenever the widget's receives the defined event. See documentation.
keyBinding#
 string|
array		 "" Key combo string or array of strings (see KeyboardJS documentation)
keyRepeat#
 boolean true Set to false to prevent keydown repeats when holding the key combo pressed
keyType#
 string "keydown" Determines which key event trigger the script's execution

Choices: keydown, keyup, both
variable#

Receives / stores a value, to be used in scripts (using the get function) or in properties (using the @{} syntax).