Thank you for using Tweakpane. This is the 4th release of the major version!

Summary

• Migrated to ES modules 📦
• More consistent APIs ✨ : Easier to understand functionalities
• Improved serialization structure 💾 : New importState() and exportState() can import/export more information
• Improved blades specificity 🔓 : Now you can access min and max of the slider, options of the list, etc. without any workarounds.
• Many other minor improvements and bug fixes 🩹

If you are currently using v3.x, migration guide can be useful for migration.

Breaking changes

• Migrated to ES modules (#209)
  • Use <script type="module"> to use the package
• Unified methods to add bindings (#486)
  • Use addBinding() to add input bindings (former addInput())
  • Use addBinding() with {readonly: true} to add monitor bindings (former addMonitor())
• Changed a event name for monitor bindings
  • Use change event for handling monitor updates instead of update
• Replaced a preset with a blade state
  • Use importState() and exportState() instead of importPreset() and exportPreset()
• Changed an option name for changing visual height of monitors
  • lineCount -> rows
• Changed a way to get a binding key in event handlers
  • Use TpChangeEvent.target.key instead of TpChangeEvent.key
• Renamed classes
  • ListApi -> ListBindingApi
  • SliderApi -> SliderBladeApi
  • TextApi -> TextBladeApi
• Renamed fields
  • SliderApi.maxValue -> SliderBladeApi.max
  • SliderApi.minValue -> SliderBladeApi.min

New features

• Improved blades specificity. (#455)
  • Now you can access min and max of the slider, options of the list, etc. without any workarounds.
• Importing/exporting all blades individually. (#509)
• All container blades have refresh() and can be refreshed individually. (#510)
• Added a shared config to point dimension params. (#417)
• Added support for a custom formatter to point-nD inputs. (#511)
• Added support for a custom key / pointer scale to number text inputs. (#471)

For plugin developers

Diff of `@tweakpane/plugin-template can be useful to know how to migrate your plugin to v4.

Breaking changes

• Added core field to all types of plugins for checking compatibility. Use createPlugin() to fill the core version.
• Added id field to the plugin bundle.
• Moved css field from the plugin to the plugin bundle.
• Changed the core style file for plugins
  • @import '../../node_modules/@tweakpane/core/lib/sass/plugin'; -> @use '../../node_modules/@tweakpane/core/lib/sass/tp';
• Added a namespace and a prefix tp to mixins, functions, and variables
  • .#{$prefix}-some -> .#{tp.$prefix}-some
    • @extend %input -> @extend %tp-input

New features

• Added a way to provide a custom API for binding controllers (#455)
  • InputBindingPlugin.api()
  • MonitorBindingPlugin.api()
• Added more stable way to access internal CSS variables
  • var(--in-bg) -> tp.cssVar('input-bg')
  • Refer _defs.scss to see the list of variables
• Added more stable way to access CSS modifiers
  • &.#{$prefix}-v-disabled -> &#{tp.$disabled}