Bryntum TaskBoard (Trial)

Bryntum TaskBoard is a Kanban board component supporting a wide range of functionality. It integrates smoothly with React, Vue, Angular, or plain vanilla JS.

For more information about Bryntum TaskBoard, visit the Bryntum TaskBoard site

Highlights

• Kanban-style columns organize tasks into workflow stages with locked priority sections
• Swimlane organization groups tasks horizontally by team, project, or custom categories
• Flexible task cards with icons, tags, progress bars, and images using renderers
• Drag-and-drop workflow moves tasks between columns with optional confirmation dialogs
• Inline and modal editing with quick edits or rich dialog editor
• Filtering and sorting to focus on priorities with dynamic options
• Big data performance efficiently renders thousands of tasks using virtual rendering
• Custom column content renders markup in column headers and swimlane bodies
• Context menus provide quick actions for tasks and columns
• Responsive design automatically adjusts layout for mobile and tablet screens
• Six built-in themes or create custom ones with CSS variables
• React, Vue, and Angular wrappers with native framework patterns

Package Contents

| Path | Description | |---------------------------------------|------------------------------------------------| | fonts/ | Poppins, Montserrat, and RobotoFlex fonts | | fontawesome/ | FontAwesome icons and webfonts | | locales/ | Localization files for 30+ languages | | taskboard.module.js, taskboard.umd.js | JavaScript bundles (ES module and UMD formats) | | taskboard.css | Structural CSS (required) | | *.d.ts | TypeScript type definitions | | *.css | Theme stylesheets |

Note: Trial packages do not include minified bundles, source maps, or source files.

Supported Versions

• NodeJS: >= 20.0.0
• TypeScript: >= 3.6.0
• Angular: >= 9.0.0
• React: >= 16.0.0
• Vue: >= 3.0.0
• Ionic: >= 5.0.0
• Vite: >= 4.0.0
• Webpack: >= 4.0.0

Try Bryntum Online Demos

Explore our comprehensive collection of demos:

• View Online Demos
• JavaScript Demos
• React Demos
• Vue Demos
• Angular Demos

Installation

This is a trial package with limited functionality.

Why Use npm Aliasing?

Trial packages use npm aliasing to install @bryntum/taskboard-trial under the @bryntum/taskboard name. This approach provides a seamless upgrade path - when you purchase a license, you only need to update the alias in package.json without changing any application code.

Install using npm:

npm install @bryntum/taskboard@npm:@bryntum/taskboard-trial@latest

Or using yarn:

yarn add @bryntum/taskboard@npm:@bryntum/taskboard-trial@latest

Alternatively, add to package.json dependencies:

"dependencies": {
  "@bryntum/taskboard": "npm:@bryntum/taskboard-trial@latest"
}

Visit our npm repository guide to learn more about installation and migrating from trial to licensed packages.

Quick Start

Vanilla JavaScript

import { TaskBoard } from '@bryntum/taskboard';
import './style.css';

const taskBoard = new TaskBoard({
    appendTo    : 'app',
    columnField : 'status',
    columns     : [
        'todo',
        'doing',
        'done'
    ],
    project : {
        tasks : [
            { id : 1, name : 'My first task', status : 'doing' },
            { id : 2, name : 'My second task', status : 'todo' }
        ]
    }
});

In the style.css:

/* FontAwesome is used for icons */
@import "@bryntum/taskboard/fontawesome/css/fontawesome.css";
@import "@bryntum/taskboard/fontawesome/css/solid.css";
/* Structural CSS */
@import "@bryntum/taskboard/taskboard.css";
/* Bryntum theme of your choice */
@import "@bryntum/taskboard/svalbard-light.css";

Visit our JavaScript Quick Start guide to learn more.

Themes

Svalbard (default)

| Light | Dark | |--------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------| | | |

Stockholm

| Light | Dark | |----------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------| | | |

Visby

| Light | Dark | |--------------------------------------------------------------------------------------|------------------------------------------------------------------------------------| | | |

Material 3

| Light | Dark | |-----------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------| | | |

High Contrast

| Light | Dark | |------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------| | | |

Fluent 2

| Light | Dark | |-------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------| | | |

For more information on customizing themes, see the Styling guide.

Framework Integrations

Bryntum TaskBoard provides first-class wrappers for popular frameworks. Each wrapper follows native framework patterns and lifecycle management.

Note: The framework wrappers are public and can be installed normally. They require the core package to be present.

React

npm install @bryntum/taskboard-react@latest

Visit our React Quick Start guide to learn more.

Angular

npm install @bryntum/taskboard-angular@latest

Visit our Angular Quick Start guide to learn more.

Vue 3

npm install @bryntum/taskboard-vue-3@latest

Visit our Vue Quick Start guide to learn more.

Explore All Bryntum Products

• Bryntum Grid - High-performance data grid
• Bryntum Scheduler - Resource scheduling component
• Bryntum Scheduler Pro - Advanced scheduling with dependencies
• Bryntum Gantt - Project planning and management
• Bryntum Calendar - Full-featured calendar component
• Bryntum TaskBoard - Kanban-style task management

Explore our comprehensive collection of demos:

| Product | JavaScript | React | Vue | Angular | |-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:| | Grid | Grid JavaScript demos | Grid React demos | Grid Vue demos | Grid Angular demos | | Scheduler | Scheduler JavaScript demos | Scheduler React demos | Scheduler Vue demos | Scheduler Angular demos | | Scheduler Pro | Scheduler Pro JavaScript demos | Scheduler Pro React demos | Scheduler Pro Vue demos | Scheduler Pro Angular demos | | Gantt | Gantt JavaScript demos | Gantt React demos | Gantt Vue demos | Gantt Angular demos | | Calendar | Calendar JavaScript demos | Calendar React demos | Calendar Vue demos | Calendar Angular demos | | TaskBoard | TaskBoard JavaScript demos | TaskBoard React demos | TaskBoard Vue demos | TaskBoard Angular demos |

Online references

• Bryntum TaskBoard documentation

• Bryntum TaskBoard examples

• Bryntum Support Forum

• Contact us

License and copyright

Bryntum TaskBoard is commercial software and requires a paid license. Please visit the Bryntum TaskBoard End User License for the full text of the license.

Copyright © 2009-2026, Bryntum All rights reserved.