An extension library for Marked.js to enhance Markdown rendering.

@fsegurai/marked-extended-kanban Extension for Marked.js that adds support for Kanban boards, allowing the creation of task management boards with customizable columns, colors, and multiple view modes (board, table, list).

🎯 Overview

The marked-extended-kanban extension transforms your Markdown into interactive Kanban boards for project management and task tracking. With three flexible view modes, customizable columns, color-coding, and tag support, it's perfect for project documentation, sprint planning, team workflows, and progress tracking directly in your Markdown documents.

✨ Key Features

• 📋 Three View Modes: Board (Kanban), Table (data), and List (mobile-friendly)
• 🎨 Customizable Columns: Multiple columns with custom labels and colors
• 🏷️ Task Tagging: Hashtag-based task categorization and filtering
• 📝 Rich Task Content: Title, description, and multiple tags per task
• 🔄 Instant View Switching: Toggle between views without reload
• 🎯 Task Count Badges: Automatic task counting per column
• 📱 Responsive Design: Adapts to all screen sizes
• 🌈 Color Coding: Visual differentiation with custom column colors
• ♿ Accessible: Semantic HTML with proper structure
• 🎨 Fully Customizable: Override styles and templates
• 🔧 Framework Agnostic: Works with React, Vue, Angular, Svelte, and vanilla JS
• ⚡ Lightweight: Minimal overhead with efficient rendering

🎪 Live Demo

Experience all view modes in action: View Demo

Table of contents

• Installation
• Usage
  • Basic Usage
• Quick Start
  • Syntax & Usage
  • View Modes
  • Column Configuration
  • Task Format
  • Configuration Options
  • Use Cases
  • Aliases
• More Resources
  • Available Extensions
  • Demo Application
• License

Installation

To add @fsegurai/marked-extended-kanban along with Marked.js to your package.json use the following commands.

bun install @fsegurai/marked-extended-kanban marked@^17 --save

Usage

Basic Usage

Import @fsegurai/marked-extended-kanban and apply it to your Marked instance as shown below.

Quick Start

Basic Syntax

kanban is the identifier for the board container, and column for individual status columns.

::::kanban{view="board"}

:::column{label="To Do" color="#e74c3c"}
- Task title
  Task description
  #tag1 #tag2
:::columnend

:::column{label="In Progress" color="#f39c12"}
- Another task
  Working on this
  #development
:::columnend

:::column{label="Done" color="#27ae60"}
- Completed task
  All done!
  #completed
:::columnend

::::kanbanend

import { marked } from 'marked';
import markedExtendedKanban from '@fsegurai/marked-extended-kanban';

// or UMD script
// <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
// <script src="https://cdn.jsdelivr.net/npm/@fsegurai/marked-extended-kanban/lib/index.umd.js"></script>

marked.use(markedExtendedKanban());

### Installation

Install the package using your preferred package manager:

```bash
# Using Bun (recommended)
bun add @fsegurai/marked-extended-kanban

# Using npm
npm install @fsegurai/marked-extended-kanban

# Using yarn
yarn add @fsegurai/marked-extended-kanban

# Using pnpm
pnpm add @fsegurai/marked-extended-kanban

Basic Implementation

import { marked } from 'marked';
import markedExtendedKanban from '@fsegurai/marked-extended-kanban';

// Import styles (required for functionality)
import '@fsegurai/marked-extended-kanban/styles/kanban.css';
// Optional: Import theme for styled appearance
import '@fsegurai/marked-extended-kanban/styles/kanban-theme.css';

// Register the extension
marked.use(markedExtendedKanban());

// Your markdown content with kanban board
const markdown = `
# Project Sprint Board

::::kanban{view="board"}

:::column{label="📋 Backlog" color="#95a5a6"}
- User authentication
  Implement OAuth 2.0
  #backend #security #high-priority

- Mobile app
  Develop mobile version
  #mobile #future
:::columnend

:::column{label="🔨 To Do" color="#3498db"}
- API endpoints
  Create REST API
  #backend #api

- Database schema
  Design and implement
  #backend #database
:::columnend

:::column{label="⚙️ In Progress" color="#f39c12"}
- Frontend dashboard
  Building React components
  #frontend #react #wip

- Unit tests
  Writing test cases
  #testing #quality
:::columnend

:::column{label="✅ Done" color="#27ae60"}
- Project setup
  Repository and CI/CD configured
  #devops #completed

- Design mockups
  UI/UX designs approved
  #design #completed
:::columnend

