A headless, minimal, and highly customizable tree structure builder for React.
Zero assumptions. Full control.

Docs & Live Playground: https://treecraft.live

---

Installation

npm install react-treecraft
# or
yarn add react-treecraft
# or
pnpm add react-treecraft

Import the base styles once in your entry point:

import 'react-treecraft/styles';

Quick Start

import { TreeCraft } from 'react-treecraft';
import 'react-treecraft/styles';

<TreeCraft
  data={treeData}
  renderNode={({ node }) => <div>{node.data.name}</div>}
  onNodeClick={(node) => console.log('Clicked:', node.id)}
/>

---

Highlights

• 100% Headless — render any JSX for each node, no UI opinions
• Vertical & Horizontal layout orientations
• Customizable Connectors — orthogonal, curved, or straight; solid, dashed, dotted, or animated flow
• Drag & Drop — reorder siblings or reparent nodes with cycle protection
• Export — PNG, SVG, and JSON canvas export + JSON import
• Mini-Map — interactive corner overview
• Live Search — instant path highlighting and auto-expansion
• Zoom & Pan — smooth scroll-to-zoom with canvas drag
• useTreeCraft Hook — immutable tree mutations, collapse/expand, selection state
• Zero Runtime Dependencies — only react and react-dom as peers

---

License

MIT © Selahadin Hamid