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

{
  "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"
}

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