List

15 Open-source Kanban JavaScript Projects and Libraries With React

Hazem Abbas

Nov 4, 2023 — 12 min read

Kanban is a visual tool for managing project tasks, workflows, and communication. It helps teams organize their work by providing a clear and visual representation of tasks and their progress.

Some advantages of using Kanban include:

Visualization: Kanban boards provide a visual representation of tasks, allowing team members to see the status of each task at a glance. This enhances transparency and helps in identifying bottlenecks or tasks that require attention.
Flexibility: Kanban boards are highly flexible and can be adapted to fit different workflows and project management approaches. The board can be customized based on the specific needs of the team, including the number and names of columns, task limits, and assigned users.
Efficiency: Kanban promotes a more efficient workflow by limiting the number of tasks that can be worked on at a given time. This helps prevent overloading team members and ensures a balanced distribution of tasks.
Collaboration: Kanban encourages collaboration and communication among team members. It provides a centralized location for team members to discuss tasks, share updates, and ask questions, fostering a collaborative and productive work environment.
Continuous Improvement: Kanban emphasizes continuous improvement by encouraging teams to analyze and optimize their workflow. By regularly reviewing the board and identifying areas for improvement, teams can enhance their productivity and efficiency over time.

Overall, Kanban is a powerful tool that improves project management by providing clarity, flexibility, and collaboration. It helps teams streamline their workflow, prioritize tasks, and deliver projects more effectively.

There are several excellent open-source Kanban JavaScript libraries available specifically designed for React. These libraries provide a wide range of features and functionality to enhance your Kanban boards and streamline your project management process.

By utilizing these libraries, you can easily create and customize Kanban boards, organize tasks, track progress, and collaborate with your team more efficiently.

With their intuitive interfaces and flexible APIs, these libraries empower developers to build robust and interactive Kanban boards that meet their unique project requirements.

Whether you are a beginner or an experienced React developer, these open-source Kanban JavaScript libraries offer a wealth of options to optimize your workflow and boost your productivity.

1- React Kanban

A Kanban board is a visual tool for managing project tasks, workflows, and communication. It allows for adding, moving, and deleting tasks, with assigned users and specific task limits per column.

It can also utilize Local Storage for task management.

2- Kanban Board - With React

This is a free and open-source Kanban board written entirely in React.js. It features a draggable UI, Multi-events, uses and LocalStorage.

3- React Kanban

A Trello-like application built with React and Redux.

Features

It has most of the features available on Trello, like creating and editing new cards, dragging around cards and so on.
Supports GitHub flavored Markdown, which enables stuff like headings and checklists on the cards.
Works great on touch devices.

4- Taskei React Kanban Board

Taskei is a kanban board made with React and Typescript.

5- Kanban Board MVP

Kanban Board is an open-source MVP created using modern React.

6- React Kanban

Yet another Kanban/ Trello board lib for React. The project "react-kanban" is deprecated and no longer maintained.

The team has replaced it with a simpler internal version and cannot continue improving both sources without external help. The project will remain available, but no further improvements will be made.

7- Kanban Board

A kanban board is an agile project management tool designed to help visualize work, limit work-in-progress, and maximize efficiency (or flow). It has a dark and light mode.

Features

Drag & drop tasks
CRUD for tasks, labels & columns
Edit task descriptions
Add sub-task
Dark Mode

8- kanban-board-react

This is just a simple Kanban board using React JS. The kanban board contains basic functionality such as create, update and delete a task, drag and drop task. The project covers topics such as React Hooks, reactstrap, formik etc.

9- React Trello

Pluggable components to add a Trello (like) kanban board to your application

Features

Responsive and extensible
Easily pluggable into existing react application
Supports pagination when scrolling individual lanes
Drag-And-Drop on cards and lanes (compatible with touch devices)
Edit functionality to add/delete cards
Custom elements to define lane and card appearance
Event bus for triggering events externally (e.g.: adding or removing cards based on events coming from backend)
Inline edit lane's title

10- Kanban Board with Project Management Options

A Kanban Board for project and task management. Its features include keyboard accessibility, adding and removing tasks from board columns, renaming tasks, moving tasks using drag and drop, creating new board columns, and renaming board columns.

11- React Kanban

Yet another Kanban board with React.

12- jKanban

jKanban allow you to create and manage Kanban Board in your project!

13- Kanban Board built with React.js & Redux

14- Donko - Another Kanban Web App

This is an open-source simple Kanban Web App that allows users to effectively manage their tasks and projects. The app offers a variety of features to enhance productivity and organization.

Some of the key features of this Kanban Web App include:

A user-friendly interface that makes it easy to navigate and use the app efficiently.
The ability to create multiple boards to categorize tasks and projects based on different criteria.
Each board consists of customizable columns, such as "To Do," "In Progress," and "Completed," allowing users to track the progress of their tasks.
The app also includes a search bar that enables users to quickly find specific tasks or projects.
To ensure a seamless user experience, the search bar functionality is optimized for online usage. However, in case the user is offline, the app provides offline content to ensure uninterrupted access to important information.
Secure login and signup pages are available to protect user data and provide personalized experiences.
The app also offers a settings page where users can customize their preferences and tailor the app to their specific needs.

15- React Trello

Pluggable components to add a Trello (like) kanban board to your application.

Features

Responsive and extensible
Easily pluggable into existing react application
Supports pagination when scrolling individual lanes
Drag-And-Drop on cards and lanes (compatible with touch devices)
Edit functionality to add/delete cards
Custom elements to define lane and card appearance
Event bus for triggering events externally (e.g.: adding or removing cards based on events coming from backend)
Inline edit lane's title