Properties reference

Common#

Generic properties#

Properties shared by all widgets

widget

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.

geometry

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.

style

property	type	default	description
colorBg#	`string`	`"auto"`	Panel background color. Set to "auto" to inherit from parent widget.
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).
padding#	`number`	`"auto"`	Inner spacing.
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` - `--alpha-fill-on`: `alphaFillOn` - `--alpha-fill-off`: `alphaFillOff` - `--alpha-stroke`: `alphaStroke`

value

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.

osc

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:port"]` - 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.

style

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` - `--alpha-fill-on`: `alphaFillOn` - `--alpha-fill-off`: `alphaFillOff` - `--alpha-stroke`: `alphaStroke` - `--color-text-on`: `colorTextOn`

button

property	type	default	description
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`
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
colorTextOn#	`string`	`"auto"`	Defines the widget's text color when active.

switch#

Value selector button.

style

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` - `--alpha-fill-on`: `alphaFillOn` - `--alpha-fill-off`: `alphaFillOff` - `--alpha-stroke`: `alphaStroke` - `--color-text-on`: `colorTextOn`

switch

property	type	default	description
layout#	`string`	`"vertical"`	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.
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`
colorTextOn#	`string`	`"auto"`	Defines the widget's text color when active.

Native dropdown menu.

dropdown

property	type	default	description
align#	`string`	`"center"`	Set to `left` or `right` to change text alignment (otherwise center) Choices: `center`, `left`, `right`
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

Drag and drop menu with a circular or grid layout.

menu

property	type	default	description
size#	`number`\| `array`	`200`	- If `layout` is `circular`: diameter (in px) - Else: square size or `[width, height]` array
textAlign#	`string`	`"center"`	Set to `left` or `right` to change text alignment (otherwise center) Choices: `center`, `left`, `right`
menuAlignV#	`string`	`"center"`	Set to `top` or `bottom` to change menu alignment (otherwise center) Choices: `center`, `top`, `bottom`
menuAlignH#	`string`	`"center"`	Set to `left` or `right` to change menu alignment (otherwise center) Choices: `center`, `left`, `right`
layout#	`string`	`"circular"`	Defines whether the menu's layout should be rendered in a circle or in a box Choices: `circular`, `horizontal`, `vertical`, `grid`
gridTemplate#	`string`\| `number`	`""`	If `layout` is `grid`, can be either a number of columns of a value css grid-template definition.
toggle#	`boolean`	`false`	Set to `true` to make the menu stay opened after mouse/touch release
doubleTap#	`boolean`	`false`	Set to `true` to make the menu require a double tap to be opened instead of a single tap
values#	`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
weights#	`array`	`""`	`Array` of `number` defining the weights of each value in `values` Ignored when `mode` is `grid`

input#

Text input.

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)
asYouType#	`boolean`	`false`	Set to `true` to make the input send its value at each keystroke

file#

File/Folder selector (server-side).

input

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

Containers#

panel#

Widgets or Tabs container.

panel

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

widget container

property	type	default	description
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.
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.

tab container

property	type	default	description
verticalTabs#	`boolean`	`false`	Set to `true` to display for vertical tab layout

value

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

children

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.

modal

