A VS Code/Antigravity webview extension and standalone HTML Kanban board viewer for Kanbn markdown files.
- 📁 File System Access API - Direct read/write to your Kanbn markdown files
- 🎨 Modern UI - Clean, responsive design with automatic light/dark theme
- 🔄 Drag & Drop - Move tasks between columns with ease
- ✏️ Task Editor - Create and edit tasks with full metadata support
- 🏷️ Smart Tags - Auto-generated colors for consistent visual organization
- 📊 Progress Tracking - Visual progress bars and completion status
- 🔍 Search & Filter - Quickly find tasks by title, description, or tags
- 🤖 Agent-Friendly - Comprehensive instructions for AI assistants
- Install the Dev Containers extension.
- In VS Code, run: Dev Containers: Reopen in Container
- Build the extension:
npm run compile
- Build the extension:
npm installnpm run compile
- Open the command palette and run:
Kanban Board Viewer: Open Board - Select your
.kanbnfolder (or a parent folder containing.kanbn). If none exists, the extension will offer to create the required.kanbn/index.md+.kanbn/tasks/structure.
The extension uses VS Code file APIs, so it works in VS Code and Antigravity without relying on the File System Access API.
Download kanban-board.html from this repository.
The File System Access API works best from a secure context like http://localhost (recommended) and requires a top-level browsing context (not an embedded preview).
Option A: External Browser (recommended)
- In a terminal, start a local server in the folder containing
kanban-board.html:python3 -m http.server 8000
- Open Chrome / Edge / Opera to
http://localhost:8000/kanban-board.html
Option B: Open the file directly
- You can try opening
kanban-board.htmlviafile://(or dragging it into the browser), but if you don't see the directory picker button working, use Option A or B.
- Click "Select .kanbn Directory"
- Navigate to your Kanbn board's
.kanbnfolder - Grant file system permission
- Start managing your tasks!
| Browser | Support |
|---|---|
| Chrome | ✅ Full Support |
| Edge | ✅ Full Support |
| Opera | ✅ Full Support |
| VSCode Simple Browser | ❌ File picker blocked (embedded preview) |
| Antigravity Simple Browser | ❌ File picker blocked (embedded preview) |
| Firefox | |
| Safari | ❌ Not Supported |
- 5 Columns: Backlog, Ready, In Progress, Review, Done
- Task Cards: Display title, description, tags, dates, and progress
- Done Column: Collapsed cards showing only essentials
- Real-time Search: Filter tasks as you type
- Drag & Drop: Move tasks between columns
- Auto-timestamps: Automatically adds
startedandcompleteddates - Progress Tracking: 0-100% progress bars
- Tag System: Color-coded tags for easy categorization
- Edit task title, content, and metadata
- Set due dates, assignees, and progress
- Add and manage tags
- Full markdown support for task content
Your Kanbn board structure remains unchanged:
your-project/
├── .kanbn/
│ ├── index.md # Board structure
│ └── tasks/ # Individual task files
│ ├── task-1.md
│ ├── task-2.md
│ └── ...
└── kanban-board.html # ← Place the viewer here
See AGENT_INSTRUCTIONS.md for comprehensive documentation on:
- Creating tasks programmatically
- Moving tasks between columns
- Updating task metadata
- File format specifications
- Validation rules
- Single File: Everything in one HTML file (~800 lines)
- No Dependencies: Pure HTML, CSS, and JavaScript
- No Server Required: Runs entirely in the browser
- Git-Compatible: Works with plain markdown files
- Offline-First: No internet connection needed
- Requires File System Access API (Chrome, Edge, Opera)
- Desktop browsers only (mobile not supported)
- No undo/redo functionality
- No real-time multi-user sync
- Permission required each browser session
Contributions are welcome! Please see CONTRIBUTING.md for guidelines.
GPL-3.0 License - see LICENSE for details.
- Built for compatibility with Kanbn by basementuniverse
- Inspired by the Kanbn VSCode Extension by samgiz
For issues, questions, or feature requests, please open an issue on GitHub.
Made with ❤️ for the Kanbn community