Todo Sidebar

A VSCode extension that renders a Kanban-style todo board in the sidebar, parsed directly from Markdown files.

Sorry, this is a vibe-coded app. I just wanted the feature 🤷‍♀️

Install

• VSCode Marketplace
• Open-VSX Marketplace

Features

• Markdown-powered - Your todos live in plain .md files, not a proprietary format
• Kanban board view - Visualize tasks across columns defined by ## Headers
• Live sync - Changes in the editor instantly update the board and vice versa
• Drag and drop - Move tasks between columns or nest them under parent tasks
• Right-click to move - Right-click any task to quickly move it to a different section
• Nested tasks - Support for subtasks
• Add tasks - Click "+" to add tasks to columns or subtasks to existing tasks
• Inline editing - Double-click any task to edit its text
• Checkbox support - Works with - [ ]/- [x] and unicode ☐/☑ checkboxes
• Auto-move to Done - Checking a task automatically moves it to your Done column
• Keep the rest of your MD file untouched - Only tasks you drag / interact with will move, other markdown will stay.
• History support (ctrl+z, ctrl+y)

Usage

Initial Setup

• Create H2 sections in your MD file
  • IMPORTANT: Make sure to create a "Done" section
  • Just include the word "done", and only have 1
• Run VSCode command: Todo Sidebar: Open Markdown File
  • Select your markdown file
  • Note: you can also use a relative path to the workspace. (e.g. ./TODO.md)
• Toggle VSCode Secondary Sidebar (CTRL + ALT + B) (or CMD + ALT + B on Mac)
  • Drag the Todo Sidebar icon from the left bar to the right (see gif)

Using it

• Click the + to add a task, or the arrow to open in the editor
• Drag tasks between columns, check/uncheck to toggle status
• Right-click a task to move it to any section
• Check the boxes to mark tasks as done

Demo

https://github.com/user-attachments/assets/0445ddbf-397e-44e0-82cc-05b51b88b549

Configuration

You can customize the behavior by adding settings to your workspace's .vscode/settings.json:

{
  "todoSidebar.activeFile": "./TODO.md",
  "todoSidebar.onDoneAction": "move",
  "todoSidebar.hiddenSections": ["Done", "Hidden*"]
}

Available Settings

• todoSidebar.activeFile (string): Path to the currently active markdown file for the todo board. Can be relative (e.g., ./TODO.md) or absolute.

• todoSidebar.onDoneAction (string: "move" | "delete"): Action to perform when a top-level task is marked as complete. Defaults to "move".

  • "move" (default): Toggles checkbox to [x] and moves task to Done column
  • "delete": Immediately deletes task and all its children. No confirmation dialog - use Ctrl+Z (Cmd+Z on Mac) to undo if needed.
  • Note: Only affects top-level tasks. Subtasks always just toggle in place.

• todoSidebar.hiddenSections (array of strings): List of section names (H2 headers) to hide from the board view. Defaults to [] (empty array, all sections visible).

  • Example: ["Done", "Archive"] will hide sections titled "Done" and "Archive"
  • Supports wildcards: ["*Done*", "Archive"] will hide any section with "Done" in the name
  • Supports regex patterns: ["^Done$", "Archive.*"] (case-insensitive)
  • Section names are case-insensitive
  • Hidden sections remain in your markdown file and are only hidden from the board view
  • Quick hide: Right-click any section header to hide it instantly

TODO

• H3 sub categories
• More MD features:
  • regular bullet items
    • not checkboxes
    • "tied" to the parent, so when the parent moves these move too
    • can be dragged & edited similar to subtask behavior
    • can be on all 3 task levels
  • edit section titles
  • edit section descriptions
  • add new section w/ + on title
  • edit title
• Cleanup main file - split into:
  • filesystem
  • parser + file parsing code is regex hell
  • handlers
  • existing provider lifecycle

Markdown Format

# Board Title

> Optional description

## In Progress `

- [ ] Task 1
- [ ] Task 2
  - [ ] Subtask 1
  - [ ] Subtask 2

## Backlog

> This is a sub-description

- [ ] Task 3
  - [ ] Subtask 1
  - [ ] Subtask 2
- [ ] Task 4

## Done

- [x] Finished item
- [x] Another thing
  - [x] Sub other thing

Building

Local

• npm install
• npm watch
  • Then, hit F5 to debug.

Publishing

• Confirm everything is working & compiles
• Update version in package.json (e.g. "0.0.3")
• vsce package
• export v='v0.0.4'; git add -A; git commit -m "$v release"; git push; git tag $v; git push origin $v;
  • PS: $v = "v0.0.4"; git add -A; git commit -m "$v release"; git push; git tag $v; git push origin $v
• Github Actions are configured to build & publish when a new tag is created, so on sucess it will auto publish
  • These use auth token repo secrets to push to both extension galleries.

LICENSE

Apache v2