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
colorText	string	"auto"	Text color. Set to "auto" to inherit from parent widget.
colorWidget	string	"auto"	Widget's default accent color. Set to "auto" to inherit from parent widget.
colorStroke	string	"auto"	Stroke color. Set to "auto" to use colorWidget.
colorFill	string	"auto"	Fill color. Set to "auto" to use colorWidget.
alphaStroke	number	"auto"	Stroke color opacity.
alphaFillOff	number	"auto"	Fill color opacity (off).
alphaFillOn	number	"auto"	Fill color opacity (on).
lineWidth	number	"auto"	Stroke width.
padding	number	"auto"	Inner spacing.
html	string	""	Custom html content to be inserted in the widget (before the widget's content). The code is automatically wrapped in <div class="html"></div> Allowed HTML tags:   h1-6, blockquote, p, a, ul, ol, nl, li,   b, i, strong, em, strike, code, hr, br, div,   table, thead, img, caption, tbody, tr, th, td, pre Allowed attributes:   <*>: class, style, title   <img>: src, width, height
css	string	""	CSS rules. See documentation. Available css variables: - --color-background: colorBg - --color-widget: colorWidget - --color-fill: colorFill - --color-stroke: colorStroke - --color-text: colorText - --widget-padding: padding - --line-width: lineWidth - --alpha-fill-on: alphaFillOn - --alpha-fill-off: alphaFillOff - --alpha-stroke: alphaStroke

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:portA", "ip:portB"] - If midi is enabled, targets can be midi:device_name - If no target is set, messages can still be sent if the server has default targets
ignoreDefaults	boolean	false	Set to true to ignore the server's default targets
bypass	boolean	false	Set to true to prevent the widget from sending any osc message

Basics

button

On / off button.

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 - --line-width: lineWidth - --alpha-fill-on: alphaFillOn - --alpha-fill-off: alphaFillOff - --alpha-stroke: alphaStroke - --color-text-on: colorTextOn
colorTextOn	string	"auto"	Defines the widget's text color when active.
label	string| boolean	"auto"	Set to false to hide completely - Insert icons using the prefix ^ followed by the icon's name : ^play, ^pause, etc (see https://fontawesome.com/icons?d=gallery&s=solid&m=free) - Icons can be transformed with the following suffixes: .flip-[horizontal|vertical|both], .rotate-[90|180|270], .spin, .pulse. Example: ^play.flip-horizontal
vertical	boolean	false	Set to true to display the text vertically
wrap	boolean	false	Set to true to wrap long lines automatically.

button

property	type	default	description
on	*	1	Set to null to send send no argument in the osc message
off	*	0	Set to null to send send no argument in the osc message. Must be different from on.
mode	string	"toggle"	Interraction mode: - toggle (classic on/off switch) - push (press & release) - tap (no release) Choices: toggle, push, tap
doubleTap	boolean	false	Set to true to make the button require a double tap to be pushed instead of a single tap

switch

Value selector button.

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 - --line-width: lineWidth - --alpha-fill-on: alphaFillOn - --alpha-fill-off: alphaFillOff - --alpha-stroke: alphaStroke - --color-text-on: colorTextOn
colorTextOn	string	"auto"	Defines the widget's text color when active.
layout	string	"vertical"	Defines how items should be laid out Choices: vertical, horizontal, grid
gridTemplate	string| number	""	If layout is grid, can be either a number of columns of a value css grid-template definition.

switch

property	type	default	description
values	array| object	{  "Value 1": 1,  "Value 2": 2 }	Array of possible values to switch between : [1,2,3] Object of "label":value pairs. Numeric labels must be prepended or appended with a white space (or any other non-numeric character) otherwise the order of the values won't be kept
mode	string	"tap"	Interraction mode: - tap: activates when the pointer is down but prevents further scrolling - slide: same as tap but allows sliding between values - click: activates upon click only and allows further scrolling Choices: tap, slide, click

dropdown

Native dropdown menu.

style

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

dropdown

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

menu

Drag and drop menu with a circular or grid layout.

geometry

property	type	default	description
size	number| array	200	- If layout is circular: diameter (in px) - Else: square size or [width, height] array

style

property	type	default	description
label	string| boolean	"auto"	Displayed text (defaults to current value). Keywords %key and %value will be replaced by the widget's selected key/value.
icon	boolean	"true"	Set to false to hide the dropdown icon
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.

menu

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

style

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)

