future of library & maintenance

[dontsave]

Hi there. I think dnd-kit is one of the best architected, most composable react dnd open source libraries around. However there are, as with all libraries, a good chunk of issues to contend with. I'm wondering if there are plans for the future of the library and its maintenance. It seems that after an initial burst of activity, releases have died down and pull requests and bug reports have gone unaddressed. Any insight into future plans/ maintenance/ roadmap etc would be very welcome

[Venryx]

@clauderic Any input on this? I'm also of the opinion that this is one of the best architected drag-and-drop libraries, and it'd be nice if some of the improvements in the open pull-requests could get reviewed/integrated.

Perhaps you could make a comment asking if anyone wants to join as a maintainer of the library, while you're busy on other projects?

[clauderic]

Hey folks, thanks for inquiring about the state of the project. I want to reassure everyone that I'm still actively working on this library. The reason why a lot of issues have gone unaddressed for a while is that I have been working on a significant refactor of @dnd-kit since earlier this year.

Some of the key things I want to achieve with this refactor are:

• Framework agnostic (adapt @dnd-kit to work with vanilla js, react, solidjs, vue, etc.) by building an agnostic layer that can be extended by concrete implementations, such as a DOM layer.
• Keep most of the same core concepts, such as sensors, collision detection algorithms, and modifiers, but make the library easier to learn and adopt.
• Making the core library extensible via a plugin system.
• More granularity: Each draggable can have its own sensors and modifiers, and each droppable can have its own collision detection algorithm.
• Reliability with unpredictable layouts
• Performance improvements (reducing unnecessary re-renders being very high on the list, re-rendering ALL draggable items on drag start and such #1071, Sortable functionality causes every item to be re-rendered during dragging #994, Major performance issues with the sortable tree example #898 Extremely poor non-virtualized sortable performance #943)
• Better type safety
• Leverage newer APIs like the top layer and View Transitions for browsers that support them.

Following progress

I am actively working on this refactor, and hope to have it released in the next couple of months, but there is still much work to be done and I'm not in a position to commit to a specific launch date at the moment.

If you are curious and want to follow progress, I am working on the experimental branch in this repository.

You can also take a look at the storybook which provides an overview of the use cases currently supported by the refactor, as well as some initial documentation for the APIs introduced in this refactor:

https://experimental--5fc05e08a4a65d0021ae0bf2.chromatic.com/

Keep in mind this is still in an experimental stage, so bugs are to be expected.

How can you help?

I am hoping to launch the refactor with React and Vanilla as the main two targets, and lots of APIs are still in flux, so it's a bit early to involve others in this refactor.

Having said that, if you would like to get involved, I will be looking for developers who have experience working in other frameworks such as Vue, SolidJS, Svelte, etc. to adapt @dnd-kit to work with those frameworks and maintain those compatibility layers. Since the library now exposes a @dnd-kit/dom package, adding support for other frameworks is mostly a matter of connecting the DOM layer to the framework, so the amount of effort should be relatively low.

[adrianmxb]

Looks and sounds promising! 🎉
Once you are comfortable with outside contributions let us know in this ticket, I'd imagine there are more people willing to contribute. :)

[BoilingSoup]

Looking forward to the new refactored dnd-kit. This is an awesome library

[hussam-i-am]

@clauderic Excited to see this update! I'd be interested in contributing and being an early adopter, though we are mainly focused on a React solution if we can help in that area, with maybe a few vanilla use cases.

In the interim, if there are issues that we may need to resolve that need a change to the source code while the refactor is happening, would you recommend forking and opening PRs to backport when the time is right?

[clauderic]

Hey @hussam-i-am, I will definitely be looking for contributors to help maintain the vanilla and React layers as well.

If there are any PRs that you think would be beneficial in the interim feel free to open them and ping me for review on them. I can't promise they will be ported over to the re-write but I am trying my best to keep feature parity (though not API parity).

[hussam-i-am]

Great, thanks @clauderic! As for the upcoming refactor, do you see it is an upgrade with breaking changes, or more like a new library requiring a rework of any existing usage?

[clauderic]

Good question! I would say it depends on how much custom functionality consumers have built.

The current core library is coupled with the React implementation. With the new approach, there will be new packages you have to install depending on the target environment, so if you were previously using @dnd-kit/core or @dnd-kit/sortable, you would have to now use @dnd-kit/react and @dnd-kit/react/sortable.

For most consumers, if you have not deviated too far from what is provided out of the box (for example, using built in sensors and collision detection algorithms), while there will be breaking changes, the migration steps should be relatively straightforward to follow, and the APIs should feel very familiar (useDraggable, useSortable, <DndContext>, etc.)

For consumers that have built custom collision detection algorithms or custom sensors, there will be more work required to adapt them to the new APIs.

If you are using any experimental or undocumented APIs, it's more likely that these will change or no longer be supported.

[saravanan10393]

Really a awesome library we are using it in live since a year. awaiting for more granular control on draggable n dropable feature to replace the react dnd with dndkit in our codebase.

[hussam-i-am]

We are also looking to further improve the accessibility experience for drag and drop, I know @dnd-kit/accessibility is already its own module, but curious if the plan is to pull it out of core or also make it more configurable, as it also has some undocumented API that we are using, for example, to pull the aria-live element out of the list elements.

[logaretm]

I have been on the lookout for a good DnD lib with little luck in the Vue.js ecosystem. I would love to see this adopted for Vue.js with the new refactor. I will be happy to contribute to a @dnd-kit/vue version in the upcoming weeks or provide help in any way I can.

[Syed-Sheharyar]

Waiting for the refactored version to come out. Might be a prerelease or beta release.

[Xhale1]

@clauderic I'm a maintainer of the popular react-beautiful-dnd fork @hello-pangea/dnd and I've been investigating your library recently. I love the concept of custom sensors, collision strategies, etc and support for grids is awesome. The only drawback I've run into has been performance which has me really excited about this update.

If you'd like any help with the new version you're working on I'd be happy to lend a hand 😁

Perhaps you, myself, and my co-maintainer could collaborate on something together...

[krustad]

Hi @clauderic - is there any target date on the refactor?

[684efs3]

The docs in the experimental version is a great improvement over the past. Thank you for your hard work! Can we start using the experimental branch?

[Emiliano-Bucci]

@clauderic Hi! Amazing stuff! Can we eventually start using the experimental branch? From the storybook examples seems very promising!

[eephrati]

Hi @clauderic, thank you for writing this library. It's very impressive! Sadly, I am also on the boat of the performance issue once reaching a certain amount of items. No matter how much I memoize, I am still left with significant lag, which is a major blocker.

I am particularly interested in the performance enhancement that AlissaVrk wrote: #1096

Any idea when the performance and multiselect will be merged? That would really help us plan for our release. Thank you.

[tomasmenezes]

I'm still unable to get the experimental branch examples working on any local test project. While the API appears to have been significantly improved, it seems that the performance considerations have yet to be addressed, based solely on the storybook examples - eagerly waiting for an update on this! @clauderic

[alissaVrk]

@eephrati @tomasmenezes I've tested the new branch, the state management was rewritten, and the particular issue my branch addressed does not reproduce there.

( in storybook, to see the improvement in the sortable examples, you need to memoize the items. they are re-rendered because the parent items array is changing)

I really hope that this rewrite will see the light of day soon
good luck :)

