Skip to content

Properties reference

Common#

Generic properties#

Properties shared by all widgets

property type default description
lock#
 boolean false Set to true to prevent modifying this widget with the editor. This will not prevent deleting the widget or moving it from a container to another.
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.
comments#
 string "" User comments.
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 positioned at absolute coordinates
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 positioned at absolute coordinates
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). Elements are all unstyled by default, css should be used to customize their appearance.

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, name

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

Some style-related properties can be set or read from css using 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)
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 widget's value in the OSC messages it sends.

Incoming messages must match these to affect by the widget.
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 OSC 1.0 specification 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
property type default description
onCreate#
 script "" Script executed when the widget is created. See documentation.
onValue#
 script "" Script executed when the widget's value updates. See documentation.

Basics#

button#

On / off button.

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

Some style-related properties can be set or read from css using 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|
string		 false Set to true to wrap long lines automatically. Set to soft to avoid breaking words.

Choices: false, true, soft
property type default description
on#
 * 1 Set to null to send send no argument in the osc message. Ignored if mode is momentary.
off#
 * 0 Set to null to send send no argument in the osc message. Must be different from on. Ignored if mode is momentary or tap.
mode#
 string "toggle" Interraction mode:
- toggle (classic on/off switch)
- push (press & release)
- momentary (no release, no value sent)
- tap (no release, sends on as value)

Choices: toggle, push, momentary, tap
doubleTap#
 boolean false Set to true to make the button require a double tap to be pushed instead of a single tap
property type default description
onValue#
 script "" Script executed when the widget's value updates. See documentation.

Additionnal variables:
- locals.touchCoords: [x, y] array representing the touch coordinates, normalized between 0 and 1.
switch#

Value selector button.

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

Some style-related properties can be set or read from css using 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 or a valid value for the css property "grid-template".
wrap#
 boolean|
string		 false Set to true to wrap long lines automatically. Set to soft to avoid breaking words.

Choices: false, true, soft
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
- flip: selects the next value upon click regardless of where the widget is touched

Choices: tap, slide, click, flip

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 or a valid value for the css property "grid-template".
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
css#
 string "" CSS rules. See documentation.

Some style-related properties can be set or read from css using 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

Canvas-based widget have their computed width and height available as css variables (read-only):
- --widget-width
- --widget-height
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
numeric#
 boolean false Set to true to allow numeric values only and display a numeric keyboard on mobile devices
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)
property type default description
onValue#
 script "" Script executed when the widget's value updates. See documentation.

Canvas-based widget have their computed width and height available as local variables:
- locals.width
- locals.height
textarea#

Text area (multi line input). Tip: hit shift + enter for new lines.

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)
mode#
 string "open" File browser mode

Choices: open, save
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 or a valid value for the css property "grid-template".
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 to limit affected widgets by the type of the first touched widget

Choices: false, true, smart
property type default description
value#
 integer|
array		 "" If the panel contains tabs, its value defines which tab is selected selected (by index, starting with 0).

If the panel contains widgets and scroll is true, its value is an array that contains the scrolling state between 0 and 1 for the x and y axis.
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 or a valid value for the css property "grid-template".
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 to limit affected widgets by the type of the first touched widget

Choices: false, true, smart
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
fragment#

Embedded session or fragment file with overridable properties.

property type default description
file#
 string "" Fragment file path (relative to the session or theme file location by default, falling back to absolute path)
props#
 object {} Fragment 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 or a valid value for the css property "grid-template".
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 to limit affected widgets by the type of the first touched widget

Choices: false, true, smart
widgetType#
 string "button" Defines the type of the widgets in the matrix
quantity#
 number 4 Defines the number of widgets in the matrix
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{}, VAR{} and #{}) are resolved at the matrix' scope (ie @{this.variables} returns the matrix' variables property)

Advanced syntax blocks can be passed to children without being resolved at the matrix' scope by adding an underscore before the opening bracket.

Note: unless overridden, children inherit from the matrix' id and osc properties (id and address are appended with /$)
property type default description
value#
 integer|
array		 "" If the panel contains tabs, its value defines which tab is selected selected (by index, starting with 0).

If the panel contains widgets and scroll is true, its value is an array that contains the scrolling state between 0 and 1 for the x and y axis.
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 "" CSS rules. See documentation.

Some style-related properties can be set or read from css using 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

