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

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)

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

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

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}