Debug Plugin - dnd kit

Overview

The Debug plugin renders visual overlays that help you understand what’s happening during drag and drop operations. It displays the shapes of draggable and droppable elements, highlights collision targets, and shows the current pointer position.

This plugin is not included by default — add it during development to help debug layout, collision, and positioning issues.

Usage

TypeScriptReactVueSvelteSolid

import {DragDropManager} from '@dnd-kit/dom';
import {Debug} from '@dnd-kit/dom/plugins/debug';

const manager = new DragDropManager({
  plugins: (defaults) => [...defaults, Debug],
});

import {DragDropProvider} from '@dnd-kit/react';
import {Debug} from '@dnd-kit/dom/plugins/debug';

function App() {
  return (
    <DragDropProvider
      plugins={(defaults) => [Debug, ...defaults]}
    >
      {/* ... */}
    </DragDropProvider>
  );
}

<script setup>
import {DragDropProvider} from '@dnd-kit/vue';
import {Debug} from '@dnd-kit/dom/plugins/debug';
</script>

<template>
  <DragDropProvider
    :plugins="(defaults) => [Debug, ...defaults]"
  >
    <!-- ... -->
  </DragDropProvider>
</template>

<script>
  import {DragDropProvider} from '@dnd-kit/svelte';
  import {Debug} from '@dnd-kit/dom/plugins/debug';
</script>

<DragDropProvider
  plugins={(defaults) => [Debug, ...defaults]}
>
  <!-- ... -->
</DragDropProvider>

import {DragDropProvider} from '@dnd-kit/solid';
import {Debug} from '@dnd-kit/dom/plugins/debug';

function App() {
  return (
    <DragDropProvider
      plugins={(defaults) => [Debug, ...defaults]}
    >
      {/* ... */}
    </DragDropProvider>
  );
}

The Debug plugin is intended for development only. Remove it before shipping to production.

Example

What It Shows

Draggable shape (blue overlay): The computed bounding rectangle of the element being dragged.
Droppable zones (gray overlays): The bounding rectangles of all registered droppable elements.
Drop target (green overlay): The current drop target.
Top collisions (yellow overlays): The next closest collision candidates.
Pointer crosshair: The current pointer position tracked by the drag operation.