Canvas-based widget have their computed width and height available as css variables (read-only):
- --widget-width
- --widget-height
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 (example: {"label a": "value 1", "label b": "value 2"}). 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).
exclusive#
 boolean false If set to true, each input will be allowed to have only one connection at a time.
property type default description
onValue#
 script "" Script executed when the widget's value updates. See documentation.

Canvas-based widget have their computed width and height available as local variables:
- locals.width
- locals.height
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 or a valid value for the css property "grid-template".
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
hideMenu#
 boolean false Set to true to hide the main menu button.
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 to limit affected widgets by the type of the first touched widget

Choices: false, true, smart
property type default description
value#
 integer|
array		 "" If the panel contains tabs, its value defines which tab is selected selected (by index, starting with 0).

If the panel contains widgets and scroll is true, its value is an array that contains the scrolling state between 0 and 1 for the x and y axis.
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 or a valid value for the css property "grid-template".
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 to limit affected widgets by the type of the first touched widget

Choices: false, true, smart
property type default description
value#
 integer|
array		 "" If the panel contains tabs, its value defines which tab is selected selected (by index, starting with 0).

If the panel contains widgets and scroll is true, its value is an array that contains the scrolling state between 0 and 1 for the x and y axis.
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

Choices: cover, contain, auto
position#
 string "center" CSS background-position

Choices: center, left, right, top, bottom, left top, left bottom, right top, right bottom
repeat#
 string "no-repeat" CSS background-repeat

Choices: no-repeat, repeat, repeat-x, repeat-y, space, round
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 or theme file location by default, falling back to absolute path)
- Base64 encoded image : data:image/...

Graphs#

plot#

XY coordinates plot.

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

Some style-related properties can be set or read from css using 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

Canvas-based widget have their computed width and height available as css variables (read-only):
- --widget-width
- --widget-height
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
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
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: [y1, y2, ...]
- Array of [x, y] array values: [[x1 , y1], [x2, y2], ...]
- String array: "[y1, y2, ...]" or "[[x1 , y1], [x2, y2], ...]"
- String object to update specific coordinates only: "{0: y1, 1: y2}" or "{0: [x1, y1], 1: [x2, y2]}"
property type default description
onValue#
 script "" Script executed when the widget's value updates. See documentation.

Canvas-based widget have their computed width and height available as local variables:
- locals.width
- locals.height
eq#

Draws logarithmic frequency response from an array of filter objects.

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

Some style-related properties can be set or read from css using 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

Canvas-based widget have their computed width and height available as css variables (read-only):
- --widget-width
- --widget-height
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
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
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
property type default description
value#
 array|
string		 "" - Array of y values: [y1, y2, ...]
- Array of [x, y] array values: [[x1 , y1], [x2, y2], ...]
- String array: "[y1, y2, ...]" or "[[x1 , y1], [x2, y2], ...]"
- String object to update specific coordinates only: "{0: y1, 1: y2}" or "{0: [x1, y1], 1: [x2, y2]}"
property type default description
onValue#
 script "" Script executed when the widget's value updates. See documentation.

Canvas-based widget have their computed width and height available as local variables:
- locals.width
- locals.height
visualizer#

Display its value over time.

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

Some style-related properties can be set or read from css using 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

Canvas-based widget have their computed width and height available as css variables (read-only):
- --widget-width
- --widget-height
pips#
 boolean true Set to false to hide the scale
property type default description
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
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: [y1, y2, ...]
- Array of [x, y] array values: [[x1 , y1], [x2, y2], ...]
- String array: "[y1, y2, ...]" or "[[x1 , y1], [x2, y2], ...]"
- String object to update specific coordinates only: "{0: y1, 1: y2}" or "{0: [x1, y1], 1: [x2, y2]}"
property type default description
onValue#
 script "" Script executed when the widget's value updates. See documentation.

Canvas-based widget have their computed width and height available as local variables:
- locals.width
- locals.height

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|
string		 false Set to true to wrap long lines automatically. Set to soft to avoid breaking words.

Choices: false, true, soft
align#
 string "center" Text alignment.

Choices: center, left, right, top, bottom, left top, left bottom, right top, right bottom

Pads#

xy#

Two-dimensional slider.

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

Some style-related properties can be set or read from css using 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

Canvas-based widget have their computed width and height available as css variables (read-only):
- --widget-width
- --widget-height
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
property type default description
onValue#
 script "" Script executed when the widget's value updates. See documentation.

Canvas-based widget have their computed width and height available as local variables:
- locals.width
- locals.height
onTouch#
 script "" Script executed when the widget is touched and released. See documentation.
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.
property type default description
onTouch#
 script "" Script executed when the widget is touched and released. See documentation.
multixy#

Multi-point XY pad.

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

Some style-related properties can be set or read from css using 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

Canvas-based widget have their computed width and height available as css variables (read-only):
- --widget-width
- --widget-height
pointSize#
 integer 20 Defines the points' size
ephemeral#
 boolean false When set to true, the points will be drawn only while 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.
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
property type default description
onValue#
 script "" Script executed when the widget's value updates. See documentation.

Canvas-based widget have their computed width and height available as local variables:
- locals.width
- locals.height
onTouch#
 script "" Script executed when the widget is touched and released. See documentation.
canvas#

Multitouch canvas widget with user-defined drawing functions and touch reactions.

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

Some style-related properties can be set or read from css using 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

Canvas-based widget have their computed width and height available as css variables (read-only):
- --widget-width
- --widget-height
property type default description
valueLength#
 number 1 Defines the number of values accepted by the widget (minimum 1). Incoming messages that don't comply will be ignored

When calling set() from a script, submitted value should be an array only if valueLength is greater than 1.
autoClear#
 boolean true If set to false, the canvas context won't be cleared automatically and ctx.clear will need to be called in draw.
continuous#
 boolean|
number		 false If set to true, draw will be called at each frame, otherwise it will be called only when the widget is touched and when it receives a value.

Can be a number between 1 and 60 to specify the framerate (default: 30 fps).
property type default description
onValue#
 script "" Script executed whenever the widget's value updates. See documentation.
onTouch#
 script "" Script executed when the widget is touched and released, and when the pointer moves when the widget is touched. See documentation.
onDraw#
 script "" Script executed when the widget is redrawn. See documentation.
onResize#
 script "" Script executed when the widget is resized. See documentation.

Sliders#

fader#

Vertical / horizontal slider.

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

Some style-related properties can be set or read from css using 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

Canvas-based widget have their computed width and height available as css variables (read-only):
- --widget-width
- --widget-height
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'],
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:
- empty or 0: 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
property type default description
onValue#
 script "" Script executed when the widget's value updates. See documentation.

Canvas-based widget have their computed width and height available as local variables:
- locals.width
- locals.height
onTouch#
 script "" Script executed when the widget is touched and released. See documentation.
knob#

Rotative knob slider.

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

Some style-related properties can be set or read from css using 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

Canvas-based widget have their computed width and height available as css variables (read-only):
- --widget-width
- --widget-height
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:
- empty or 0: 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
property type default description
onValue#
 script "" Script executed when the widget's value updates. See documentation.

Canvas-based widget have their computed width and height available as local variables:
- locals.width
- locals.height
onTouch#
 script "" Script executed when the widget is touched and released. See documentation.
encoder#

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

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

Some style-related properties can be set or read from css using 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

Canvas-based widget have their computed width and height available as css variables (read-only):
- --widget-width
- --widget-height
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
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
property type default description
onValue#
 script "" Script executed when the widget's value updates. See documentation.

Canvas-based widget have their computed width and height available as local variables:
- locals.width
- locals.height

Additionnal variables:
- locals.speed: encoder's speed (reduce sensitivity to increase averaging)
- locals.angle: encoder's angle in degrees
onTouch#
 script "" Script executed when the widget is touched and released. See documentation.
range#

A fader with two heads for setting a range.

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

Some style-related properties can be set or read from css using 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

Canvas-based widget have their computed width and height available as css variables (read-only):
- --widget-width
- --widget-height
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'],
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:
- empty or 0: use values defined in range
- number: define a number of evenly spaced steps
- array: use arbitrary values
property type default description
onValue#
 script "" Script executed when the widget's value updates. See documentation.

Canvas-based widget have their computed width and height available as local variables:
- locals.width
- locals.height
onTouch#
 script "" Script executed when the widget is touched and released. See documentation.

Scripts#

script#

Scripting widget utility with keyboard bindings

property type default description
onKeyboard#
 script "" Script executed whenever the widget receives a keyboard event if keyBinding is set). See documentation.
keyBinding#
 string|
array		 "" Key combo string or array of strings (see KeyboardJS documentation).

If the editor is enabled, some keys / combos will not work.

To process all keystroke events, write ['']
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).