Kanban · board

A task board on top of Sortable: drag cards between columns and columns by their grip, with work-in-progress limits, quick add, priority, due dates, checklists and assignees — and all of it by keyboard too.

Drag cards between columns · drag a column by its grip · “In progress” has a limit of 3 · Tab to a card, Space, then arrows (← → to change column)

  • Backlog

    3
    • Design

      Dark mode for the charts

      Low GH
    • Grid

      Export the grid to Excel

      Keep the column widths and number formats.

      Medium 2
    • UX

      Onboarding tour

      Sep 29 AL
  • To do

    2
    • Tree

      Rename in the tree view

      High Tomorrow 1/4 AT
    • Keyboard moves for kanban

      Medium 5 LT
  • In progress

    2 / 3
    • Core

      Sortable: auto-scroll at the edges

      Urgent Yesterday 3/5 8 AL
    • UX

      Tour spotlight follows scrolling

      High Today GH
  • Done

    2
    • Nav

      Side menu with drawer

      6/6 AT
    • File upload with progress

      4/4 LT
Moves show up here.

Usage

JavaScript
import { signal } from "./index.js";import { Kanban } from "./components/kanban.js"; const board = signal([  { id: "todo",  title: "To do", items: signal([{ id: 1, title: "Design the header", priority: "high",                                                  tags: [{ label: "UX", tone: "primary" }], due: new Date(), assignee: { name: "Ada" } }]) },  { id: "doing", title: "In progress", limit: 3, tone: "#f59e0b", items: signal([]) },  { id: "done",  title: "Done", items: signal([]) },]);Kanban({ columns: board,         onMove: ({ card, from, to, toIndex }) => api.move(card.id, to, toIndex),         onOpen: (card) => openDetails(card),         onAdd: (column, title) => ({ id: crypto.randomUUID(), title }) })   // "+ Add a card"// card: (card, column) => Node draws your own cards; strictLimit refuses drops past a limit