Skip to content
Svelte Tweakpane UI
Core Components

Binding

Wraps the Tweakpane addBinding method.

Important: This component is provided for consistency with Tweakpane's API, but is not recommended for general use in Svelte Tweakpane UI because more helpful abstractions are available.

Please consider convenience components like <Slider>, <Color>, etc. etc. before using this component directly.

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

Example

🔗

Demo

🔗
Value: 0

Code

🔗
BindingExample.svelte
<script lang="ts">
  import { Binding, type BindingObject } from 'svelte-tweakpane-ui';


  let object: BindingObject = { r: 0 };
</script>


<Binding bind:object key={'r'} label="Reticulation" />
<pre>Value: {object.r}</pre>

Props

🔗

object

🔗
bindablerequired
Description

The binding's target object with values to manipulate.

TypeBindable

key

🔗
required
Description

The key for the value in the target object that the control should manipulate.

Typestring

disabled

🔗
optional
Description

Prevent interactivity and gray out the control.

Typeboolean
Defaultfalse

label

🔗
optional
Description

Text displayed next to control.

Typestring
Defaultundefined

options

🔗
optional
Description

Tweakpane's internal options object.

See BindingParams.

Valid types are contingent on the type of the value key points to in object.

This is intended internal use, when implementing convenience components wrapping Binding's functionality. Options of interest are instead exposed as top-level props in Svelte Tweakpane UI.

TypeBindingParams
Defaultundefined

theme

🔗
optional
Description

Custom color scheme.

TypeTheme
Defaultundefined
Inherits default Tweakpane theme equivalent to ThemeUtils.presets.standard, or the theme set with setGlobalDefaultTheme().

ref

🔗
bindablereadonlyoptional
Description

Reference to internal Tweakpane BindingApi for this control.

This property is exposed for advanced use cases only, such as when implementing convenience components wrapping <Binding>'s functionality.

Direct manipulation of Tweakpane's internals can break Svelte Tweakpane UI abstractions.

TypeBindingRef

plugin

🔗
optional
Description

Imported Tweakpane TpPluginBundle (aliased as Plugin) module to automatically register in the <Binding>'s containing <Pane>.

This property is exposed for advanced use cases only, such as when implementing convenience components wrapping <Binding>'s functionality in combination with a Tweakpane plugin.

Direct manipulation of Tweakpane's internals can break Svelte Tweakpane UI abstractions.

TypeTpPluginBundle
Defaultundefined

Events

🔗

change

🔗
Description

Fires when the value of object[key] changes.

This event is provided for advanced use cases. It's usually preferred to bind to the object prop instead.

The event.details payload includes a copy of the value and an origin field to distinguish between user-interactive changes (internal) and changes resulting from programmatic manipulation of the object (external).

ExtendsValueChangeEvent
TypeBindingChangeEvent