Interactive Kanban Examples
DHTMLX Kanban is a client-side JavaScript component for visualizing workflows as draggable cards on a board with columns and swimlanes. Explore the interactive demos below to see its features in action, or visit the official documentation for the full API reference.
Try dragging cards between columns, voting and commenting on tasks, adding task links in the editor, and switching between swimlanes. Hover over the demo and use the ⛶ icon (top right) to expand it to full screen. Then dive into the examples. Each one covers a specific scenario like custom templates, backend integration, or multi-widget sync, with code you can copy and adapt.
Getting started
- Initialization: create a Kanban board with columns, rows, and cards
- Swimlanes, comments, votes, and links: add horizontal lanes and card metadata
- Localization: switch the interface language at runtime
- Readonly mode: lock the board for display-only use
Columns and swimlanes
- WIP limits for columns and swimlanes: set card count limits with visual warnings
- Column header template: customize column headers with HTML templates
- Adaptive columns: make columns stretch to fill the available width
- Fixed headers, lazy rendering and column scroll: keep headers visible and render cards on demand
- Disabling drag and drop to specific columns: prevent cards from being dropped into certain columns
- Dynamic column grouping: group cards by a field within columns
- Grouping statuses into a single column: merge multiple statuses into one visual column
Cards and editor
- Custom task card template: replace the default card layout with custom HTML
- Highlighting outdated and active tasks: visually flag overdue or in-progress cards
- Links between tasks: draw dependency lines between cards
- Guarding against duplicate links: prevent creating the same link twice
- Single user assignment: limit each card to one assignee
- Unlimited user assignments: allow multiple users per card
- Styling cards: apply custom CSS to individual cards
- Open editor on double-click: switch from single-click to double-click to open the editor
- Editor in a modal window: display the card editor as a centered modal
- Date format in the editor: customize how dates appear in the editor panel
- Save mode: toggle between saving on the fly and manual saving
Toolbar, search, and menus
- Switching between projects: switch between project datasets using the toolbar
- Custom toolbar, search, and sort: build a custom toolbar with search and sort controls
- Custom search suggestions: provide tailored search dropdown options
- Keep sort order: maintain card order after drag and drop
- Styling columns and custom column menu: style column headers and add custom menu items
- Styling rows and custom swimlane menu: style swimlane headers and add custom menu items
- Custom context menu: replace the default right-click menu
Backend, import and export
- Backend: connect Kanban to a REST API for persistent storage
- Backend with comments and votes: persist comments and votes alongside cards
- Real-time multiuser backend: sync changes across multiple users in real time
- Undo/redo with backend: add undo and redo with server-side persistence
- Lazy loading tasks per column: lazy-load cards column by column
- Import and export JSON: serialize and restore the full board state as JSON
Framework integration
- React integration: embed Kanban in a React app
- Angular integration: use Kanban as an Angular component
- Vue integration: add Kanban to a Vue.js application
- Svelte integration: integrate Kanban in a Svelte project
- Kanban, Gantt, Scheduler (Salesforce LWC): DHTMLX widgets inside Salesforce Lightning
Multi-widget integration
- Gantt + Kanban + Calendar + Todo (real-time backend): four widgets with a shared backend and WebSocket sync
- Todo + Kanban (client-side): bidirectional sync between a To Do list and Kanban in the browser
- Kanban + ChatBot (AI assistant): control Kanban via a chat interface using an AI assistant