AutoObject

Rapid-development component which automatically creates a set of Tweakpane controls for an arbitrary object.

Object keys will be used as labels, and a (reasonably) appropriate Tweakpane control will be used for each value's type.

Values are generally mapped to controls according to the logic outlined in the Tweakpane input binding documentation.

This component is intended for quick tests where you want "best guess" non-customizable controls for an entire object, without considering the ideal component for each value.

See <AutoValue> for a variation that works directly on a stand-alone value that isn't wrapped in an object.

Records within the object will wrap their contents in a <Folder> component. Value objects in the shape of color or point objects will show a more specialized control.

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

<AutoObject> was inspired by the <TWPAutoMutable> component in Dmitriy Nikiforov's solid-tweakpane library.

Plugin component behavior is not available in <AutoObject>.

---

Example

Demo

{
  "someBoolean": true,
  "someColor": {
    "r": 255,
    "g": 0,
    "b": 55
  },
  "someFolder": {
    "b": 2,
    "a": 1,
    "c": 3
  },
  "someNumber": 1,
  "somePoint": {
    "x": 1,
    "y": 2
  },
  "someString": "test"
}

Code

AutoObjectExample.svelte

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

  let object = {
    // Creates a <Checkbox>
    someBoolean: true,
    // Creates a <Color> picker
    someColor: {
      r: 255,
      g: 0,

      b: 55,
    },
    // Wraps children in a <Folder>
    someFolder: {
      b: 2,
      a: 1,
      c: 3,
    },
    // Creates a <Slider>
    someNumber: 1,
    // creates a <Point>
    somePoint: {
      x: 1,
      y: 2,
    },
    // Creates a <Text>
    someString: 'test',
  }
</script>

<AutoObject bind:object />

<pre>{JSON.stringify(object, null, 2)}</pre>

---

Props

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

prettyLabels optional
Description	Transforms keys into more pleasant control labels (e.g. capitalization and spaces in lieu of camelCase, kebab-case, etc.)
Type	boolean
Default	true

object bindablerequired
Description	Object to create an automatic set of Tweakpane controls for. Keys will be used as labels, and a (reasonably) appropriate Tweakpane control will be used for each value's type.
Type	Bindable

---

Events

change
Description	Fires when a value in the object 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).
Extends	ValueChangeEvent
Type	AutoObjectChangeEvent