input

property	type	default	description
asYouType	boolean	false	Set to true to make the input send its value at each keystroke
validation	string	""	Regular expression: if the submitted value doesn't match the regular expression, it will be reset to the last valid value. If leading and trailing slashes are omitted, they will be added automatically and the flag will be set to "gm" Examples: - ^[0-9]*$ accepts digits only, any number of them - /^[a-zs]{0,10}$/i accept between 0 and 10 alphabetic characters and spaces (case insensitive)

file

File/Folder selector (server-side).

style

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)

file

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.

style

property	type	default	description
colorBg	string	"auto"	Panel background color. Set to "auto" to inherit from parent widget.
layout	string	"default"	Defines how children are laid out. Choices: default, vertical, horizontal, grid
justify	string	"start"	If layout is vertical or horizontal, defines how widgets should be justified. Choices: start, end, center, space-around, space-between
gridTemplate	string| number	""	If layout is grid, can be either a number of columns of a value css grid-template definition.
contain	boolean	true	If layout is vertical or horizontal, prevents children from overflowing the panel.
scroll	boolean	true	Set to false to disable scrollbars
innerPadding	boolean	true	Set to false to make the padding property apply only between children and not at the container's inner boundaries.
verticalTabs	boolean	false	Set to true to display for vertical tab layout

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

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

modal

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

geometry

property	type	default	description
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
relative	boolean	false	Set to true to make the modal's position relative to the button's position.

style

property	type	default	description
colorBg	string	"auto"	Panel background color. Set to "auto" to inherit from parent widget.
layout	string	"default"	Defines how children are laid out. Choices: default, vertical, horizontal, grid
justify	string	"start"	If layout is vertical or horizontal, defines how widgets should be justified. Choices: start, end, center, space-around, space-between
gridTemplate	string| number	""	If layout is grid, can be either a number of columns of a value css grid-template definition.
contain	boolean	true	If layout is vertical or horizontal, prevents children from overflowing the panel.
scroll	boolean	true	Set to false to disable scrollbars
innerPadding	boolean	true	Set to false to make the padding property apply only between children and not at the container's inner boundaries.
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
popupLabel	string| boolean	"auto"	Alternative label for the modal popup
popupPadding	number	"auto"	Modal's inner spacing.

modal

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
doubleTap	boolean	false	Set to true to make the modal require a double tap to open instead of a single tap

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

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.

style

property	type	default	description
colorBg	string	"auto"	Panel background color. Set to "auto" to inherit from parent widget.
layout	string	"horizontal"	Defines how children are laid out. Choices: horizontal, vertical, grid
justify	string	"start"	If layout is vertical or horizontal, defines how widgets should be justified. Choices: start, end, center, space-around, space-between
gridTemplate	string| number	""	If layout is grid, can be either a number of columns of a value css grid-template definition.
contain	boolean	true	If layout is vertical or horizontal, prevents children from overflowing the panel.
scroll	boolean	true	Set to false to disable scrollbars
innerPadding	boolean	true	Set to false to make the padding property apply only between children and not at the container's inner boundaries.

matrix

