Getting Started with Bryntum TaskBoard in JavaScript

Using an AI coding assistant? Install the Bryntum MCP server to give it access to version-specific Bryntum documentation.

Try JavaScript demos

Bryntum TaskBoard is delivered with a variety of JavaScript demo applications showing its functionality.

View online JS demos View local JS demos

Create JavaScript application

In this guide we will explain how to get started if you are not using npm. If you prefer to use npm, please visit the dedicated Quick Start here.

To get started, the broad steps are as follows:

Download Bryntum TaskBoard
Create Application
Bryntum bundles
Add component to Application
Apply styles
Run the Application

The application we are about to build together is pretty simple, and will look like the live demo below:

Download

Bryntum TaskBoard is a commercial product, but you can access our free trial archive with bundles and examples by downloading it here.

Create Application

You can proceed as usual. The Bryntum TaskBoard Component is compliant with the most popular Javascript Standards.

To create an application, create a new folder and add the following to index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bryntum TaskBoard App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

Bryntum bundles

The Bryntum TaskBoard distribution provides pre-build JavaScript bundles. All bundles are transpiled with chrome: 88 babel preset.

In distribution zip they are located under the /build folder.

File	Contents
`taskboard.module.js`	Modules format bundle without WebComponents
`taskboard.lwc.module.js`	Modules format bundle with Lightning WebComponents (Salesforce)
`taskboard.wc.module.js`	Modules format bundle with WebComponents
`taskboard.umd.js`	UMD format bundle with WebComponents

Typings for TypeScripts can be found in files with a .d.ts file extension.

Minified bundles are available for Licensed product version and delivered with .min.js suffix.

Using EcmaScript module bundles

If you choose this option, copy the selected module file onto your application, in the root folder, for instance.

Create a main.js file, you can import the taskboard JavaScript.

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

const taskBoard = new TaskBoard({/*...*/ });

We have copied the module directly from the build folder for simplicity in this code example. Consider using your preferred build tool instead.

Learn more about how to use EcmaScript modules here.

Using `<script>` tag and UMD files

Please consider this solution as legacy and use it only for compatibility. If you choose this option, copy the selected UMD file onto your application, in the root folder, for instance.

To include Bryntum TaskBoard on your page using a plain old script tag, add a <script> tag pointing to the UMD bundle file in the <HEAD> of your index.html page. Example:

<script src="taskboard.umd.js"></script>

In the main.js, you will be able to access TaskBoard classes in the global bryntum namespace as follows:

const taskBoard = new bryntum.taskboard.TaskBoard({/*...*/ });

We also recommend you to copy onto your application the .js.map file paired with the umd file you selected.

We have copied the module directly from the build folder for simplicity in this code example. Consider using your preferred build tool instead.

Read more on script tag and UMD modules…

Add component to Application

Assuming the use of an EcmaScript module bundle:

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

const taskBoard = new TaskBoard({
    appendTo    : 'app',
    columnField : 'status',
    columns     : [
        'todo',
        'doing',
        'done'
    ],
    project : {
        tasks : [
            { id : 1,  name : 'Design landing page', status : 'doing', description : 'Creating layout for the new landing page' },
            { id : 2,  name : 'Set up database schema', status : 'todo', description : 'Define tables and relationships for user data' },
            { id : 3,  name : 'Write API documentation', status : 'done', description : 'Document the REST endpoints for the project' },
            { id : 4,  name : 'Create login screen', status : 'doing', description : 'Implement authentication UI with validation' },
            { id : 5,  name : 'Integrate payment gateway', status : 'todo', description : 'Connect Stripe API to the backend' },
            { id : 6,  name : 'Fix navigation bugs', status : 'done', description : 'Resolve reported issues with navbar links' },
            { id : 7,  name : 'Build notification system', status : 'doing', description : 'Real-time push notifications for events' },
            { id : 8,  name : 'Add unit tests', status : 'todo', description : 'Write tests for services and components' },
            { id : 9,  name : 'Optimize image loading', status : 'done', description : 'Implement lazy loading for large images' },
            { id : 10, name : 'Deploy staging server', status : 'doing', description : 'Set up CI/CD pipeline for staging environment' },
            { id : 11, name : 'Create user profile page', status : 'todo', description : 'Design and implement profile management UI' },
            { id : 12, name : 'Implement role-based access control', status : 'todo', description : 'Restrict features based on user roles' },
            { id : 13, name : 'Set up error logging', status : 'todo', description : 'Integrate centralized error monitoring tool' },
            { id : 14, name : 'Improve form validation', status : 'todo', description : 'Enhance validation rules for all forms' },
            { id : 15, name : 'Add search functionality', status : 'todo', description : 'Implement search bar with filtering options' }
        ],
        resources : [
            { id : 1, name : 'Angelo' },
            { id : 2, name : 'Celia' },
            { id : 3, name : 'Dave' },
            { id : 4, name : 'Emilia' },
            { id : 5, name : 'Gloria' },
            { id : 6, name : 'Henrik' },
            { id : 7, name : 'Kate' }
        ],
        assignments : [
            { id : 1,  event : 1,  resource : 1 },
            { id : 2,  event : 2,  resource : 2 },
            { id : 3,  event : 3,  resource : 3 },
            { id : 4,  event : 4,  resource : 4 },
            { id : 5,  event : 5,  resource : 5 },
            { id : 6,  event : 6,  resource : 6 },
            { id : 7,  event : 7,  resource : 7 },
            { id : 8,  event : 8,  resource : 1 },
            { id : 9,  event : 9,  resource : 2 },
            { id : 10, event : 10, resource : 3 },
            { id : 11, event : 11, resource : 4 },
            { id : 12, event : 12, resource : 5 },
            { id : 13, event : 1,  resource : 5 },
            { id : 14, event : 2,  resource : 5 },
            { id : 15, event : 3,  resource : 5 },
            { id : 16, event : 4,  resource : 5 },
            { id : 17, event : 6,  resource : 5 },
            { id : 18, event : 7,  resource : 5 }
        ]
    }

});

Here we are providing inline data, you can learn more about how we manage data using Store in this guide.

Bryntum Task Board organizes project tasks and allows you to assign resources to them. For an in-depth introduction to tasks, please refer to the tasks guide.

If you want to discover how flexible the Bryntum TaskBoard Component is, please explore the API documentation.

Apply styles

Stylesheets

You'll find a complete list of available CSS files in the /build folder of the distribution:

File	Contents
`taskboard.css`	Structural CSS
`svalbard-light.css`	Svalbard Light theme
`svalbard-dark.css`	Svalbard Dark theme
`visby-light.css`	Visby Light theme
`visby-dark.css`	Visby Dark theme
`stockholm-light.css`	Stockholm Light theme
`stockholm-dark.css`	Stockholm Dark theme
`material3-light.css`	Material3 Light theme
`material3-dark.css`	Material3 Dark theme
`fluent2-light.css`	Fluent2 Light theme
`fluent2-dark.css`	Fluent2 Dark theme
`fontawesome/css/fontawesome.css`	Font Awesome Free base CSS
`fontawesome/css/solid.css`	Font Awesome Free solid icons

You'll need to copy and import the structural CSS and the preferred theme into your project for the Bryntum TaskBoard to render correctly, and if you are not replacing the icons used by the component, you will also need to include Font Awesome. Below we assume they are in the root folder.

We also recommend you to copy onto your application the .css.map file paired with the css file you selected.

Add link tags for the structural CSS and a theme to your index.html in the <head>...</head> section:

<!-- Structural CSS -->
<link rel="stylesheet" href="taskboard.css">
<!-- Bryntum theme of your choice -->    
<link rel="stylesheet" href="svalbard-light.css" data-bryntum-theme>

Make sure to copy the fonts/ folder located in the /build right next to the .css theme.

- my-taskboard-app/
  - fonts/
  - taskboard.css
  - svalbard-light.css

Sizing the component

By default, the Bryntum TaskBoard component is configured to occupy 100% of the parent DOM element with a min-height of 10em.

To display the component at the appropriate size, you can, for example, set parent components to take up the full height of the screen.

#app {
    margin         : 0;
    display        : flex;
    flex-direction : column;
    height         : 100vh;
    font-size      : 14px;
}

There are many other solutions depending on the situation. Feel free to adapt the code above regarding your application layout. For more information on the topic, see this guide Sizing the component.

Run the application

To see the preview, start a live-server (if you are using one) or open the index.html file in your browser from your local web server.

A local web server is required, viewing the app page directly from the local file system won't work.

What to do next?

Tutorial

Now it is time to customize your application. To get familiar with the most common tasks developers perform, we have designed an engaging tutorial that we are excited to see you follow.

Learn about Data

Bryntum components often use multiple data collections and entities.

For a detailed explanation of how these elements interact, see our guide to tasks in Bryntum TaskBoard.