::::kanbanend
`;

// Parse and render
const html = marked.parse(markdown);
console.log(html);

Syntax & Usage

Basic Board Structure

::::kanban{view="board"}

:::column{label="Column Name" color="#hexcolor"}
- Task 1
- Task 2
:::columnend

:::column{label="Another Column"}
- Task 3
:::columnend

::::kanbanend

Complete Task Format

- Task title (first line - required)
  Task description (optional, can be multiple lines)
  More description if needed
  #tag1 #tag2 #tag3 (hashtags for categorization)

Multiple Columns Example

::::kanban{view="board"}

:::column{label="Backlog" color="#95a5a6"}
- Research phase
  Initial research and planning
  #research #planning

- Requirements gathering
  Document all requirements
  #documentation
:::columnend

:::column{label="Design" color="#9b59b6"}
- Wireframes
  Create low-fidelity wireframes
  #design #ux

- Mockups
  High-fidelity designs
  #design #ui
:::columnend

:::column{label="Development" color="#3498db"}
- Backend API
  Implement REST endpoints
  #backend #api

- Frontend UI
  Build React components
  #frontend #react
:::columnend

:::column{label="Testing" color="#f39c12"}
- Unit tests
  Write component tests
  #testing #unit

- Integration tests
  E2E testing
  #testing #e2e
:::columnend

:::column{label="Deployment" color="#27ae60"}
- Staging deploy
  Deploy to staging environment
  #devops #staging

- Production release
  Final production deployment
  #devops #production #complete
:::columnend

::::kanbanend

Table View Example

For data-focused analysis:

::::kanban{view="table"}

:::column{label="Status"}
- Feature A
  Core functionality
  #feature #v1.0

- Bug fix
  Critical issue
  #bug #urgent
:::columnend

:::column{label="Completed"}
- Setup
  Initial configuration
  #setup #done
:::columnend

::::kanbanend

List View Example

Mobile-friendly vertical layout:

::::kanban{view="list"}

:::column{label="Tasks"}
- Task 1
  Description
  #tag

- Task 2
  Another description
  #tag
:::columnend

::::kanbanend

### Styling Your Kanban Boards

This extension injects minimal structural CSS for layout and view mode switching. Visual styling is completely
separated, allowing you to match your design system.

#### Generated HTML Structure

**Board View:**

```html

<div class="marked-extended-kanban" data-view-mode="board">
    <div class="marked-extended-kanban-view-switcher">
        <button class="marked-extended-kanban-view-button active" data-view="board">Board</button>
        <button class="marked-extended-kanban-view-button" data-view="table">Table</button>
        <button class="marked-extended-kanban-view-button" data-view="list">List</button>
    </div>
    <div class="marked-extended-kanban-container">
        <div class="marked-extended-kanban-column">
            <div class="marked-extended-kanban-column-header">
                <h3 class="marked-extended-kanban-column-title">To Do</h3>
                <span class="marked-extended-kanban-column-count">2</span>
            </div>
            <div class="marked-extended-kanban-column-tasks">
                <div class="marked-extended-kanban-task">
                    <h4 class="marked-extended-kanban-task-title">Task Title</h4>
                    <p class="marked-extended-kanban-task-description">Description</p>
                    <div class="marked-extended-kanban-task-tags">
                        <span class="marked-extended-kanban-task-tag">feature</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS Classes Reference

| Class | Purpose | View Mode | |---------------------------------------------------|--------------------------|-----------| | .marked-extended-kanban | Root container | All | | .marked-extended-kanban[data-view-mode="board"] | Board view state | Board | | .marked-extended-kanban[data-view-mode="table"] | Table view state | Table | | .marked-extended-kanban[data-view-mode="list"] | List view state | List | | .marked-extended-kanban-view-switcher | View mode toggle buttons | All | | .marked-extended-kanban-view-button | Individual view button | All | | .marked-extended-kanban-view-button.active | Active view button | All | | .marked-extended-kanban-container | Main content container | All | | .marked-extended-kanban-column | Column wrapper (board) | Board | | .marked-extended-kanban-column-header | Column header area | Board | | .marked-extended-kanban-column-title | Column title | Board | | .marked-extended-kanban-column-count | Task count badge | Board | | .marked-extended-kanban-task | Individual task card | All | | .marked-extended-kanban-task-title | Task title | All | | .marked-extended-kanban-task-description | Task description | All | | .marked-extended-kanban-task-tag | Task tags/labels | All | | .marked-extended-kanban-table | Table element | Table |

Complete Styling Example

/* View Switcher */
.marked-extended-kanban-view-switcher {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: #f5f5f5;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.marked-extended-kanban-view-button {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    color: #666;
    transition: all 0.2s ease;
}

.marked-extended-kanban-view-button.active {
    background: #0066cc;
    color: white;
}

.marked-extended-kanban-view-button:hover:not(.active) {
    background: #e8e8e8;
}

