Monitor

Wraps the Tweakpane monitor binding functionality for boolean, number, and string values.

Technically, any unbound value on a normal Svelte Tweakpane UI component effectively acts as a monitor, but additional monitor-specific components are provided to expose additional view options (e.g. rows).

<Monitor> is a dynamic component, and the availability of additional props will vary depending on the type of the defined value

Note that interval is not exposed on boolean and string monitors because updates are driven by reactive changes in the value.

However, interval is exposed on number monitors Note to allow independent control over the reactive value's update rate and the graph's update rate.

See also the <Waveform> component for a more advanced number visualization.

Usage outside of a <Pane> component will implicitly wrap the monitor in a <Pane position="inline"> component.

---

Example

Demo

Code

MonitorExample.svelte

<script lang="ts">
  import { Monitor } from 'svelte-tweakpane-ui'

  let booleanToMonitor = false
  let stringToMonitor = 'Reticulating'
  let numberToMonitor = 85

  setInterval(() => {
    numberToMonitor = Math.random() * 100
  }, 100)

  setInterval(() => {
    booleanToMonitor = !booleanToMonitor
    stringToMonitor = [...stringToMonitor].reverse().join('')
  }, 1000)
</script>

<Monitor value={numberToMonitor} graph={true} />
<Monitor value={booleanToMonitor} label="Boolean Monitor" />
<Monitor
  value={stringToMonitor}
  bufferSize={5}
  label="String Monitor"
  multiline={true}
/>

---

Props

Dynamic Props

This component has dynamic props, which means the available props can change depending on the value or type of other props.

Props contingent on certain conditions are annotated below with a dynamic flag, and include explanations of the “conditions” affecting the prop’s availability. More Info →

disabled optional
Description	Prevent interactivity and gray out the control.
Type	boolean
Default	false

label optional
Description	Text displayed next to control.
Type	string
Default	undefined

theme optional
Description	Custom color scheme.
Type	Theme
Default	undefined Inherits default Tweakpane theme equivalent to ThemeUtils.presets.standard, or the theme set with setGlobalDefaultTheme().

value bindablerequired
Description	The value to control. A string value to monitor. A number value to monitor. A boolean value to monitor.
Type	string | number | boolean

rows optional
Description	Number of visible rows of state history. If bufferSize is larger, then the value window will scroll once state history exceeds row count.
Type	number
Default	1 Or 3 if value is string and multiline is true.

bufferSize optional
Description	Number of past states to retain.
Type	number
Default	1 Or 64 if value is number and graph is true.

interval optional
Description	Time between value samples in milliseconds. Useful when graph is true. Defaults to reactive value updates only (interval={0}).
Type	number
Default	0

format optionaldynamic
Description	A function to customize the number's string representation (e.g. rounding, etc.).
Type	((value: number) => string)
Default	undefined Normal .toString() formatting.
Conditions	Available when value is of type number.

graph optionaldynamic
Description	Display a graph of the value's changes over time.
Type	boolean
Default	false
Conditions	Available when value is of type number.

max optionaldynamic
Description	Maximum bound when graph is true.
Type	number
Default	100
Conditions	Available when value is of type number.

min optionaldynamic
Description	Minimum bound when graph is true.
Type	number
Default	0
Conditions	Available when value is of type number.

multiline optionaldynamic
Description	Display multiline strings.
Type	boolean
Default	false
Conditions	Available when value is of type string.