Bryntum TaskBoard 5.0.6

Bryntum TaskBoard

Welcome to Bryntum TaskBoard, a pure JavaScript kanban board component which integrates easily with popular frameworks. Click a logo below to open the integration guide for the framework:

This document contains very brief info on the Taskboard's structure and how to get started. For more information, please view the guides and API Docs (open Taskboard in API docs).

Here you can try out the TaskBoard and some of its main features. For more demos please refer to the example browser.

Include on your page

Include the CSS for the theme you want to use and import the JS classes you need from our sources or from the modules bundle. Including a theme in your html file:

    <link rel="stylesheet" href="build/" data-bryntum-theme>

Importing from the modules bundle from your app:

import { TaskBoard } from 'build/taskboard.module.js';

Folder structure

The project has the following folders:

/buildDistribution folder, contains js bundles, css themes, locales and fonts. More info below.
/docsDocumentation, open it in a browser (needs to be on a web server) to view guides & API docs.
/examplesDemos, open it in a browser (needs to be on a web server)
/libSource code, can be included in your ES6+ project using import.
/resourcesSCSS files to build our themes or your own custom theme.
/testsOur complete test suite, including Siesta Lite to allow you to run them in a browser.


The bundles are located in /build. Bundle files are:

taskboard.module.jsES module bundle for usage with modern browsers or in build process
taskboard.umd.jsTranspiled (babel -> ES5) bundle in UMD-format
taskboard.d.tsES module bundle Typings for TypeScripts
taskboard.umd.tsTranspiled UMD-format bundle Typings for TypeScripts

All bundles are also available in minified versions, denoted with a .min.js file extension.


The themes are also located in /build. Theme files are:

taskboard.classic-dark.cssClassic-Dark theme
taskboard.classic.cssClassic theme
taskboard.classic-light.cssClassic-Light theme
taskboard.material.cssMaterial theme theme

Each theme also exists in a thin version that only contains product specific styling (TaskBoards full themes include TaskBoard + all core styling such as buttons etc). For example These are intended for when you include multiple Bryntum products on the same page, to avoid loading shared styling multiple times.

All themes are also available in minified versions, denoted with a .min.css file extension.

Basic usage

How to create a simple TaskBoard with some columns and tasks:

import { TaskBoard } from 'build/taskboard.module.js';

const taskBaord = new TaskBoard({
    appendTo : document.body,

    columnField : 'status',

    columns : [

    project : {
        tasksData : [
            { id : 1, name : 'Basic task', status : 'doing' },
            { id : 2, name : 'Advanced task', status : 'todo' }

Some good to know details

Code and technologies

  • The TaskBoard is written in ECMAScript 2020 using modules. The modules are distributed as is and also as bundles (as mentioned above). These bundles work in all supported browsers (Chrome, Firefox, Safari and Chromium Edge).
  • The TaskBoard is internally styled using a combination of SASS and CSS variables. During the build it generates CSS themes from the SASS files. In most cases you include one of the themes in your app.

TaskBoards structure

  • A TaskBoard consists of multiple columns and optionally of multiple horizontal swimlanes.
  • Tasks are displayed as cards in a column. Which column is determined by the value of the configured columnField.
  • When using swimlanes, tasks are displayed in a column/swimlane intersection. Which is determined by values for the configured columnField and swimlaneField fields.
  • TaskBoard shares it data layer with Bryntum Scheduler and Bryntum Calendar.

External dependencies

Bryntum TaskBoard has very few external dependencies, you can see our current dependencies in the file

Copyright © 2009 - 2022, Bryntum

All rights reserved.


Last modified on 2022-06-20 10:58:31