property	type	default	description
variables	*	"@{parent.variables}"	Defines one or more arbitrary variables that can be inherited by children widgets
traversing	boolean	false	Set to true to enable traversing gestures in this widget. Set to smart or auto to limit affected widgets by the type of the first touched widget
widgetType	string	"button"	Defines the type of the widgets in the matrix
quantity	number	4	Defines the number of widgets in the matrix
start	integer	0	First widget's index
props	object	{}	Defines a set of property to override the widgets' defaults. JS{{}} and #{} blocks in this field are resolved with an extra variable representing each widget's index: $ (e.g. #{$}) Note: by default, the widgets inherit from the matrix' id and osc properties (id and address are appended with /$)

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

keyboard

Piano keyboard.

style

property	type	default	description
colorWhite	string	"auto"	White keys color.
colorBlack	string	"auto"	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
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.

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

style

property	type	default	description
colorBg	string	"auto"	Panel background color. Set to "auto" to inherit from parent widget.
layout	string	"default"	Defines how children are laid out. Choices: default, vertical, horizontal, grid
justify	string	"start"	If layout is vertical or horizontal, defines how widgets should be justified. Choices: start, end, center, space-around, space-between
gridTemplate	string| number	""	If layout is grid, can be either a number of columns of a value css grid-template definition.
contain	boolean	true	If layout is vertical or horizontal, prevents children from overflowing the panel.
scroll	boolean	true	Set to false to disable scrollbars
innerPadding	boolean	true	Set to false to make the padding property apply only between children and not at the container's inner boundaries.
verticalTabs	boolean	false	Set to true to display for vertical tab layout

root

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

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

tab

Tabbed panel widget

style

property	type	default	description
colorBg	string	"auto"	Panel background color. Set to "auto" to inherit from parent widget.
layout	string	"default"	Defines how children are laid out. Choices: default, vertical, horizontal, grid
justify	string	"start"	If layout is vertical or horizontal, defines how widgets should be justified. Choices: start, end, center, space-around, space-between
gridTemplate	string| number	""	If layout is grid, can be either a number of columns of a value css grid-template definition.
contain	boolean	true	If layout is vertical or horizontal, prevents children from overflowing the panel.
scroll	boolean	true	Set to false to disable scrollbars
innerPadding	boolean	true	Set to false to make the padding property apply only between children and not at the container's inner boundaries.
verticalTabs	boolean	false	Set to true to display for vertical tab layout
label	string| boolean	"auto"	Set to false to hide completely - Insert icons using the prefix ^ followed by the icon's name : ^play, ^pause, etc (see https://fontawesome.com/icons?d=gallery&s=solid&m=free) - Icons can be transformed with the following suffixes: .flip-[horizontal|vertical|both], .rotate-[90|180|270], .spin, .pulse. Example: ^play.flip-horizontal

tab

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

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

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)

html

Simple HTML parser.

image

Load a image (url or base64-encoded).

style

property	type	default	description
size	string	"cover"	CSS background-size
position	string	"center"	CSS background-position
repeat	string	"no-repeat"	CSS background-repeat

image

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

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.

style

property	type	default	description
dots	boolean	false	Draw dots on the line
bars	boolean	false	Set to true to use draw bars instead (disables logScaleX and forces x axis even spacing)
pips	boolean	true	Set to false to hide the scale

plot

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

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

eq

Draws logarithmic frequency response from an array of filter objects.

style

property	type	default	description
dots	boolean	false	Draw dots on the line
bars	boolean	false	Set to true to use draw bars instead (disables logScaleX and forces x axis even spacing)
pips	boolean	true	Set to false to hide the scale

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

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

visualizer

Display its value over time.

style

property	type	default	description
dots	boolean	false	Draw dots on the line
bars	boolean	false	Set to true to use draw bars instead (disables logScaleX and forces x axis even spacing)
pips	boolean	true	Set to false to hide the scale

visualizer