property	type	default	description
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`
doubleTap#	`boolean`	`false`	Set to `true` to make the modal require a double tap to open instead of a single tap
variables#	`*`	`"@{parent.variables}"`	Defines one or more arbitrary variables that can be inherited by children widgets

popup

property	type	default	description
popupLabel#	`string`\| `boolean`	`"auto"`	Alternative label for the modal popup
popupWidth#	`number`\| `percentage`	`"80%"`	Modal popup's size
popupHeight#	`number`\| `percentage`	`"80%"`	Modal popup's size
popupLeft#	`number`\| `percentage`	`"auto"`	Modal popup's position
popupTop#	`number`\| `percentage`	`"auto"`	Modal popup's position
layout#	`string`	`"default"`	Defines how children are laid out. Choices: `default`, `vertical`, `horizontal`, `grid`
gridTemplate#	`string`\| `number`	`""`	If `layout` is `grid`, can be either a number of columns of a value css grid-template definition.
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
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.

value

property	type	default	description
value#	`integer`	`""`	Defines the modal's state:`0` for closed, `1` for opened

children

property	type	default	description
widgets#	`array`	`[]`	Each element of the array must be a widget object

clone#

Widget replication with overridable properties.

clone

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.

matrix

property	type	default	description
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. Formulas in this field are resolved with an extra variable representing each widget's index: `$` Note: by default, the widgets inherit from the matrix' `id` and osc properties (`id` and `address` are appended with `/$`)

layout

property	type	default	description
layout#	`string`	`"horizontal"`	Defines how children are laid out. Choices: `horizontal`, `vertical`, `grid`
gridTemplate#	`string`\| `number`	`""`	If `layout` is `grid`, can be either a number of columns of a value css grid-template definition.
traversing#	`boolean`	`true`	Set to `false` to disable traversing gestures
innerPadding#	`boolean`	`true`	Set to `false` to make the `padding` property apply only between children and not at the container's inner boundaries.

keyboard#

Piano keyboard.

style

property	type	default	description
css#	`string`	`""`	Available CSS variables: - `--color-white:color;` (white keys color) - `--color-black:color;` (black keys color)

keyboard

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 Can be an `object` if the type needs to be specified (see preArgs)
off#	`*`	`0`	Set to `null` to send send no argument in the osc message Can be an `object` if the type needs to be specified (see preArgs)
toggles#	`boolean`	`false`	Set to `true` to make keys bahave like toggle buttons

patchbay#

Connect inputs to outputs.

style

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

patchbay

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

panel

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

widget container

property	type	default	description
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.
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.

tab container

property	type	default	description
verticalTabs#	`boolean`	`false`	Set to `true` to display for vertical tab layout

value

property	type	default	description
value#	`integer`	`""`	Defines currently widgeted tab in the widget A tab can be opened only by setting its parent's value

children

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

panel

property	type	default	description
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`
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

widget container

property	type	default	description
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.
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.

tab container

property	type	default	description
verticalTabs#	`boolean`	`false`	Set to `true` to display for vertical tab layout

value

property	type	default	description
value#	`integer`	`""`	Defines currently widgeted tab in the widget A tab can be opened only by setting its parent's value

children

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).

value

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

svg#

Svg parser.

svg

property	type	default	description
svg#	`string`	`""`	Svg xml definition: - will be wrapped in a `< svg />` element - `<path>` commands support a special percent notation (`%x` and `%y`)

html#

Simple HTML parser.

html

property	type	default	description
html#	`string`	`""`	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 : src, width, height

image#

Load a image (url or base64-encoded).

image

property	type	default	description
size#	`string`	`"cover"`	CSS background-size
position#	`string`	`"center"`	CSS background-position
repeat#	`string`	`"no-repeat"`	CSS background-repeat
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

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.

plot

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
logScaleX#	`boolean`\| `number`	`false`	Set to `true` to use logarithmic scale for the x axis (base 10). Set to a `number` to define the logarithm's base.
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.
origin#	`number`	`"auto"`	Defines the y axis origin. Set to `false` to disable it.
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

value

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 1^st and 5^th points' coordinates

eq#

Draws logarithmic frequency response from an array of filter objects.

eq

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

visualizer#

Display its value over time.

visualizer

property	type	default	description
duration#	`number`	`1`	Defines visualization duration in seconds
framerate#	`number`	`30`	Defines visualization framerate
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
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.
pips#	`boolean`	`true`	Set to `false` to hide the scale
freeze#	`boolean`	`false`	Set to `true` to freeze current view and ignore incoming values

Indicators#

led#

Intensity display.

led

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.
borderRadius#	`string`	`""`	Css border-radius property.

value

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.

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. This will not break overflowing words by default, word-breaking can be enabled by adding `word-break: break-all;` to the `css` property
align#	`string`	`"center"`	Css text-align property. Choices: `center`, `left`, `right`

