Plugins

Tweakpane is enriched by a variety of first- and third-party component plugins.

To keep these close at hand and to ensure plugin compatibility with Tweakpane version 4, this library includes a number of popular plugins optimized for use in the Svelte Tweakpane UI style (while still allowing tree-shaking to keep the bundle size in check.)

They’re just components

🔗

Svelte Tweakpane UI takes a slightly different approach to plugins than the underlying vanilla JS Tweakpane API. Instead of explicitly npm installing, importing, and then registering plugins on a Pane object, Svelte Tweakpane UI manages plugin import and registration automatically the first time they’re used.

From the library user’s perspective, they’re regular components.

To keep bundle size down, it’s recommended to use per-component imports when you’re ready to go to production.

Many of the most popular Tweakpane plugins are already bundled with Svelte Tweakpane UI, and have been “wrapped” according to the conventions of the library. Plugins not currently bundled with the Svelte Tweakpane UI library will not work seamlessly unless they are explicitly wrapped.

Svelte Tweakpane UI’s approach to structuring a component library is a subtle inversion of the underlying vanilla Tweakpane design. For the most part, vanilla Tweakpane “picks” a component for you based on the type of the value you want to control (or the shape of an object you want to control, in more complex cases). It uses the value’s type information — in combination with its internal plugin system — to provide a slider, or a color picker, or a text field. The value type drives the control type.

You can still achieve this behavior in Svelte Tweakpane UI through components like <AutoObject> and <AutoValue>, but in most cases Svelte Tweakpane UI is designed to make the component choice explicit (e.g. not just an abstract <Binding>, but a concrete <Slider>), and enforce that the value bound to the control is of an appropriate type. The kind of control you’re getting is promised explicitly through its name, not implicitly through the type of value under its control.

If more specificity or variety is needed in future versions of Svelte Tweakpane UI, this would be expressed through additional components (or props on existing components) instead of through additional plugins, at least at the level of the user-facing API.

Example

🔗

Vanilla Tweakpane

🔗

Adding a component in vanilla Tweakpane involves grabbing the dependency:

npm install @tweakpane/plugin-essentials

Then importing, registering, and using the plugin:

import * as EssentialsPlugin from '@tweakpane/plugin-essentials';
import { Pane } from 'tweakpane';

const pane = new Pane();
pane.registerPlugin(EssentialsPlugin);

pane
  .addBlade({
    value: [0.5, 0, 0.5, 1],
    expanded: true,
    label: 'cubicbezier',
    picker: 'inline',
    view: 'cubicbezier'
  })
  .on('change', (event) => {
    console.log(event);
  });

Svelte Tweakpane UI

🔗

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

  let value: [number, number, number, number] = [0.5, 0, 0.5, 1];

  $: console.log(value);
</script>

<CubicBezier
  bind:value
  expanded={true}
  label="cubicbezier"
  picker="inline"
/>

The result should be the same:

Bundled plugins

🔗

The following plugins are included with Svelte Tweakpane UI, and are ready to use out of the box:

Plugin	Components	Optimized Fork
CameraKit	`<Ring>`, `<Wheel>`	GitHub
Essentials	`<ButtonGrid>`, `<RadioGrid>`, `<CubicBezier>`, `<FpsGraph>`, `<IntervalSlider>`	GitHub
File Import	`<File>`	GitHub
Image	`<Image>`	GitHub
Inputs	`<Stepper>`	GitHub
Profiler	`<Profiler>`	GitHub
Rotation	`<RotationQuaternion>`, `<RotationEuler>`	GitHub
Textarea	`<Textarea>`	GitHub
Waveform	`<WaveformMonitor>`	GitHub

*Tweakpane version 4 is a relatively recent release, and it introduced a number of breaking changes for plugin developers. I’ve ported the asterisked plugins above from Tweakpane 3 to Tweakpane 4, and and submitted PRs to the project owners. As soon as the PRs are merged, I will update the dependencies in Svelte Tweakpane UI to point to the source instead of my fork.

Optimized forks

🔗

Each of the included Tweakpane plugins has been forked to incorporate build process tweaks that dramatically reduce the final bundle size of projects using Svelte Tweakpane UI.

The forks will be kept in sync with the upstream version of the plugin, with minimal changes other than the build optimizations.

The optimization involves externalizing certain dependencies to prevent duplication and ensure that code can be shared effectively in the final build of a project.

Specifically, the Rollup configuration provided in the Tweakpane plugin template does not externalize @tweakpane/core as a production dependency. Instead, it’s embedded into the single-file plugin artifact, which is what’s published to NPM and imported by plugin consumers.

Externalizing this dependency allows build to share a single instance of the @tweakpane/core code across multiple plugins, which amounts to savings of about 75% (~780 K) in a SvelteKit project production build incorporating all available components.

For more on bundle size optimization, please see the section on importing components.

Candidates

🔗

If you’d like to see additional Tweakpane plugins either integrated with Svelte Tweakpane UI or added to the list of candidates below, please open an issue or a pull request:

tweakpane-plugin-thumbnail-list (forked from donmccurdy and ported to v4) v4
tweakpane-plugin-infodump v3
tweakpane-plugin-chromatic v3
tweakpane-table v3
tweakpane-plugin-search-list v3
midi-control v3
tweakpane-plugin-media v3
tweakpane-plugin-audio-player v3
tweakpane-plugin-grouplist v3
tweakpane-media v3
tweakpane-multiple-select-plugin v3

Note that some of the above plugins target Tweakpane v3, and will need to be updated to work with Tweakpane v4 before they can be integrated with Svelte Tweakpane UI.