JavaScript
Kanban Board Library for Task Management Apps
DHTMLX Kanban is a customizable JavaScript component for adding interactive task boards to web applications. Build workflows with draggable cards, swimlanes, and WIP limits, and customize the board with a flexible API.
Try DHTMLX Kanban JS Demo
Open a demo on desktop
DHTMLX Kanban is a choice of web developers around the globe for creating flexible task management tools with minimum effort.
Key Features of DHTMLX JavaScript Kanban Board
Fully configurable
Touch support
Creating and editing columns and swimlanes
Drag and drop of cards and multiselection
Moving columns and rows from the UI
Searching and sorting
Creating and editing tasks
Duplicating tasks
Setting start and end dates
Setting the priority of tasks
Attachments to cards
Expanding and collapsing columns and swimlanes
TypeScript support
Get Started with DHTMLX JS Kanban Board
Custom toolbar
If needed, you can hide the toolbar of your JavaScript Kanban component.
Otherwise, there are ample opportunities for its configuration and
customization. It is easy to rearrange controls, place a search bar
and define its behavior, modify the sorting function, and equip the
toolbar with custom controls.
Built for Agile Workflows and Works Smoothly
with AI Coding Assistants
DHTMLX Kanban is available under the GPL v2 license, making it a practical choice for open-source task boards and collaborative workflow apps. It enables fast prototyping with GitHub Copilot, Claude, and other AI coding assistants, helping developers generate a functional Kanban board that can be extended for real-world use.
Prompt
Install @dhtmlx/kanban and create a Kanban board with three columns (To Do, In Progress, Done), draggable cards, and task labels.
React
Angular
Vue.js
Svelte
Salesforce
Why Choose DHTMLX JavaScript Kanban Library?
Feature-rich out of the box
Add a ready-made task management UI to your application instead of building each
interaction from scratch. DHTMLX Kanban combines draggable cards, swimlanes, WIP
limits, task assignments, progress indicators, comments, and attachments, so your
team can focus on application-specific workflows.
Fully customizable
Adapt the JavaScript Kanban board to your application’s design and business logic.
Create custom card templates, add editor fields, configure toolbar controls, and
handle user actions through the API. Use CSS variables to style the board, toolbar,
and editor consistently with your app.
Integration with DHTMLX widgets
Combine Kanban and Gantt to give users both a workflow board and a project timeline.
Connect DHTMLX Kanban with Scheduler or To Do List to support additional planning
scenarios. Use the components’ APIs to synchronize task data and changes across views.
Fits your application architecture
Integrate DHTMLX Kanban with React, Angular, Vue, or Svelte and use TypeScript for
development. Load board data and save user changes through the built-in REST data
provider, connecting the component to your application’s backend.
Support for touch screens
Let users select, edit, and drag cards on touch-enabled devices. Built-in touch
interactions help you provide task management across desktop and touch interfaces
without implementing separate gesture handling.
DHTMLX Kanban Library Pricing
|
Individual
Total: $389
|
Commercial
Total: $769
|
Enterprise
Total: $1499
|
Ultimate
Total: $2999
|
| License Terms | Read License Agreement | Read License Agreement | Read License Agreement | Read License Agreement |
| Developers | 1 | 5 | 20 | |
| Projects | 1 | 1 | 5 | |
| Use in SaaS (unlimited end-users) | ||||
| Perpetual distribution rights |
|
Support Plan
|
Standard | Premium | Premium | Ultimate |
| Time Period | 1 year | 1 year | 1 year | 1 year |
| Updates | Major, minor, and maintenance updates | Major, minor, and maintenance updates | Major, minor, and maintenance updates |
Major, minor, and maintenance updates
Priority queue for bug fixing
|
| Support requests | 10 | 30 | 50 | |
| Response time | 72h | 48h | 48h | 24h |
| Personal Account Manager |
Unlock up to 65% Savings with DHTMLX Bundles
Combine Kanban with Other DHTMLX Libraries
DHTMLX Kanban: Frequently Asked Questions
General
Functionality and UX Configuration
UI Customization
Scalability and Integration
Supported Platforms and Accessibility
Licensing and Support
General
What is DHTMLX Kanban?
DHTMLX Kanban is a customizable JavaScript Kanban board library for adding interactive task boards to web applications. It includes draggable cards, columns, swimlanes, a card editor, and an API for configuring board data and behavior.
What can I build with DHTMLX Kanban?
Use DHTMLX Kanban to build task management tools, CRM workflows, agile dashboards, and project management applications. Organize tasks into workflow stages and customize cards, fields, and interactions to match your application’s requirements.
Is DHTMLX Kanban available for open-source projects?
Yes, DHTMLX Kanban is available under the GPL v2 license, so you can use it in GPL-compatible open-source projects. The GPL edition is also available via npm, which makes it straightforward to install and start building and prototyping with different AI coding tools quickly.
How do I initialize a DHTMLX Kanban board?
To initialize the DHTMLX Kanban board, you have to download the package with a trial or licensed version first, include the Kanban JavaScript and CSS files in your page, and create an HTML container. Then use the kanban.Kanban constructor in JavaScript, passing the container selector and a configuration object to create the board instance. You can also initialize an optional toolbar with kanban.Toolbar.
Functionality and UX Configuration
Does DHTMLX Kanban support drag-and-drop and multiselection?
Yes. Users can drag cards within a column or between columns and swimlanes. Multiselection allows them to select and move several cards together. Columns and swimlanes can also be reordered through their context menus. Developers can configure restrictions on card movement.
Does DHTMLX Kanban board support swimlanes?
The JavaScript Kanban board natively supports kanban swimlanes, enabling you to group tasks by team members, projects, or any custom criteria for more advanced workflow visualization.
Can I set WIP limits in DHTMLX Kanban?
You can set custom Kanban WIP limits for cards in columns or swimlanes to control task load and keep workflows balanced.
What information can users add to cards?
Cards can include descriptions, assigned team members, priorities, start and end dates, progress indicators, comments, votes, and attachments. Developers can configure the available fields and add custom ones to match their application’s requirements.
Does DHTMLX Kanban support undo/redo and read-only mode?
Yes. Built-in history management allows users to undo and redo card operations. Developers can also configure read-only mode to restrict editing actions. Explore the undo/redo example and read-only example.
UI Customization
Can I customize cards, the editor, and the toolbar?
Yes. Define custom card templates, add and configure editor fields, and change toolbar controls and their behavior. You can also customize column headers and context menus, and use CSS variables to match your application’s design. See the configuration guide.
Does DHTMLX Kanban support themes and custom CSS?
DHTMLX Kanban includes built-in themes, e.g., Material, Willow, and Willow-Dark, and it also allows extensive custom CSS styling. You can customize the appearance of specific columns, rows, and cards using custom CSS variables to make the Kanban board fit your design needs.
Can I update Kanban cards programmatically using the API?
Using the feature-rich Kanban JavaScript API, you can add, update, move, or delete cards programmatically. The Kanban API allows full control over board data and behavior, enabling custom logic, event handling, and real-time updates.
Scalability and Integration
How does DHTMLX Kanban handle boards with many cards?
DHTMLX Kanban supports lazy rendering, which renders visible cards rather than the entire dataset, and independent column scrolling. These options help manage boards with many cards. Performance depends on the dataset, card templates, and configuration. See the rendering and scrolling configuration.
How do I load data and save changes to my backend?
Provide board data as JSON or use the built-in REST data provider to load cards, columns, swimlanes, and links from your server and send user changes back. Connect the component to a backend that implements the documented REST routes, or adapt the integration to your existing API. See the server integration guide.
Can I combine a Kanban board and a Gantt chart in one application?
Yes. Use DHTMLX Kanban to display workflow stages and DHTMLX Gantt to display task dates and dependencies. Configure synchronization through the components’ APIs so changes are reflected across both views. You can also combine Kanban with other DHTMLX components.
Does DHTMLX Kanban support real-time updates?
Yes, when connected to a backend that supports shared updates. Combine the REST data provider with WebSockets and server-side event broadcasting so connected users receive changes without reloading the page. REST integration alone does not provide real-time updates. See the server integration guide.
Can I use DHTMLX Kanban with React, Angular, Vue, or Svelte?
Yes. DHTMLX Kanban provides integration guides and examples for React, Angular, Vue, and Svelte. The JavaScript library also supports TypeScript. Explore the framework integration guides.
Can I use DHTMLX Kanban in Salesforce?
Yes. DHTMLX Kanban can be integrated into Salesforce Lightning components. An official guide and example demonstrate the setup and configuration. See the Salesforce integration guide.
Supported Platforms and Accessibility
Does DHTMLX Kanban support touch devices?
Yes. DHTMLX Kanban supports touch interactions for selecting, editing, and dragging cards between columns and swimlanes. Developers can configure the board layout to suit their application and should test it on their target devices and screen sizes.
Does DHTMLX Kanban support localization?
The component provides robust kanban localization support, allowing developers to tailor UI elements to different languages with ease and meet the needs of international users.
Licensing and Support
Is DHTMLX Kanban free or commercial?
DHTMLX Kanban is available under both GPL v2 and commercial licenses. The free GPL edition can be used in GPL-compatible projects. Commercial licenses allow use in proprietary applications and include technical support and updates according to the selected plan.
Is there a free trial for DHTMLX Kanban?
The DHTMLX Kanban free trial version is available for 30 days, allowing you to explore all features, test integration scenarios, and evaluate performance before making a purchasing decision.
What kind of support is available for DHTMLX Kanban?
You can rely on DHTMLX support through detailed documentation, live examples on the Code Snippet tool, community forum, and a dedicated ticket system where expert developers assist with smooth Kanban integration and customization.
Where can I find examples and documentation?
You can find official DHTMLX Kanban documentation, guides, and API references on the DHTMLX website. The docs cover everything from basic setup and initialization to advanced features and REST integration. There are also live samples and code snippets to explore, plus demos on GitHub that show how Kanban works with different frameworks, including Angular, React, Vue, and Svelte.