[tomasmenezes]

@alissaVrk turns out my storybook-based performance concerns were caused by an external mac mouse extension. The performance seems to have improved significantly!

[andelkocvjetkovic]

@clauderic any update ?

[TrustyTechSG]

@clauderic Thank you so very much for the great library, looking forward for the updates.

[anishmiviewis]

@clauderic Thanks a ton for the awesome library, we are really looking forward for the updates as we heavily rely on this library for our use case

[medihack]

If maintenance of dnd-kit will be stopped (I really don't hope so as I really like it, too), there is also a new kid in town ... Pragmatic Drag & Drop, which is the spiritual successor of react-beautiful-dnd (same company behind it). Just to provide an alternative, especially for those with performance problems.

[valtism]

Pragmatic DnD is very much focused on using the platform, and the user-experience is tied to that (mobile is finicky). dnd-kit is an abstraction that doesn't use the platform for better experience, but less interoperability with things outside the browser window (other windows or the OS).

Just some notes on the difference between the two libraries. They are both good but have pretty different goals.

[shridharrai]

@clauderic I have been using this library for the past year and a half, and it has been incredibly useful, offering many features out of the box. However, I am experiencing significant performance issues related to unnecessary re-renders (#1071). As we are about to release our product, these issues have become critical.
During load testing, the drag and drop functionality becomes very slow with more than 200 elements due to the re-rendering of all items. Our flows contain over 500 draggable items. I have tried memoization techniques and other workarounds, but there has been no significant improvement in performance.
Please prioritize resolving this issue as soon as possible, as we urgently need a solution to proceed with our release.

[shridharrai]

@alissaVrk Can you please confirm if we can use the experimental branch until it is merged into the main branch? Our release date is approaching, and we need to implement some workarounds to avoid delays. Are there any potential issues we might face by using the experimental branch?

[TimFL]

Has anyone tried using this with React 19 & React Compiler to check if the performance improves?

[dbrxnds]

@TimFL I tried it with React 19 but couldn't even get it to work. Uncertain if that is due to our setup or the package itself.

[Arkellys]

@TimFL I tried it with React 19 but couldn't even get it to work. Uncertain if that is due to our setup or the package itself.

I tried with React 19 and mine works fine with no error. So maybe something wrong with your setup. Haven't tried the compiler yet.

[alissaVrk]

@shridharrai sorry it took me time, not sure what you're asking. which experimental branch?

[shridharrai]

@alissaVrk I am referring to the experimental branch of the dnd-kit repo, which @clauderic mentioned is being worked on to improve performance. Can you please confirm if we can use this experimental branch until the improvements are merged into the main branch? Our release date is approaching, and we need to implement some workarounds to avoid delays. Are there any potential issues we might face by using the experimental branch?
https://github.com/clauderic/dnd-kit/tree/experimental

[alissaVrk]

@shridharrai I'm sorry, but I really don't know. I haven't written the code in the branch or used it for more than to verify that the performance issues don't reproduce there.

I assume that there are more changes in the experimental branch than just performance improvements though. still, maybe it's worth a try, I don't know how far it is from being production ready.

I have created a PR a while ago from master that fixes most of the re-render issues, as far as I know it should be ok, so you can update this PR from master, test it and try to use it.

good luck :)

[clauderic]

Hey folks, sorry for not posting an update here sooner, it's been a busy year. I've got lots of exciting progress updates to share:

Alpha releases

There's now frequent releases of the experimental branch. Here are the main three entry points:

• @dnd-kit/abstract: This layer handles all of the abstract drag and drop logic that is decoupled from any concrete implementation, such as state management, lifecycle, collision detection, event handlers, and more. Most consumers will not interact directly with this layer. In the future, other implementations could be built on top of this layer, such as a @dnd-kit/react-native package.
• @dnd-kit/dom: This package consumes the abstract layer and implements all of the DOM specific logic (event handlers, resize observers, mutation observers, intersection observers, scroll listeners, etc.). It exposes some classes that can be used in vanilla JavaScript, DragDropManager, Draggable, Droppable, and Sortable.
• @dnd-kit/react: This package consumes the @dnd-kit/dom package and exposes hooks to make it easier to consume in React applications, such as useDraggable, useDroppable, and useSortable.

All of these new packages should be considered early alpha releases, so I would not recommend using them in production environments yet, unless you're comfortable with the risk of there being breaking changes in the near future, as the APIs are still somewhat unstable.

I'll be releasing frequent updates to the alpha releases (0.0.x) and working towards beta releases in the near future (0.x.x).

Documentation

There's a brand new documentation website, it's still a work in progress but should give you a good overview of how @dnd-kit will work in the future.

There's now interactive documentation for all of the different concepts:

I'm also working on writing several guides to help users get started and learn how to build common use-cases. One of the most frequent feedback I get with the current version of @dnd-kit is that it's too complicated to adopt, so I've been working hard to make sure that is no longer the case.

For example, I just finished writing an interactive guide on how to build multiple sortable lists (kanban boards). It now takes a fraction of the amount of logic to set up and should be much more straightforward to understand.

Roadmap

There's still much to do before this can be considered production-ready. Some of the things I still have on my roadmap include:

• The new documentation is a good starting point, but still needs a lot of work:
  • The API reference is still incomplete, and there are many undocumented features.
  • Write more guides for common use-cases.
• Streamline the migration for current users of @dnd-kit:
  • Writing a migration guide.
  • Introducing a <DragOverlay> component in the @dnd-kit/react package.
• Add automated tests using Playwright to prevent regressions.
• Finish migrating all of the current stories to make sure all of the current use-cases are well supported.
• Better auto-scroller implementation.
• Introduce more feedback strategies for draggable elements.
• And so much more:
  • Introduce a MultiSelect plugin
  • Introduce a Resizable class and a useResizable hook
  • Work on the HTML 5 drag and drop sensor implementation for cross-window events.

How can you help

Testing out the new packages and reporting issues

While the current version of @dnd-kit has been battle-tested for years in production, these new packages still require thorough testing to identify and resolve any bugs or imperfections that may have been overlooked. If you run into issues with the new experimental packages, please let me know and tag the issue with the experimental label.

Contributing

I'm now accepting pull requests to the experimental branch. If you encounter any issues and wish to contribute fixes, don't hesitate to open a pull request.

If you read through the new docs and find any errors or typos, don't hesitate to open a pull request, the contents of the new docs are now co-located with the source code and can be found here.

I'm also still looking for contributors to help me build out support for other frameworks, such as introducing a @dnd-kit/vue package so that we can make sure the @dnd-kit/abstract library has all of the right APIs exposed, now that the APIs are a bit more stable.

Community

There's a new Slack community you can join. To chat about the new experimental packages, join the #next channel.

Sponsoring

If you want to show your support for this refactor, consider sponsoring the development of @dnd-kit 🙏

[odicho]

@clauderic What an amazing update, thank you so much for all the hard work put into this!

I would love to join the Slack workspace, but it doesn't allow me. Are you able to provide access?

<email> doesn’t have an account on this workspace.

[clauderic]

Try this link

[samkingtwentytwo]

Just wondering if we're all good to go with React 19 and @dnd-kit 6.1.0? Not the experimental. Had a bit of an issue. Cheers

[omgoshjosh]

Hello @clauderic, I am a big fan and appreciate your work over the years! I've been following your journey from react-sortable-hoc lol.

I was wondering if you had any idea of like rough ballpark timelines/estimates for any of this stuff. Are we looking at a production ready release in 2024, 2025, 2026?

we're currently migrating away from react-beautiful-dnd temporarily to @hello-pangea/dnd and are considering a full migration to one of of either pragmatic-drag-and-drop or dnd-kit.

you may or may not have also seen @Xhale1 's comment about collaboration since he's one of the co-maintainers of react-beautiful-dnd's successor @hello-pangea/dnd. as an outside observer and user of these libraries, it would be nice to see some unification under the two main paradigms that seem to be out there, libraries that leverage the "browsers built in drag and drop functionality" like pragmatic-drag-and-drop and libraries that are "not built on top of the HTML5 Drag and drop API" like dnd-kit.

[uma-uc]

A timeline will be much appreciated. Can we use the experimental branch in our development project?

[ivanmartinvalle]

The experimental branch had it's MIT license deleted 😭 . Hopefully it comes back, but def wouldn't want to ship something or devote resources (sponsorships, contributions) without it.

[clauderic]

The experimental branch had it's MIT license deleted 😭 . Hopefully it comes back, but def wouldn't want to ship something or devote resources (sponsorships, contributions) without it.

Just an oversight, fear not. It's back.

A timeline will be much appreciated. Can we use the experimental branch in our development project?

You can already use the experimental branch yes, there are periodic releases to it but these are considered to be alpha releases. (0.0.x). As for a timeline, I'm currently aiming for January for stable releases.

[thesandybridge]

@clauderic is it possible to add an extra layer of nesting to the kanban board (multiple containers)? For example, sorting items at the same level as containers? I have had a very hard time getting this working with the core library and I still can't get it to work properly, but the new library looks promising.

[Pong420]

Hi @clauderic, Do you have any suggestions for implementing multi-select on a sortable list with the new version?

I am referring to this MR: #588. I was able to achieve it with the old version, but it didn’t work when I tried upgrading to the new version.

The storybook:
https://5fc05e08a4a65d0021ae0bf2-yivpqsvbcy.chromatic.com/?path=/story/presets-sortable-multiple-containers--multi-select

thank you