dnd-kit
dnd-kit copied to clipboard
clauderic
future of library & maintenance
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
@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?
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, https://github.com/clauderic/dnd-kit/issues/1071, https://github.com/clauderic/dnd-kit/issues/994, https://github.com/clauderic/dnd-kit/issues/898 https://github.com/clauderic/dnd-kit/issues/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.
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. :)
Looking forward to the new refactored dnd-kit. This is an awesome library
@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?
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).
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?
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.
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.
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.
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.
Waiting for the refactored version to come out. Might be a prerelease or beta release.
@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...
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?
@clauderic Hi! Amazing stuff! Can we eventually start using the experimental branch? From the storybook examples seems very promising!
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: https://github.com/clauderic/dnd-kit/pull/1096
Any idea when the performance and multiselect will be merged? That would really help us plan for our release. Thank you.
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
@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 :)
@alissaVrk turns out my storybook-based performance concerns were caused by an external mac mouse extension. The performance seems to have improved significantly!
@clauderic Thank you so very much for the great library, looking forward for the updates.
@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
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.
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.
@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.
@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?
Has anyone tried using this with React 19 & React Compiler to check if the performance improves?
@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.
@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.
