Kanban

What is a Kanban board and how can I build one with JsPlumb?

A kanban board is a physical or digital project management tool designed to help visualize work, limit work-in-progress, and maximize efficiency.

The main components of a Kanban board are columns and cards. A column represents a specific activity that forms part of a workflow - one very common example being a workflow that consists of Todo, In Progress and Done columns.

Each column contains zero or more cards, and each card represents some specific unit of work. The exact details of the unit of work vary depending on the context in which the Kanban board is being used. For instance, a software development team may use a Kanban board to track issues related to some project, and each card represents one issue. Or perhaps the design team use a Kanban to manage the development of their user stories.

• Cards can be dragged inside a column to reorder them
• Cards can be dragged to other columns
• Enter some text in the `Add Item` textfield and press enter to add a new card to a column
• Enter some text in the `Add Column` field and press enter to add a new column
• Click on a card to edit it in the inspector on the right hand side
• Click on the pencil icon of a column to edit it in the inspector on the right hand side.

Angular Kanban boards

JsPlumb's deep Angular integration makes building an Angular Kanban very simple. The Kanban builder starter app uses our ControlsComponent, SurfaceComponent, MiniviewComponent and Angular service to provide a fully featured Network Topology Diagram. Tested with Angular 16, 17, 18 and 19.

import { Component } from "@angular/core"
import { VertexDrawingPlugin } from "@jsplumbtoolkit/browser-ui"

@Component({
  template:`
  <div class="my-network-topology">
    <div class="canvas">
        <jsplumb-surface [view]='viewOptions'></jsplumb-surface>
        <jsplumb-controls></jsplumb-controls>
    </div>
  </div>`
})
export class MyComponent {

  viewOptions = { 
    ...   
   }
  
  renderOptions = {
     ...
   }
}        
        
        

React Kanban

React Kanban boards with JsPlumb are a snap. Our Kanban builder uses JsPlumb's advanced React integration with its providers and support for functional components, to give you a solid foundation on which to base your app. Tested with React 16, 17, 18 and 19.

import React from "react"
import { SurfaceProvider, 
         SurfaceComponent, ControlsComponent,
         MiniviewComponent} from "@jsplumbtoolkit/browser-ui-react"

export default function MyKanban() {

  view = {
    ...
  }      

  renderOptions = { 
   ... 
   }

  return <div className="jtk-demo-canvas">
      <SurfaceProvider>
        <SurfaceComponent
          renderOptions={renderOptions}
          viewOptions={view}>
          <ControlsComponent/>
          <MiniviewComponent/>
        </SurfaceComponent>

      </SurfaceProvider>
      </div>      
}                  

Typescript Kanban

JsPlumb is written in Typescript and ships with a full set of type definitions, for a seamless Typescript development experience.

JsPlumb's Surface component is the heart of the Kanban builder, and JsPlumb ships a large number of useful helper components such as the Miniview, the Controls component for managing zoom, undo/redo etc, which lets you easily configure drag/drop of new elements, plus a long list of plugins.

Our Typescript Kanban builder starter app provides you with everything you need to get a solid start, and is easily extensible.

<div id="network-topology-wrapper">
  <div id="canvas">
    <div id="controls"></div>
  </div>
  <div id="palette"></div>
</div>                       

import { newInstance,  
  ControlsComponent } from "@jsplumbtoolkit/browser-ui"
         
export class MyKanban() {
        
  constructor() {
  
    const toolkit = newInstance()
    const surface = toolkit.render(document.querySelector("#canvas"), {
      view:{
        nodes:{
          default:{
            template:`<div data-jtk-target="true"></div>`
          }
        }
      }             
    })
    
    new ControlsComponent(document.querySelector("#controls"), surface)
    
    
      
  }
  

}

Vue Kanban

It's easy to build a Vue Kanban with JsPlumb - we've done most of the hard work for you in our Vue Kanban builder starter app

Our Vue Kanban takes advantage of JsPlumb's ability to integrate deeply with Vue, using Vue components to render nodes, and several of JsPlumb's Vue helper components and plugins such as the ControlsComponent, MiniviewComponent.

<script>
import { defineComponent } from "vue";
import { loadSurface, DEFAULT_VUE_SURFACE_ID } from "@jsplumbtoolkit/browser-ui-vue3"

let surface
let toolkit

export default defineComponent({
  name:"kanban",
  mounted() {
    loadSurface(DEFAULT_VUE_SURFACE_ID, (s) => {
      surface = s;
      toolkit = surface.toolkitInstance;
    })
  },
  methods:{
    viewParams:function() {
      return {
        nodes:{
          default:{
            component:NodeComponent
          }
        }
      }
    },
    renderParams:function() {
      return {
        // set the size of elements from the width/height values in their backing data
        useModelForSizes:true,
        // on load, zoom the dataset so its all visible
        zoomToFit:true
      }
    }
  }

</script>
<template>
  <div id="app">
    <div class="jtk-demo-canvas">
      <SurfaceComponent :renderOptions="this.renderParams()"
                :viewOptions="this.viewParams()"
                url="mindmap.json">
      </SurfaceComponent>

      <ControlsComponent/>
      <MiniviewComponent/>
    </div>
  </div>
</template>          

Svelte Kanban

JsPlumb's Svelte integration has everything you need to quickly build a Svelte Kanban, and what's great is we've already pulled it all together for you in our Svelte Kanban builder starter app

Our Svelte Kanban uses several of JsPlumb's Svelte components, including the SurfaceComponent, ControlsComponent and MiniviewComponent

<script>

const view = {
      nodes:{
        [DEFAULT]:{
          component:NodeComponent
        }
      }
    }
    
const renderOptions = {
    // set the size of elements from the width/height values in their backing data
    useModelForSizes:true,
    // on load, zoom the dataset so its all visible
    zoomToFit:true
  }
    
    
</script>
<div>
    <SurfaceProvider>

      <SurfaceComponent renderOptions={renderOptions}
                        viewOptions={view}
                        className="jtk-demo-canvas"
                        url="/dataset.json">

        <ControlsComponent/>
        <MiniviewComponent/>
      </SurfaceComponent>

     

    </SurfaceProvider>
</div>