/* Board View - Columns */
.marked-extended-kanban[data-view-mode="board"] .marked-extended-kanban-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.marked-extended-kanban-column {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem;
}

.marked-extended-kanban-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid #0066cc;
}

.marked-extended-kanban-column-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
}

.marked-extended-kanban-column-count {
    background: #e8e8e8;
    color: #666;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Task Cards */
.marked-extended-kanban-task {
    background: white;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #0066cc;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.marked-extended-kanban-task:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.marked-extended-kanban-task-title {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.marked-extended-kanban-task-description {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    color: #666;
    line-height: 1.5;
}

.marked-extended-kanban-task-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.marked-extended-kanban-task-tag {
    background: #f0f0f0;
    color: #333;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid #ddd;
}

/* Table View */
.marked-extended-kanban[data-view-mode="table"] .marked-extended-kanban-container {
    overflow-x: auto;
}

.marked-extended-kanban-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.marked-extended-kanban-table thead {
    background: #f5f5f5;
}

.marked-extended-kanban-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #e0e0e0;
}

.marked-extended-kanban-table td {
    padding: 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.marked-extended-kanban-table tbody tr:hover {
    background: #fafafa;
}

/* List View */
.marked-extended-kanban[data-view-mode="list"] .marked-extended-kanban-task {
    border-left: 3px solid #0066cc;
    margin-bottom: 1rem;
}

Dark Mode Support

/* Dark theme for board view */
body.dark .marked-extended-kanban-view-switcher {
    background: #1c2128;
    border-color: #444c56;
}

body.dark .marked-extended-kanban-view-button {
    color: #d1d5da;
}

body.dark .marked-extended-kanban-view-button.active {
    background: #58a6ff;
    color: white;
}

body.dark .marked-extended-kanban-column {
    background: #22272e;
    border-color: #444c56;
}

body.dark .marked-extended-kanban-task {
    background: #2d333b;
    border-color: #444c56;
    color: #d1d5da;
}

body.dark .marked-extended-kanban-task:hover {
    background: #343b45;
}

/* Dark theme for table view */
body.dark .marked-extended-kanban-table {
    background: #2d333b;
    border-color: #444c56;
}

body.dark .marked-extended-kanban-table th {
    background: #1c2128;
    color: #d1d5da;
}

body.dark .marked-extended-kanban-table td {
    color: #d1d5da;
    border-bottom-color: #444c56;
}

Column Color Customization

Each column can have custom colors via border-left:

.marked-extended-kanban-column:nth-child(1) .marked-extended-kanban-task {
    border-left-color: #0969da; /* Blue for To Do */
}

.marked-extended-kanban-column:nth-child(2) .marked-extended-kanban-task {
    border-left-color: #c69026; /* Yellow for In Progress */
}

.marked-extended-kanban-column:nth-child(3) .marked-extended-kanban-task {
    border-left-color: #1a7f37; /* Green for Done */
}

Copy Demo Theme

For complete styling with all 3 view modes: kanban-theme.css

Check the demo to see all view modes in action.

Aliases

The kanban and column blocks can be rendered using alternative aliases:

• Kanban Aliases
  • ::::kanban (start) - 4 colons (default)
  • :::kanban (start) - 3 colons (alternative)
  • :kanban (start) - 1 colon (short)
  • :kbn (start) - 1 colon (shortest)
  • ::::kanbanend (end) - 4 colons (default)
  • :::kanbanend (end) - 3 colons (alternative)
  • :kanbanend (end) - 1 colon (short)
  • :kbnend (end) - 1 colon (shortest)
• Column Aliases
  • :::column (start) - 3 colons (default)
  • :column (start) - 1 colon (short)
  • :col (start) - 1 colon (shortest)
  • :::columnend (end) - 3 colons (default)
  • :columnend (end) - 1 colon (short)
  • :colend (end) - 1 colon (shortest)

Configuration Options

The marked-extended-kanban extension accepts the following configuration options:

• className: The base CSS class name for kanban boards. Defaults to 'marked-extended-kanban.'
• prefixId: The prefix ID for kanban elements. Defaults to 'kanban-'.
• template: A custom template for the kanban HTML. Defaults to the built-in template.
• customizeToken: A function that allows you to customize the token object. Defaults to null.

Note: For styling, import CSS/SCSS files manually (see Importing Styles).

Kanban syntax parameters:

• view: The view mode for the kanban board ("board", "table", or "list"). Defaults to "board."

Column syntax parameters:

• label: The label/title for the column. Defaults to 'Column.'
• color: The header color for the column (hex, rgb, or color name). Defaults to '#3498db.'

Task formatting:

• First line: Task title (required)
• Following lines: Task description (optional)
• #tags: Hashtags for categorization (optional)

View Modes

The extension supports three distinct view modes optimized for different use cases:

Board View (Default)

Traditional Kanban board with horizontal columns - best for visual task management:

::::kanban{view="board"}
:::column{label="To Do"}
- Task 1
:::columnend
:::column{label="Done"}
- Task 2
:::columnend
::::kanbanend

Best for:

• ✅ Sprint planning and tracking
• ✅ Visual workflow management
• ✅ Team stand-ups
• ✅ Project status overview

Features:

• Horizontal column layout
• Drag-drop ready structure
• Visual task cards
• Color-coded columns

Table View

Compact tabular format - best for data analysis and reporting:

::::kanban{view="table"}
:::column{label="Status"}
- Item 1
  Details
  #tag
:::columnend
::::kanbanend

Best for:

• ✅ Status reports
• ✅ Data analysis
• ✅ Compact overviews
• ✅ Printing/export

Features:

• Compact row-based layout
• Easy scanning
• Sortable columns (with JS)
• Print-friendly

List View

Vertical stacked layout - best for mobile and simple task lists:

::::kanban{view="list"}
:::column{label="Tasks"}
- Task 1
- Task 2
:::columnend
::::kanbanend

Best for:

• ✅ Mobile devices
• ✅ Simple task lists
• ✅ Sequential workflows
• ✅ Limited screen space

Features:

• Vertical stacking
• Mobile-optimized
• Easy scrolling
• Minimal horizontal space

Column Configuration

Columns are the core organizational units of your Kanban board:

Column Properties

| Property | Type | Required | Description | Example | |----------|----------|----------|--------------------------------|----------------------| | label | string | ✅ Yes | Column title/name | "In Progress" | | color | string | ❌ No | Header accent color | "#f39c12" |

Column Examples

Basic Column:

:::column{label="To Do"}
- Task 1
:::columnend

Column with Color:

:::column{label="In Progress" color="#f39c12"}
- Task in progress
:::columnend

Emoji in Labels:

:::column{label="🚀 Launched" color="#27ae60"}
- Feature released
:::columnend

Multiple Status Columns:

::::kanban{view="board"}

:::column{label="📥 Backlog" color="#95a5a6"}
- Future work
:::columnend

:::column{label="📋 To Do" color="#3498db"}
- Ready to start
:::columnend

:::column{label="⚙️ In Progress" color="#f39c12"}
- Currently working
:::columnend

:::column{label="🔍 Review" color="#9b59b6"}
- Needs review
:::columnend

:::column{label="✅ Done" color="#27ae60"}
- Completed
:::columnend

::::kanbanend

Task Format

Tasks are represented as list items with optional descriptions and tags:

Task Structure

- Task Title (Line 1 - Required)
  Task description line 1 (Optional)
  Task description line 2 (Optional)
  #tag1 #tag2 #tag3 (Optional hashtags)

Task Examples

Minimal Task:

- Write documentation

Task with Description:

- Write documentation
  Complete API reference guide

Task with Tags:

- Write documentation
  #docs #urgent

Complete Task:

- Write API documentation
  Complete reference guide for v2.0
  Include code examples and error codes
  #documentation #api #v2.0 #high-priority

Multiple Tasks:

:::column{label="Development"}
- Implement authentication
  OAuth 2.0 with PKCE
  #backend #security

- Design database schema
  PostgreSQL with migrations
  #backend #database

- Create REST endpoints
  CRUD operations for users
  #backend #api
:::columnend

Task Formatting Best Practices

Title:

• Keep concise (< 60 characters)
• Use action verbs (Implement, Design, Fix, Test)
• Be specific

Description:

• Provide context
• Include acceptance criteria
• Link to related issues/docs
• 2-3 lines maximum

Tags:

• Use consistent tag names
• Limit to 3-5 tags per task
• Common patterns:
  • Priority: #high-priority, #low-priority
  • Type: #feature, #bug, #enhancement
  • Area: #frontend, #backend, #design
  • Status: #blocked, #in-review, #urgent

Configuration Options & Examples

Available Options

marked.use(markedExtendedKanban({
  className: 'marked-extended-kanban',  // Base CSS class
  defaultView: 'board',                  // Default view mode
  showTaskCount: true,                   // Show task count badges
  template: null,                        // Custom HTML template
  customizeToken: null                   // Token customization function
}));

Configuration Examples

Custom Default View:

// Start with table view
marked.use(markedExtendedKanban({
  defaultView: 'table'
}));

Custom Class Name:

// Use custom CSS classes
marked.use(markedExtendedKanban({
  className: 'my-kanban-board'
}));

Hide Task Count:

// Don't show task count badges
marked.use(markedExtendedKanban({
  showTaskCount: false
}));

Token Customization:

// Modify tokens before rendering
marked.use(markedExtendedKanban({
  customizeToken: (token) => {
    // Add custom ID
    token.meta.kanbanId = `board-${Date.now()}`;
    
    // Log for debugging
    console.log('Kanban token:', token);
  }
}));

Best Practices

1. Limit Columns (3-6)

<!-- Good: 5 manageable columns -->
::::kanban{view="board"}
:::column{label="Backlog"}:::columnend
:::column{label="To Do"}:::columnend
:::column{label="In Progress"}:::columnend
:::column{label="Review"}:::columnend
:::column{label="Done"}:::columnend
::::kanbanend

<!-- Avoid: Too many columns -->
::::kanban{view="board"}
<!-- 10+ columns makes it hard to view -->
::::kanbanend

2. Use Descriptive Labels

<!-- Good: Clear, descriptive labels -->
:::column{label="🔨 Ready for Development" color="#3498db"}
:::column{label="✅ Deployed to Production" color="#27ae60"}

<!-- Avoid: Vague labels -->
:::column{label="Stuff"}
:::column{label="Things"}

3. Apply Consistent Colors

<!-- Good: Consistent color scheme -->
:::column{label="Not Started" color="#95a5a6"}   <!-- Gray -->
:::column{label="In Progress" color="#3498db"}   <!-- Blue -->
:::column{label="Blocked" color="#e74c3c"}       <!-- Red -->
:::column{label="Complete" color="#27ae60"}      <!-- Green -->

4. Keep Task Descriptions Concise

<!-- Good: Concise description -->
- Implement OAuth
  Add OAuth 2.0 authentication
  #backend #security

<!-- Avoid: Overly verbose -->
- Implement OAuth
  We need to implement OAuth 2.0 authentication following the 
  RFC 6749 specification with support for authorization code flow,
  implicit flow, and client credentials flow. We should also consider
  PKCE for mobile clients and ensure proper token refresh handling...
  (continues for many more lines)

5. Use Consistent Tagging

<!-- Good: Consistent tag scheme -->
#backend #frontend #design
#bug #feature #enhancement
#high-priority #low-priority
#v1.0 #v2.0

<!-- Avoid: Inconsistent tags -->
#back-end #BackEnd #BE
#critical #URGENT #high #important

6. Choose Appropriate View Mode

<!-- Board view for visual workflow -->
::::kanban{view="board"}
Multiple columns with visual cards
::::kanbanend

<!-- Table view for status reports -->
::::kanban{view="table"}
Compact data for analysis
::::kanbanend

<!-- List view for mobile or simple lists -->
::::kanban{view="list"}
Vertical stacked tasks
::::kanbanend

7. Group Related Tasks

:::column{label="Frontend Work"}
- Login page
  #frontend #ui

- Dashboard
  #frontend #ui

- User profile
  #frontend #ui
:::columnend

Use Cases

1. Sprint Planning Board

# Sprint 23 - February 2026

::::kanban{view="board"}

:::column{label="📋 Sprint Backlog" color="#95a5a6"}
- User story mapping
  Define user journeys for new feature
  #planning #ux

- Technical debt review
  Identify areas for refactoring
  #technical-debt #planning
:::columnend

:::column{label="🎯 This Sprint" color="#3498db"}
- OAuth implementation
  Implement OAuth 2.0 with PKCE
  #backend #security #8-points

- Dashboard redesign
  Update dashboard with new design system
  #frontend #design #5-points

- API rate limiting
  Implement rate limiting middleware
  #backend #api #3-points
:::columnend

:::column{label="🔨 In Development" color="#f39c12"}
- User authentication
  OAuth integration in progress
  #backend #security #wip

- Unit tests for API
  Writing test coverage
  #testing #backend #wip
:::columnend

:::column{label="🔍 Code Review" color="#9b59b6"}
- Password reset flow
  Awaiting security review
  #backend #security #review

- Mobile navigation
  UI review requested
  #frontend #mobile #review
:::columnend

:::column{label="✅ Sprint Complete" color="#27ae60"}
- CI/CD pipeline
  GitHub Actions configured
  #devops #completed #2-points

- Database migrations
  All migrations tested
  #backend #database #completed #3-points
:::columnend

::::kanbanend

**Sprint Goal:** Implement secure authentication system
**Team Capacity:** 40 story points
**Sprint Dates:** Feb 10 - Feb 24, 2026

2. Bug Tracking Board

# Bug Tracking Dashboard

::::kanban{view="board"}

:::column{label="🐛 New Bugs" color="#e74c3c"}
- Login fails on iOS
  Users cannot login on Safari iOS
  #bug #critical #ios

- Memory leak in dashboard
  Dashboard slows down after 10 minutes
  #bug #performance #high

- Incorrect date format
  Dates showing in wrong timezone
  #bug #i18n #medium
:::columnend

:::column{label="🔍 Investigating" color="#e67e22"}
- Payment processing errors
  Investigating Stripe webhook issues
  #bug #critical #payment

- Email notifications delayed
  Queue processing investigation
  #bug #medium #notifications
:::columnend

:::column{label="🔧 Fixing" color="#f39c12"}
- API timeout issues
  Optimizing database queries
  #bug #performance #backend

- CSS alignment bug
  Fixing layout on mobile
  #bug #frontend #css
:::columnend

:::column{label="✔️ Testing" color="#3498db"}
- Registration validation
  Testing edge cases
  #bug #qa #frontend

- File upload limits
  Verifying size restrictions
  #bug #qa #backend
:::columnend

:::column{label="✅ Fixed" color="#27ae60"}
- Login redirect loop
  Fixed OAuth state handling
  #bug #fixed #v2.1.3

- Broken image URLs
  Updated CDN configuration
  #bug #fixed #v2.1.3
:::columnend

::::kanbanend

**Critical:** 2 bugs
**High Priority:** 1 bug
**Target Release:** v2.1.4

3. Content Creation Pipeline

# Blog Content Pipeline - Q1 2026

::::kanban{view="board"}

:::column{label="💡 Ideas" color="#9b59b6"}
- AI in healthcare
  Exploring AI applications
  #idea #ai #healthcare

- Microservices patterns
  Common architecture patterns
  #idea #architecture #backend

- TypeScript best practices
  Advanced TypeScript techniques
  #idea #typescript #tutorial
:::columnend

:::column{label="📝 Drafting" color="#3498db"}
- React Server Components
  Deep dive into RSC
  #writing #react #frontend

- Database indexing strategies
  Performance optimization guide
  #writing #database #performance
:::columnend

:::column{label="✏️ Editing" color="#f39c12"}
- API design principles
  RESTful API best practices
  #editing #api #review

- Docker optimization
  Container size reduction tips
  #editing #docker #devops
:::columnend

:::column{label="🎨 Graphics" color="#e67e22"}
- Authentication flow diagrams
  Visual OAuth 2.0 flow
  #graphics #security #design

- Architecture diagrams
  System architecture visuals
  #graphics #architecture #design
:::columnend

:::column{label="📢 Published" color="#27ae60"}
- Getting started with Bun
  Introduction to Bun runtime
  #published #bun #tutorial #1500-views

- WebSocket real-time apps
  Building chat with WebSockets
  #published #websocket #tutorial #2300-views
:::columnend

::::kanbanend

**This Quarter:** 12 articles
**Published:** 8 articles
**In Progress:** 4 articles

4. Product Roadmap

# Product Roadmap 2026

::::kanban{view="table"}

:::column{label="Q1 2026" color="#3498db"}
- Mobile app launch
  iOS and Android apps
  #product #mobile #q1

- API v2.0 release
  New REST API version
  #product #api #q1

- SSO integration
  Enterprise SSO support
  #product #enterprise #q1
:::columnend

:::column{label="Q2 2026" color="#f39c12"}
- Advanced analytics
  Custom dashboards and reports
  #product #analytics #q2

- Webhook system
  Event-driven integrations
  #product #integrations #q2

- Multi-language support
  i18n for 10 languages
  #product #i18n #q2
:::columnend

:::column{label="Q3 2026" color="#e67e22"}
- AI-powered features
  Smart recommendations
  #product #ai #q3

- Real-time collaboration
  Collaborative editing
  #product #collaboration #q3
:::columnend

:::column{label="Q4 2026" color="#9b59b6"}
- Enterprise features
  Advanced security and compliance
  #product #enterprise #q4

- Performance optimization
  Speed improvements
  #product #performance #q4
:::columnend

::::kanbanend

5. Team Onboarding Checklist

# New Developer Onboarding

::::kanban{view="list"}

:::column{label="✅ Day 1 Tasks"}
- Complete HR paperwork
  Sign all required documents
  #onboarding #hr

- Get access credentials
  Email, Slack, GitHub, AWS
  #onboarding #access

- Setup development environment
  Install IDE, Docker, Node.js
  #onboarding #setup

- Meet the team
  Introduction session
  #onboarding #team
:::columnend

:::column{label="📚 Week 1 Training"}
- Review codebase architecture
  Understand system design
  #training #architecture

- Complete security training
  Security policies and practices
  #training #security

- Setup local development
  Clone repos and run locally
  #training #development

- First PR submission
  Fix a good-first-issue
  #training #coding
:::columnend

:::column{label="🚀 Month 1 Goals"}
- Ship first feature
  Complete assigned user story
  #goal #development

- Participate in code reviews
  Review 10+ pull requests
  #goal #collaboration

- Learn deployment process
  Shadow a production deploy
  #goal #devops

- Present at team meeting
  Share learnings with team
  #goal #presentation
:::columnend

::::kanbanend

**Buddy:** Senior Developer
**Manager:** Engineering Lead
**Check-in Schedule:** Weekly

Troubleshooting

View Switcher Not Working

Problem: Clicking view buttons doesn't change the view.

Solutions:

1. Import JavaScript functionality:

// Ensure styles are imported (they include inline scripts)
import '@fsegurai/marked-extended-kanban/styles/kanban.css';

2. Check for CSP restrictions:

<!-- Add to allow inline scripts -->
<meta http-equiv="Content-Security-Policy" 
      content="script-src 'self' 'unsafe-inline'">

3. Manual view switching with JavaScript:

function switchKanbanView(kanbanId, view) {
  const board = document.getElementById(kanbanId);
  if (!board) return;
  
  board.setAttribute('data-view-mode', view);
  const container = board.querySelector('.marked-extended-kanban-container');
  const viewsData = document.getElementById(`${kanbanId}-views`);
  
  if (container && viewsData) {
    const views = JSON.parse(viewsData.textContent);
    container.innerHTML = views[view];
  }
  
  // Update active button
  board.querySelectorAll('.marked-extended-kanban-view-button').forEach(btn => {
    btn.classList.remove('active');
  });
  board.querySelector(`[data-view="${view}"]`)?.classList.add('active');
}

Tasks Not Displaying

Problem: Tasks don't appear in columns.

Solutions:

1. Check list formatting:

<!-- Correct: Hyphen + space -->
- Task title
  Description
  #tag

<!-- Wrong: Missing space -->
-Task title  <!-- ❌ -->

2. Verify indentation for descriptions:

- Task title
  Description must be indented (2 spaces)
  #tags also indented

3. Check for empty columns:

<!-- Avoid empty columns -->
:::column{label="Empty"}
:::columnend  <!-- No tasks -->

Column Colors Not Showing

Problem: Custom column colors don't apply.

Solutions:

1. Import theme CSS:

import '@fsegurai/marked-extended-kanban/styles/kanban-theme.css';

2. Use valid color formats:

<!-- Valid formats -->
color="#3498db"      <!-- Hex -->
color="rgb(52, 152, 219)"  <!-- RGB -->
color="blue"         <!-- Named color -->

<!-- Invalid -->
color="3498db"  <!-- ❌ Missing # -->

3. Custom CSS for column colors:

.marked-extended-kanban-column:nth-child(1) .marked-extended-kanban-column-header {
  border-bottom-color: #e74c3c;
}

Mobile Display Issues

Problem: Board doesn't display well on mobile.

Solution:

<!-- Use list view for mobile -->
::::kanban{view="list"}
<!-- Tasks display vertically -->
::::kanbanend

Or with CSS:

@media (max-width: 768px) {
  .marked-extended-kanban[data-view-mode="board"] .marked-extended-kanban-container {
    grid-template-columns: 1fr;
  }
}

Tags Not Rendering

Problem: Hashtags don't appear as tags.

Solutions:

1. Ensure proper format:

- Task title
  Description
  #tag1 #tag2  <!-- Space between tags -->

2. Check CSS is loaded:

import '@fsegurai/marked-extended-kanban/styles/kanban-theme.css';

Framework Integration

React Integration

// KanbanBoard.tsx
import { marked } from 'marked';
import markedExtendedKanban from '@fsegurai/marked-extended-kanban';
import '@fsegurai/marked-extended-kanban/styles/kanban.css';
import '@fsegurai/marked-extended-kanban/styles/kanban-theme.css';
import { useEffect, useState } from 'react';

// Configure marked
marked.use(markedExtendedKanban({
  defaultView: 'board',
  showTaskCount: true
}));

interface Props {
  content: string;
  defaultView?: 'board' | 'table' | 'list';
}

export function KanbanBoard({ content, defaultView = 'board' }: Props) {
  const [html, setHtml] = useState('');
  
  useEffect(() => {
    marked.use(markedExtendedKanban({
      defaultView,
      showTaskCount: true
    }));
    
    const parsed = marked.parse(content);
    setHtml(parsed);
  }, [content, defaultView]);
  
  return (
    <div 
      className="kanban-container"
      dangerouslySetInnerHTML={{ __html: html }} 
    />
  );
}

// Usage:
// <KanbanBoard content={sprintBoard} defaultView="board" />

Vue 3 Integration

<script setup lang="ts">
import { marked } from 'marked';
import markedExtendedKanban from '@fsegurai/marked-extended-kanban';
import '@fsegurai/marked-extended-kanban/styles/kanban.css';
import '@fsegurai/marked-extended-kanban/styles/kanban-theme.css';
import { computed } from 'vue';

marked.use(markedExtendedKanban({
  defaultView: 'board',
  showTaskCount: true
}));

interface Props {
  content: string;
  viewMode?: 'board' | 'table' | 'list';
  showCount?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  viewMode: 'board',
  showCount: true
});

