What is a kanban and how to develop one using JointJS+?

Kanban is a visual project management methodology widely adopted in software development, agile project management, and manufacturing. It utilizes visual boards and cards to represent work items and track their progress through different stages, providing teams with a comprehensive view of tasks and potential bottlenecks.

Ready to enhance your project management software with kanban boards? JointJS+ provides you, JavaScript or TypeScript developer, with a rich selection of plugins to ease the development process and boost your productivity. Explore our range of powerful plugins that make creating kanbans essentially an easy task.

The two most necessary plugins for kanban boards are StackLayout and StackLayoutView, they provide you with an automatic layouting in a stack. Do you wish you could just go back sometimes, to do something different? Well, in terms of keeping track of changes in the graph, we provide you with CommandManager that enables you to undo and redo all changes made. Do you want to provide users with some tools? Make sure to check out Toolbar with its different plugins that help you to do so!

The kanban demo application above is written in TypeScript and can be easily integrated with a wide range of web application frameworks such as React, Angular, Vue, Svelte, or Lightning. To check its source code, start a free 30-day trial of JointJS+.

Integration

Are you keen on implementing kanban boards within your projects, leveraging the power of React, Vue, Angular, Svelte, or Lightning? Seek no further! JointJS+, being framework agnostic, easily blends with all of these frameworks, ensuring a streamlined experience for developers who wish to create beautiful looking kanban boards with great user interface.

We have prepared dedicated examples showcasing the utilization of our StackLayoutView plugin for the most popular frameworks out there. These examples serve as comprehensive references, guiding you through the integration and effective utilization of the plugin's capabilities within your chosen framework.

TypeScript kanban

If TypeScript is the way you want to go, you are at the right place! The kanban demo in JointJS+ is already written in TypeScript, enabling you to harness the full potential of static typing and advanced language features straight out of the box. Embrace the comprehensive type definitions and experience type safety as you start designing your own kanban board applications!

React kanban

Building kanban boards in React becomes a breeze with the effortless integration of JointJS+. Fully taking advantage of React's component-based architecture and efficient rendering, developers can easily create reusable kanban board components that dynamically update in response to user interactions or task status changes. This provides an intuitive and interactive environment for efficient project workflow management. As mentioned before, here's an example of initializing StackLayoutView in a React application.

-- CODE language-js --
‍import { useEffect, useRef } from 'react';
import { dia, ui } from '@clientio/rappid';

export const KanbanLayoutView = () => {
  const paperEl = useRef(null);
  const graph = useRef();
  const paper = useRef();
  const layoutView = useRef();

  useEffect(() => {
    graph.current = new dia.Graph();
    paper.current = new dia.Paper({
        model: graph.current,
        el: paperEl.current,
        frozen: true,
        async: true,
        width: 500,
        height: 500
    });

    layoutView.current = new ui.StackLayoutView({
      paper: paper.current
    });

    paper.current.unfreeze();

    return () => {
        layoutView.current.remove();
        paper.current.remove();
    };
  }, []);

  return (
    <div id="paper" ref={paperEl}/>
  );
}

🔗 Interested in a step-by-step guide on how to integrate JointJS+ with your React application? Follow our tutorial on React and JointJS+ integration. For more examples, check out our Github repository.

Vue kanban

Vue, with its intuitive and reactive nature, harmonizes flawlessly with JointJS+ when it comes to incorporating kanban boards into Vue applications. By leveraging Vue's declarative syntax and component-based approach, developers can seamlessly integrate kanban boards, allowing teams to visualize and manage tasks efficiently within the kanban workflow. As discussed earlier, presented below is an illustration of how to initialize StackLayoutView in a Vue application.

-- CODE language-js --
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { dia, ui } from '@clientio/rappid';

const paperEl = ref(null);
const graph = new dia.Graph()
const paper = new dia.Paper({
  model: graph,
  frozen: true,
  async: true,
  width: 500,
  height: 500
});
const layoutView = new ui.StackLayoutView({
  paper
});

onMounted(() => {
  paper.render();
  paperEl.value.appendChild(paper.el);
  paper.unfreeze();
});

