Apache Superset [SIP-184] Proposal for migrating from react-dnd and react-sortable-hoc to dnd-kit

[SIP-184] Proposal for migrating from react-dnd and react-sortable-hoc to dnd-kit

Motivation

Superset currently uses react-dnd as the drag-and-drop library for dashboards, filters and some UI components. While react-dnd has served us well, migrating to dnd-kit can improve both UX and DX significantly.

With the React 18 upgrade underway, we also need to upgrade react-dnd to the new hooks based API which breaks existing components and functionality. Since we already need to update all usages, this feels like the best time to migrate to a modern library that fits our needs.

Bundle size: We already have @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities as peer dependencies of geostyler. Removing react-dnd, react-dnd-html5-backend, react-sortable-hoc from our dependency list will reduce our bundle size.
Maintenance: react-dnd has its last release in 2022 and react-sortable-hoc is not actively maintained.
Better fit for modern requirements: A modern toolkit like dnd-kit provides more utilities (collision detection, constraints, auto-scroll, etc.) that map well to what Superset needs out of the box.
Accessibility: dnd-kit provides built-in accessibility improvements and documentation to improve it even more: https://docs.dndkit.com/guides/accessibility

Proposed Change

Fully replace react-dnd and react-sortable with dnd-kit. Preferable branching off of React 18 upgrade branch to avoid having to upgrade react-dnd first.

New or Changed Public Interfaces

Dashboards: Dragging/resizing charts should continue to work seamlessly with saved dashboards. No changes to dashboard metadata format are expected.

Filters: Cross-filter drag-and-drop should remain unchanged from a user perspective.

Developer interfaces: Developers extending dashboards may need to adapt if they directly relied on react-dnd internals (unlikely but possible).

End users should not experience breaking changes if migration is successful.

New Dependencies

@dnd-kit/core, @dnd-kit/sortable, @dnd-kit/modifiers, @dnd-kit/utilities - all actively maintained under MIT License.

Migration Plan and Compatibility

React 18 Upgrade (Core Migration already underway)

Upgrade Superset frontend to React 18 and confirm that react-dnd is not upgraded (skipped) since we will remove it.

Refactor all Drag-and-Drop functionality to use dnd-kit: - Dashboards: Replace all react-dnd usage with @dnd-kit/core and @dnd-kit/sortable. Validate layout persistence, chart rearrangement, and resizing. - Refactor filters: Migrate drag-and-drop interactions to dnd-kit. - Run tests and visual regression checks to confirm feature parity.

Stabilization
Fix edge cases (nested layouts, cross-container drag).
Ensure accessibility testing with keyboard and screen readers.
Removal of Legacy Dependencies
Once validated, remove react-dnd, react-sortable-hoc and react-dnd-html5-backend entirely.

Rejected Alternatives

Stay on react-dnd
Pros: Minimal code churn in the short term (no need to re-learn a new API immediately).
Cons: react-dnd is increasingly outdated compared to dnd-kit, with less active development.
- react-dnd has slower adoption of modern React patterns (e.g., concurrent rendering in React 18).
- Community momentum has shifted toward dnd-kit, meaning long-term maintenance risk if react-dnd stagnates.
- Upgrading to React 18 first and later migrating to dnd-kit would result in two breaking migrations instead of one.
Wait for a future Superset refactor to adopt dnd-kit
Pros: Spreads out work and reduces scope of the current React 18 upgrade.
Cons: Defers inevitable migration and makes future migration harder:
- More Superset components will depend on react-dnd over time, increasing migration cost later.
- Future users and contributors may build new features around react-dnd, adding tech debt that must later be reworked.
- Missing the opportunity to align with the React 18 upgrade means Superset may require multiple disruptive migrations.
Use a custom in-house drag-and-drop abstraction
Pros: Maximum control over APIs and interaction patterns.
Cons: Requires continuous maintenance and Superset's contributors lose the benefit of a robust open-source community.
- Both react-dnd and dnd-kit are well-tested; building a new solution would add unnecessary risk.
- Would not provide significant advantages beyond what dnd-kit already offers.
Adopt react-beautiful-dnd
Pros: Very popular, user-friendly API, good documentation, strong adoption in the React ecosystem.
Cons: Project is in maintenance mode (no active development since Atlassian stopped maintaining it).
- No official support for React 18 concurrent rendering.
- Known performance limitations with large lists compared to dnd-kit.
- Using this would trade one aging library (react-dnd) for another.
Adopt @hello-pangea/dnd (community fork of react-beautiful-dnd)
Pros: Actively maintained fork of react-beautiful-dnd, with bug fixes and React 18 support.
Cons: Still tied to the original design decisions and performance constraints of react-beautiful-dnd.
- Focused primarily on list reordering use cases, while Superset requires more flexible drag-and-drop interactions (layout building, dashboards, etc.).
- Community smaller than dnd-kit.
Adopt @atlaskit/pragmatic-drag-and-drop
Pros:
- Official successor to react-beautiful-dnd, created and maintained by Atlassian.
- Actively developed with modern React and TypeScript support.
- Lightweight, composable primitives instead of opinionated abstractions, giving more flexibility than react-beautiful-dnd.
- Good fit for React 18's rendering model.
Cons:
- Still relatively new, with a smaller ecosystem and fewer real-world production examples compared to dnd-kit.
- Documentation and community adoption are not yet as mature as dnd-kit. One-way mirror to their internal repo and doesn't accept open source contributions.
- Designed with Atlassian's use cases in mind, which may not fully align with Superset's complex dashboard interactions.
- Migration effort similar to dnd-kit, so it offers no clear advantage for Superset over the more widely adopted dnd-kit.