@libxai/board

Professional Gantt Chart + Kanban Board for React

Production-ready. TypeScript. Zero configuration.

---

Why LibXAI Board?

| Feature | LibXAI | DHTMLX | Bryntum |
|---------|--------|--------|---------|
| Critical Path (CPM) | FREE | $1,299/dev | $2,995/dev |
| Auto-Scheduling | FREE | Manual config | Manual config |
| Split Tasks | FREE | Not available | Premium only |
| i18n (EN/ES) | Built-in | Manual | Manual |
| TypeScript | Full types | Partial | Partial |
| React Native | Coming soon | No | No |

---

Installation

``bash
npm install @libxai/board
`

For AI features (optional):
`bash
npm install ai
`

---

Quick Start

$3

`tsx
import { GanttBoard } from '@libxai/board';
import '@libxai/board/styles.css';

function App() {
const [tasks, setTasks] = useState([
{
id: '1',
name: 'Project Planning',
startDate: new Date('2024-01-01'),
endDate: new Date('2024-01-15'),
progress: 50,
status: 'in-progress',
},
{
id: '2',
name: 'Development',
startDate: new Date('2024-01-16'),
endDate: new Date('2024-02-15'),
progress: 0,
status: 'todo',
dependencies: ['1'], // Depends on task 1
},
]);

return (
tasks={tasks}
onTasksChange={setTasks}
config={{
theme: 'dark',
locale: 'es', // Spanish UI
timeScale: 'week',

// Callbacks for persistence
onTaskUpdate: async (task) => {
await saveToDatabase(task);
},
onMultiTaskDelete: async (taskIds) => {
await deleteFromDatabase(taskIds);
},

// Permissions (CASL compatible)
permissions: {
canCreateTask: true,
canUpdateTask: true,
canDeleteTask: true,
},
}}
/>
);
}
`

$3

`tsx
import { KanbanBoard, useKanbanState } from '@libxai/board';
import '@libxai/board/styles.css';

function App() {
const { board, callbacks } = useKanbanState({
initialBoard: {
id: 'my-board',
columns: [
{ id: 'todo', title: 'To Do', position: 1000, cardIds: [] },
{ id: 'doing', title: 'In Progress', position: 2000, cardIds: [] },
{ id: 'done', title: 'Done', position: 3000, cardIds: [] },
],
cards: [],
},
});

return ;
}
`

---

Features

$3

- 40+ Callbacks for full integration with any backend
- Critical Path Method (CPM) - Automatic calculation, FREE
- Auto-Scheduling - Dependency cascade on drag
- Split Tasks - Pause work with gaps (Bryntum-style)
- Dependencies - SS, FF, SF, FS with circular detection
- Export - PDF, Excel, PNG, CSV
- Zoom Levels - Hour, Day, Week, Month, Quarter, Year
- Undo/Redo - 50 levels of history
- Multi-level Hierarchy - Unlimited nesting
- Milestones - Diamond markers
- Today Line - Visual indicator

$3

- Drag & Drop - Powered by @dnd-kit
- Virtual Scrolling - Handle 10,000+ cards
- Filtering & Search - Advanced queries
- Multi-select - Bulk operations
- Command Palette - Cmd+K / Ctrl+K
- Import/Export - JSON, CSV, PDF

$3

- TypeScript - Complete type definitions
- Themes - Dark, Light, Neutral (or custom)
- i18n - English, Spanish (extensible)
- Accessibility - WCAG AA compliant
- Keyboard Shortcuts - Full navigation
- Zero Config - Works out of the box

---

Configuration

$3

`tsx
interface GanttConfig {
// Appearance
theme?: 'dark' | 'light' | 'neutral';
locale?: 'en' | 'es';
timeScale?: 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year';
rowDensity?: 'compact' | 'comfortable' | 'spacious';

// Features
enableAutoCriticalPath?: boolean;
showThemeSelector?: boolean;
showCreateTaskButton?: boolean;

// Permissions (CASL compatible)
permissions?: {
canCreateTask?: boolean;
canUpdateTask?: boolean;
canDeleteTask?: boolean;
canReorderTasks?: boolean;
canExport?: boolean;
};

// Callbacks
onTaskClick?: (task: Task) => void;
onTaskDblClick?: (task: Task) => void;
onTaskUpdate?: (task: Task) => void;
onMultiTaskDelete?: (taskIds: string[]) => void;
onProgressChange?: (taskId: string, oldProgress: number, newProgress: number) => void;

// Context Menu Callbacks (v0.16.0+)
onTaskEdit?: (task: Task) => void;
onTaskAddSubtask?: (parentTask: Task) => void;
onTaskMarkIncomplete?: (task: Task) => void;
onTaskSetInProgress?: (task: Task) => void;

// AI Assistant (optional)
aiAssistant?: {
enabled: boolean;
onCommand: (command: string) => Promise;
};
}
`

$3

`tsx
interface Task {
id: string;
name: string;
startDate?: Date;
endDate?: Date;
progress?: number; // 0-100
status?: 'todo' | 'in-progress' | 'completed';
color?: string; // Custom color
isMilestone?: boolean;
parentId?: string; // For subtasks
dependencies?: string[]; // Task IDs
assignees?: Array<{ id: string; name: string; initials: string; color: string }>;
subtasks?: Task[]; // Nested tasks
}
`

---

Internationalization (i18n)

Built-in support for English and Spanish:

`tsx
config={{
locale: 'es', // Spanish
customTranslations: {
// Override specific strings
toolbar: {
createTask: 'Crear Nueva Tarea',
},
},
}}
/>
`

$3

`tsx
const frenchTranslations = {
columns: { taskName: 'Nom de la tâche', ... },
toolbar: { createTask: 'Nouvelle tâche', ... },
contextMenu: { editTask: 'Modifier', ... },
};

config={{
locale: 'en', // Base
customTranslations: frenchTranslations,
}}
/>
`

---

Imperative API

Access methods via ref:

`tsx
import { GanttBoard, GanttBoardRef } from '@libxai/board';

function App() {
const ganttRef = useRef(null);

const handleAddTask = () => {
ganttRef.current?.addTask({
name: 'New Task',
startDate: new Date(),
endDate: new Date(Date.now() + 7 24 60 60 1000),
});
};

return (
<>
Add Task
ganttRef.current?.undo()}>Undo
ganttRef.current?.exportToPDF()}>Export PDF


);
}
`

$3

- addTask(task), updateTask(id, updates), deleteTask(id)
- splitTask(id, splitDate, gapDays)
- calculateCriticalPath()
- undo(), redo()
- exportToPDF(), exportToExcel(), exportToPNG(), exportToCSV()
- setZoom(level), scrollToTask(id), scrollToToday()`

---

Performance

- Renders 1,000 tasks in <1 second
- 60 FPS during drag operations
- Automatic virtualization for large datasets
- Tree-shaking ready (ESM + CJS)

---

Bundle Size

| Import | Size (gzip) |
|--------|-------------|
| GanttBoard only | ~80KB |
| KanbanBoard only | ~60KB |
| Full package | ~120KB |

---

Browser Support

- Chrome 90+
- Firefox 90+
- Safari 14+
- Edge 90+

---

License

Business Source License 1.1 (BUSL-1.1)

- Free for non-production use
- Commercial license required for production
- Converts to Apache 2.0 on October 12, 2027

View full license

---

Links

- NPM Package
- GitHub Repository
- Changelog
- Issue Tracker

---

Made with care by LibXAI