dnd-block-tree

Drag-and-Drop Block Trees

A headless React library for building hierarchical drag-and-drop interfaces. Bring your own components, we handle the complexity.

8px activation distanceSmart drop zonesDebounced previewSnapshot-based
Interactive Demo
Try dragging blocks to reorder them
Project Planning
Define project scope
Create timeline
Remember to include buffer time for unexpected delays
Development
Set up development environment
Implement core features
Write unit tests
Documentation
Write API documentation
Use OpenAPI spec format
Activation Distance8px
Structure
No changes
sectionProject Planning
taskDefine project scope
taskCreate timeline
noteRemember to include buffer time for unexpected delays
sectionDevelopment
taskSet up development environment
taskImplement core features
taskWrite unit tests
sectionDocumentation
taskWrite API documentation
noteUse OpenAPI spec format
Usage Example
Simple API for complex interactions
import { BlockTree } from 'dnd-block-tree'

const renderers = {
  section: (props) => <SectionBlock {...props} />,
  task: (props) => <TaskBlock {...props} />,
  note: (props) => <NoteBlock {...props} />,
}

function App() {
  const [blocks, setBlocks] = useState(initialBlocks)

  return (
    <BlockTree
      blocks={blocks}
      renderers={renderers}
      containerTypes={['section']}
      onChange={setBlocks}
    />
  )
}

Features

Weighted Collision Detection

Custom algorithm that scores drop zones by edge distance with bottom bias for natural drag behavior.

Smart Drop Zones

Only one before-zone rendered, none around active block. Prevents visual clutter and accidental drops.

8px Activation Distance

Prevents accidental drags. Pointer must move 8px before drag starts, allowing normal clicks.

Snapshot-Based Computation

State captured at drag start. All preview computations use snapshot, ensuring consistent behavior.