const html = computed(() => {
  marked.use(markedExtendedKanban({
    defaultView: props.viewMode,
    showTaskCount: props.showCount
  }));
  return marked.parse(props.content);
});
</script>

<template>
  <div class="kanban-wrapper" v-html="html" />
</template>

Angular Integration

// kanban-board.component.ts
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { marked } from 'marked';
import markedExtendedKanban from '@fsegurai/marked-extended-kanban';

marked.use(markedExtendedKanban({
  defaultView: 'board',
  showTaskCount: true
}));

@Component({
  selector: 'app-kanban-board',
  template: \`<div [innerHTML]="parsedContent"></div>\`,
  styleUrls: [
    '../node_modules/@fsegurai/marked-extended-kanban/styles/kanban.css',
    '../node_modules/@fsegurai/marked-extended-kanban/styles/kanban-theme.css'
  ]
})
export class KanbanBoardComponent implements OnChanges {
  @Input() content: string = '';
  @Input() defaultView: 'board' | 'table' | 'list' = 'board';
  @Input() showTaskCount: boolean = true;
  parsedContent: SafeHtml = '';

  constructor(private sanitizer: DomSanitizer) {}

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['content'] || changes['defaultView'] || changes['showTaskCount']) {
      marked.use(markedExtendedKanban({
        defaultView: this.defaultView,
        showTaskCount: this.showTaskCount
      }));
      
      const html = marked.parse(this.content);
      this.parsedContent = this.sanitizer.bypassSecurityTrustHtml(html);
    }
  }
}

Performance Tips

1. Limit tasks per column: Keep under 20 tasks per column for best performance
2. Use table view for large datasets: More efficient than board view with many items
3. Minimize description length: Keep task descriptions concise
4. Reduce tag count: Limit to 5 tags per task

// For very large boards
marked.use(markedExtendedKanban({
  showTaskCount: false,  // Reduces DOM operations
  defaultView: 'table'   // More efficient for many items
}));

Contributing

Found a bug or have a feature request? Please open an issue on GitHub.

Related Resources

• Marked.js Documentation
• Extension Demo
• Source Code
• npm Package
• Kanban Methodology Guide

Available Extensions

| Extension | Package | Version | Description | |-------------|--------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------|----------------------------------------------------------------------| | All - Bundle | @fsegurai/marked-extended-bundle | | Includes all extensions in a single package for easy integration | | Accordion | @fsegurai/marked-extended-accordion | | Add collapsible accordion sections to your markdown | | Alert | @fsegurai/marked-extended-alert | | Create styled alert boxes for important information | | Comments | @fsegurai/marked-extended-comments | | Add comment sections with author and timestamp metadata | | Embeds | @fsegurai/marked-extended-embeds | | Easily embed content from various platforms (YouTube, Twitter, etc.) | | Footnote | @fsegurai/marked-extended-footnote | | Add footnotes with automatic numbering | | Kanban | @fsegurai/marked-extended-kanban | | Create kanban boards with customizable columns and cards | | Lists | @fsegurai/marked-extended-lists | | Enhanced list formatting options | | Slide | @fsegurai/marked-extended-slide | | Create slide decks directly from markdown content | | Spoiler | @fsegurai/marked-extended-spoiler | | Hide content behind spoiler tags | | Tables | @fsegurai/marked-extended-tables | | Advanced table formatting with cell spanning | | Tabs | @fsegurai/marked-extended-tabs | | Create tabbed content sections | | Timeline | @fsegurai/marked-extended-timeline | | Display content in an interactive timeline format | | Typographic | @fsegurai/marked-extended-typographic | | Improve typography with smart quotes, dashes, and more |

Demo Application

To see all extensions in action, check out the [DEMO].

To set up the demo locally, follow the next steps:

git clone https://github.com/fsegurai/marked-extensions.git
bun install
bun start

This will serve the application locally at http://[::1]:8000.

License

Licensed under MIT.