Pads#

xy#

Two-dimensional slider.

xy

property	type	default	description
pointSize#	`integer`	`20`	Defines the points' size
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
pips#	`boolean`	`true`	Set to `false` to hide the scale
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`

osc

property	type	default	description
touchAddress#	`string`	`""`	OSC address for touched state messages: `/touchAddress [preArgs] 0/1`)

rgb#

Color picker with optional alpha slider.

rgb

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.

multi xy

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']`)

xy

property	type	default	description
pointSize#	`integer`	`20`	Defines the points' size
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
pips#	`boolean`	`true`	Set to `false` to hide the scale
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`

osc

property	type	default	description
touchAddress#	`string`	`""`	OSC address for touched state messages: `/touchAddress [preArgs] 0/1`

Sliders#

fader#

Vertical / horizontal slider.

style

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` - `--alpha-fill-on`: `alphaFillOn` - `--alpha-fill-off`: `alphaFillOff` - `--alpha-stroke`: `alphaStroke` - `--alpha-pips`: `alphaPips` - `--alpha-pips-text`: `alphaPipsText`

fader

property	type	default	description
design#	`string`	`"default"`	Design style Choices: `default`, `round`, `compact`
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'}
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

osc

property	type	default	description
touchAddress#	`string`	`""`	OSC address for touched state messages: `/touchAddress [preArgs] 0/1`

knob#

Rotative knob slider.

style

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` - `--alpha-fill-on`: `alphaFillOn` - `--alpha-fill-off`: `alphaFillOff` - `--alpha-stroke`: `alphaStroke` - `--alpha-pips`: `alphaPips` - `--alpha-pips-text`: `alphaPipsText`

knob

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
pips#	`boolean`	`false`	Set to `true` to show the scale's breakpoints
dashed#	`boolean`	`false`	Set to `true` to display a dashed gauge
angle#	`number`	`270`	Defines the angle's width of the knob, in degrees
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

osc

property	type	default	description
touchAddress#	`string`	`""`	OSC address for touched state messages: `/touchAddress [preArgs] 0/1`

encoder#

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

encoder

property	type	default	description
ticks#	`number`	`360`	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
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>`)

osc

property	type	default	description
touchAddress#	`string`	`""`	OSC address for touched state messages: `/touchAddress [preArgs] 0/1`

range#

A fader with two heads for setting a range.

style

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` - `--alpha-fill-on`: `alphaFillOn` - `--alpha-fill-off`: `alphaFillOff` - `--alpha-stroke`: `alphaStroke` - `--alpha-pips`: `alphaPips` - `--alpha-pips-text`: `alphaPipsText`

fader

property	type	default	description
design#	`string`	`"default"`	Design style Choices: `default`, `round`, `compact`
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'}
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

osc

property	type	default	description
touchAddress#	`string`	`""`	OSC address for touched state messages: `/touchAddress [preArgs] 0/1`

Scripts#

script#

Evaluates a script each time it receives a value.

script

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.

event: keyboard

property	type	default	description
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).

Properties reference

Common#

type#

id#

visible#

interaction#

left#

top#

width#

height#

expand#

colorBg#

colorText#

colorWidget#

colorStroke#

colorFill#

alphaStroke#

alphaFillOff#

alphaFillOn#

padding#

css#

value#

default#

linkId#

script#

address#

preArgs#

typeTags#

decimals#

target#

ignoreDefaults#

bypass#

Basics#

css#

label#

on#

off#

mode#

doubleTap#

colorTextOn#

css#

layout#

gridTemplate#

values#

mode#

colorTextOn#

align#

values#

size#

textAlign#

menuAlignV#

menuAlignH#

layout#

gridTemplate#

toggle#

doubleTap#

values#

weights#

align#

unit#

asYouType#

align#

directory#

extension#

hidePath#

allowDir#

Containers#

variables#

traversing#

layout#

justify#

gridTemplate#

scroll#

innerPadding#

verticalTabs#

value#

widgets#

tabs#

label#

doubleTap#