onBeforeUnmount(() => {
  layoutView.remove();
  paper.remove();
});
</script>

<template>
  <div ref="paperEl"></div>
</template>

🔗 Interested in a step-by-step guide on how to integrate JointJS+ with your Vue application? Follow our tutorial on Vue and JointJS+ integration. For more examples, check out our Github repository.

Angular kanban

For Angular developers, JointJS+ offers excellent integration possibilities for building kanban boards. By leveraging Angular's comprehensive framework and powerful features, developers can effortlessly create dynamic and data-driven kanban applications. The smooth integration ensures the accurate representation of task workflows, fostering improved collaboration and productivity within teams. As noted earlier, provided here is an example of integrating StackLayoutView into an Angular application.

-- CODE language-js --
import { AfterViewInit, OnInit, Component, ViewChild, OnDestroy } from '@angular/core';
import { dia, ui } from '@clientio/rappid';

@Component({
   selector: 'kanban-layout-view',
   template: `
        <div #paperEl></div>
    `
})

export class KanbanLayoutView implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild('paperEl') paperEl;

   private graph;
   private paper;
   private layoutView;

   public ngOnInit() {
       const graph = this.graph = new dia.Graph();

       const paper = this.paper = new dia.Paper({
           model: graph,
           frozen: true,
           async: true,
           width: 500,
           height: 500
       });

       this.layoutView = new ui.StackLayoutView({
           paper
       });

       paper.render();
   }

   public ngAfterViewInit() {
       const { paper, paperEl } = this;
       paperEl.nativeElement.appendChild(this.paper.el);
       paper.unfreeze();
   }

   public ngOnDestroy() {
       const { paper, layoutView } = this;
       layoutView.remove();
       paper.remove();
   }
}

🔗 Interested in a step-by-step guide on how to integrate JointJS+ into your Angular application? Follow our tutorial on Angular and JointJS+ integration. For more examples, check out our Github repository.

Svelte kanban

JointJS+ effortlessly merges with Svelte, renowned for its lightweight and reactive nature, to deliver exceptional kanban experiences. With Svelte's compiler-based approach, developers can generate optimized code, resulting in high-performance and responsive kanban applications. The straightforward integration of JointJS+ with Svelte empowers developers to easily create visually captivating and interactive kanban boards. As mentioned earlier, shown below is a demonstration of setting up StackLayoutView within a Svelte application.

-- CODE language-js --
<script>
  import { onMount, onDestroy } from 'svelte';
  import { dia, ui } from '@clientio/rappid/rappid.js';

  let paperEl;
  let graph;
  let paper;
  let layoutView;

  onMount(() => {
    graph = new dia.Graph();
    paper = new dia.Paper({
      model: graph,
      el: paperEl,
      frozen: true,
      async: true,
      width: 500,
      height: 500,
    });

    layoutView = new ui.StackLayoutView({
      paper,
    });

    paper.unfreeze();
  });

  onDestroy(() => {
    layoutView.remove();
    paper.remove();
  });
</script>

<main bind:this={paperEl} />

🔗 Interested in a step-by-step guide on how to integrate JointJS+ into your Svelte application? Follow our tutorial on Svelte and JointJS+ integration. For more examples, check out our Github repository.

Salesforce Lightning kanban

Developers can easily integrate JointJS+ with the Salesforce Lightning framework. The user-friendly interface and strong performance of Salesforce Lightning perfectly complement JointJS+, enabling developers to create advanced kanban board solutions. By combining the power of Salesforce Lightning and JointJS+, developers can improve the efficiency and interactivity of their kanban applications.

🔗 Interested in a step-by-step guide on how to integrate JointJS+ into your Lightning application? Follow our tutorial on Lightning and JointJS+ integration.

Ready to take the next step?

Modern development is not about building everything from scratch. The JointJS team equips you with plenty of ready-to-use demo apps that can serve as a boilerplate and radically reduce your development time. Start a free 30-day JointJS+ trial, get fully typed source code of the kanban application, and go from zero to a fully functional app in no time.