Skip to main content

Initialization

This guide walks through the process of adding a Kanban board to a web page, so you can easily bring Kanban functionality into your app. Here’s how to get everything set up and ready to use:

  1. Include the Kanban source files on a page.
  2. Create a container for Kanban.
  3. Initialize Kanban with a constructor.

Including source files​

First, download the package and unzip it somewhere in your project folder.

To get Kanban working, just include these two files in your HTML:

  • kanban.js
  • kanban.css

Be sure the paths to the files are correct for your project:

index.html
<script type="text/javascript" src="./dist/kanban.js"></script>  
<link rel="stylesheet" href="./dist/kanban.css">

Creating container​

Set up a container for Kanban in your HTML and give it an ID, like "root":

index.html
<div id="root"></div>

If you want to add a Toolbar along with the Kanban board, set up a separate container for it as well:

index.html
<div id="toolbar"></div> // container for Toolbar
<div id="root"></div> // container for Kanban

Initializing Kanban​

To get Kanban up and running, use the kanban.Kanban constructor. It needs two things:

index.html
// create Kanban
new kanban.Kanban("#root", {
    // configuration properties
});

If you’re adding a Toolbar too, it gets initialized separately with the kanban.Toolbar constructor. The setup is similar:

  • the HTML container (the ID)
  • an object with configuration options
index.html
// create Kanban
const board = new kanban.Kanban("#root", {
    // configuration properties
});

new kanban.Toolbar("#toolbar", {
    // configuration properties
});
info

For more details on setting up the Kanban Toolbar, check out the Configuration section.

Configuration properties​

note

A complete list of configuration options for Kanban is available here.
You’ll find all the Toolbar configuration options here.

Example​

Here’s a quick example showing how to set up Kanban with some starter data: