Features

Card Priorities

Cards support five priority levels: none, low, medium, high, and critical. Each level has a color-coded SVG icon displayed on the card.

card.priority = 'critical';
card.priority = 'high';
card.priority = 'medium';
card.priority = 'low';
card.priority = 'none'; // no icon

Tags

Tags are displayed as color-coded labels on the card. Each unique tag string automatically gets a consistent color.

card.tags = ['frontend', 'design', 'urgent'];

// Filter cards by tag
board.data.filter = (card) => card.tags.includes('urgent');

Due Dates

Cards can have a due date displayed as a label. Overdue cards are highlighted with a warning color.

card.dueDate = new Date(2027, 2, 15); // March 15, 2027

// Clear the due date
card.dueDate = null;

Story Points

The weight property stores a numeric value (story points, effort, or any weight) displayed as a badge on the card.

card.weight = 8;  // displayed as a badge
card.weight = null; // no badge

Programmatic Scrolling

Scroll the board to bring a specific card, column, or swimlane into view.

// Scroll to a card
board.scrollToCard(card);
board.scrollToCard(card, { behavior: 'smooth' });

// Scroll to a column
board.scrollToColumn(column);

// Scroll to a swimlane
board.scrollToSwimlane(swimlane);

Serialization

Save and load the entire board state as JSON. This includes all columns, cards, and swimlanes with their properties.

// Save board state
const json = board.save();
localStorage.setItem('kanban-state', json);

// Load board state
const saved = localStorage.getItem('kanban-state');
if (saved) {
  board.load(saved);
}

// The JSON format:
// {
//   columns: [...],
//   cards: [...],
//   swimlanes: [...]
// }

Individual model objects can also be serialized and deserialized:

// Serialize a single card
const cardData = card.toAny();

// Deserialize
const restored = KanbanCard.fromAny(cardData);

// Clone a card (with a new ID)
const clone = card.clone(null);
clone.columnId = 'other-column';
board.data.addCard(clone);