property	type	default	description
filters	array	""	Each item must be an object with the following properties - type: string ("highpass", "highshelf", "lowpass", "lowshelf", "peak", "bandpass" or "notch", default: "peak") - freq: number (filter's resonant frequency, default: 1000) - q: number (Q factor, default: 1) - gain: number (default: 0) - on: boolean (default: true) See https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode
pips	boolean	true	Set to false to hide the scale
rangeX	object	{  "min": 20,  "max": 22000 }	Defines the min and max values for the x axis (in Hz, logarithmic scale)
rangeY	object	{  "min": 0,  "max": 1 }	Defines the min and max values for the y axis
origin	number	"auto"	Defines the y axis origin. Set to false to disable it
duration	number	1	Defines visualization duration in seconds
framerate	number	30	Defines visualization framerate
logScaleY	boolean| number	false	Set to true to use logarithmic scale for the y axis (base 10). Set to a number to define the logarithm's base.
freeze	boolean	false	Set to true to freeze current view and ignore incoming values

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

Indicators

led

Intensity display.

style

property	type	default	description
borderRadius	string	""	Css border-radius property.

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.

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.

style

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

Pads

xy

Two-dimensional slider.

style

property	type	default	description
pointSize	integer	20	Defines the points' size
ephemeral	boolean	false	When set to true, the point will be drawn only while touched.
pips	boolean	true	Set to false to hide the scale

xy

property	type	default	description
snap	boolean	false	By default, the points are dragged from their initial position. If set to true, touching anywhere on the widget's surface will make them snap to the touching coordinates
spring	boolean	false	When set to true, the widget will go back to its default value when released
rangeX	object	{  "min": 0,  "max": 1 }	Defines the min and max values for the x axis
rangeY	object	{  "min": 0,  "max": 1 }	Defines the min and max values for the y axis
logScaleX	boolean| number	false	Set to true to use logarithmic scale for the x axis. Set to -1 for exponential scale.
logScaleY	boolean| number	false	Set to true to use logarithmic scale for the y axis. Set to -1 for exponential scale.
doubleTap	boolean| string	false	Set to true to make the fader reset to its default value when receiving a double tap. Can also be an osc address, which case the widget will just send an osc message: /<doubleTap> <preArgs>
sensitivity	number	1	Defines the pad's sensitivity when snap is false

rgb

Color picker with optional alpha slider.

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.

style

property	type	default	description
pointSize	integer	20	Defines the points' size
ephemeral	boolean	false	When set to true, the points will be drawn only chile touched.
pips	boolean	true	Set to false to hide the scale

multixy

property	type	default	description
points	integer| array	2	Defines the number of points on the pad Can be an array of strings that will be used as labels for the points (ex: ['A', 'B'])
snap	boolean	false	By default, the points are dragged from their initial position. If set to true, touching anywhere on the widget's surface will make them snap to the touching coordinates
spring	boolean	false	When set to true, the widget will go back to its default value when released
rangeX	object	{  "min": 0,  "max": 1 }	Defines the min and max values for the x axis
rangeY	object	{  "min": 0,  "max": 1 }	Defines the min and max values for the y axis
logScaleX	boolean| number	false	Set to true to use logarithmic scale for the x axis. Set to -1 for exponential scale.
logScaleY	boolean| number	false	Set to true to use logarithmic scale for the y axis. Set to -1 for exponential scale.
sensitivity	number	1	Defines the pad's sensitivity when snap is false

Sliders

fader

Vertical / horizontal slider.

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 - --line-width: lineWidth - --alpha-fill-on: alphaFillOn - --alpha-fill-off: alphaFillOff - --alpha-stroke: alphaStroke - --alpha-pips: alphaPips - --alpha-pips-text: alphaPipsText - --knob-size: knobSize
design	string	"default"	Design style Choices: default, round, compact
knobSize	number	"auto"	Fader knob size
horizontal	boolean	false	Set to true to display the fader horizontally
pips	boolean	false	Set to true to show range breakpoints (ignored if design is compact)
dashed	boolean| array	false	Set to true to display a dashed gauge. Can be set as an array of two numbers : [dash_size, gap_size]
gradient	array| object	[]	When set, the meter's gauge will be filled with a linear color gradient - each item must be a CSS color string. - as an object: each key must be a number between 0 and 1 - each item must be a CSS color string. Examples: ['blue', 'red'], {'0': 'blue', '0.9': 'blue', '1': 'red'}

fader

property	type	default	description
snap	boolean	false	By default, dragging the widget will modify it's value starting from its last value. Setting this to true will make it snap directly to the mouse/touch position
spring	boolean	false	When set to true, the widget will go back to its default value when released
doubleTap	boolean	false	Set to true to make the fader reset to its default value when receiving a double tap. Can also be an osc address, in which case the widget will just send an osc message (/<doubleTap> <preArgs>)
range	object	{  "min": 0,  "max": 1 }	Defines the breakpoints of the fader's scale: - keys can be percentages and/or min / max - values can be number or object if a custom label is needed Example: ({min:{"-inf": 0}, "50%": 0.25, max: {"+inf": 1}})
logScale	boolean| number	false	Set to true to use logarithmic scale. Set to -1 for exponential scale.
sensitivity	number	1	Defines the fader's sensitivity when snap is false
steps	string| number| array	""	Restricts the widget's value: - auto: use values defined in range - number: define a number of evenly spaced steps - array: use arbitrary values
origin	number	"auto"	Defines the starting point's value of the fader's gauge

knob

Rotative knob slider.

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 - --line-width: lineWidth - --alpha-fill-on: alphaFillOn - --alpha-fill-off: alphaFillOff - --alpha-stroke: alphaStroke - --alpha-pips: alphaPips - --alpha-pips-text: alphaPipsText
design	string	"default"	Design style Note: "solid" design uses "colorStroke" for the central knob color. Choices: default, solid, line
pips	boolean	false	Set to true to show the scale's breakpoints
dashed	boolean| array	false	Set to true to display a dashed gauge. Can be set as an array of two numbers : [dash_size, gap_size]
angle	number	270	Defines the angle's width of the knob, in degrees

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
doubleTap	boolean	false	Set to true to make the knob reset to its default value when receiving a double tap. Can also be an osc address, in which case the widget will just send an osc message (/<doubleTap> <preArgs>)
range	object	{  "min": 0,  "max": 1 }	Defines the breakpoints of the fader's scale: - keys can be percentages and/or min / max - values can be number or object if a custom label is needed Example: ({min:{"-inf": 0}, "50%": 0.25, max: {"+inf": 1}})
logScale	boolean| number	false	Set to true to use logarithmic scale. Set to -1 for exponential scale.
sensitivity	number	1	Defines the knob's sensitivity when mode is not snap
steps	string| number| array	""	Restricts the widget's value: - auto: use values defined in range - number: define a number of evenly spaced steps - array: use arbitrary values
origin	number	"auto"	Defines the starting point's value of the knob's gauge

encoder

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

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

encoder

property	type	default	description
mode	string	"circular"	- circular: relative move in circular motion - snap: snap to touch position and move in vertical motion - vertical: relative move in vertical motion Choices: circular, snap, vertical
spring	boolean	false	When set to true, the widget will go back to its default value when released
doubleTap	boolean	false	Set to true to make the fader reset to its default value when receiving a double tap. Can also be an osc address, in which case the widget will just send an osc message (/<doubleTap> <preArgs>)
range	object	{  "min": 0,  "max": 1 }	Defines the breakpoints of the fader's scale: - keys can be percentages and/or min / max - values can be number or object if a custom label is needed Example: ({min:{"-inf": 0}, "50%": 0.25, max: {"+inf": 1}})
logScale	boolean| number	false	Set to true to use logarithmic scale. Set to -1 for exponential scale.
sensitivity	number	1	When set between 0 and 1, reduces the encoder's verbosity
ticks	number	""	Defines the granularity / verbosity of the encoder (number of step for a 360° arc)
back	*	-1	Defines which value is sent when rotating the encoder anticlockwise
forth	*	1	Defines which value is sent when rotating the encoder clockwise
release	number	""	Defines which value is sent when releasing the encoder: - Set to null to send send no argument in the osc message - Can be an object if the type needs to be specified

range

A fader with two heads for setting a range.

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 - --line-width: lineWidth - --alpha-fill-on: alphaFillOn - --alpha-fill-off: alphaFillOff - --alpha-stroke: alphaStroke - --alpha-pips: alphaPips - --alpha-pips-text: alphaPipsText - --knob-size: knobSize
design	string	"default"	Design style Choices: default, round, compact
knobSize	number	"auto"	Fader knob size
horizontal	boolean	false	Set to true to display the fader horizontally
pips	boolean	false	Set to true to show range breakpoints (ignored if design is compact)
dashed	boolean| array	false	Set to true to display a dashed gauge. Can be set as an array of two numbers : [dash_size, gap_size]
gradient	array| object	[]	When set, the meter's gauge will be filled with a linear color gradient - each item must be a CSS color string. - as an object: each key must be a number between 0 and 1 - each item must be a CSS color string. Examples: ['blue', 'red'], {'0': 'blue', '0.9': 'blue', '1': 'red'}

range

property	type	default	description
snap	boolean	false	By default, dragging the widget will modify it's value starting from its last value. Setting this to true will make it snap directly to the mouse/touch position
spring	boolean	false	When set to true, the widget will go back to its default value when released
doubleTap	boolean	false	Set to true to make the fader reset to its default value when receiving a double tap. Can also be an osc address, in which case the widget will just send an osc message (/<doubleTap> <preArgs>)
range	object	{  "min": 0,  "max": 1 }	Defines the breakpoints of the fader's scale: - keys can be percentages and/or min / max - values can be number or object if a custom label is needed Example: ({min:{"-inf": 0}, "50%": 0.25, max: {"+inf": 1}})
logScale	boolean| number	false	Set to true to use logarithmic scale. Set to -1 for exponential scale.
sensitivity	number	1	Defines the fader's sensitivity when snap is false
steps	string| number| array	""	Restricts the widget's value: - auto: use values defined in range - number: define a number of evenly spaced steps - array: use arbitrary values
origin	number	"auto"	Defines the starting point's value of the fader's gauge

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