🚀 Try it now: https://noki-maker.github.io/kanban/
A simple, self-hosted Kanban board that runs entirely in your browser — no server, no account, no data leaves your machine.
简体中文版本见 README.zh-CN.md。
- Boards, columns & tasks — full drag-and-drop support for reordering and moving.
- Markdown editing — write in Markdown with a live WYSIWYG (instant-rendering) editor and insert images right from the context menu; rendered task checkboxes follow the theme accent color.
- Theming — light / dark mode and an accent color picker with preset colors plus fully custom hex colors, persisted across visits.
- i18n — built-in Simplified Chinese / English switching (one-click toggle, persisted).
- Instant search — press
Ctrl/Cmd + Kto search boards, columns and tasks across all boards, and jump straight to the result. - Backup & migration — download a full
.zipbackup (all boards plus image attachments) and restore it anywhere. - Privacy — everything is stored locally in your browser; nothing leaves your device.
You can use the app in two ways:
- Open the built site — serve the static
dist/output (or a hosted deployment) and open it in any modern browser. - Run it locally with Vite (requires Node.js ≥ 22 and pnpm):
pnpm install
pnpm devYour board is created automatically on first launch — there is nothing to configure.
Press Ctrl/Cmd + K anywhere (or click the Search button in the board toolbar) to open the spotlight-style search panel. It searches across all boards — board names, column titles and task content:
| Key | Action |
|---|---|
↑ / ↓ |
Move through results |
Enter |
Open the selected result |
Esc / click outside |
Close the panel |
- Matching text is highlighted in each result.
- Selecting a task switches to its board and opens the task drawer; selecting a board or column jumps straight to it.
A board is a collection of columns. The board toolbar (top bar) gives you:
| Action | How |
|---|---|
| Switch board | Pick one from the dropdown on the left |
| New Board | Click New Board, enter a name, and press Enter |
| Rename | Click Rename and type a new name |
| Delete | Click Delete and confirm — removes the board and all its columns |
Your last-used board is remembered and reopened next time.
- Add a column — click Add Column, type a name, press Enter (or click away).
- Rename a column — double-click the column title and edit it.
- Reorder columns — drag a column by its header and drop it elsewhere.
- Collapse / expand — click the chevron (⌄) in the column header to toggle between the normal horizontal mode and a slim vertical strip.
- Delete a column — click the trash icon in the column header (horizontal mode only) and confirm.
- Add a task — click Add Task at the bottom of a column, type the content, press Enter (or click away).
- Edit a task — click a task card to open the task drawer, where you can rewrite it as Markdown. The name of the task's column is shown next to the Save button so you always know where you are.
- Move tasks — drag a task card and drop it anywhere: reorder within a column or move it to another column.
- Delete a task — open the task drawer and click the trash icon in the top-right corner.
Clicking a task opens a right-side drawer with a single-pane Vditor instant-rendering (IR) editor:
- WYSIWYG — the body is shown as rendered output, while the line under the cursor displays the Markdown source.
- Hidden toolbar — the conventional toolbar is hidden for a clean writing surface; right-click anywhere in the editor to bring up a context menu with bold / italic / strikethrough / link / table / task list / image, plus an emoji picker to insert symbols at the cursor. All actions keep the selection intact, and the current line's Markdown source stays visible.
- Theme aware — the editor follows the app's light / dark theme and accent color; its UI language follows the current locale. In dark mode the text and caret stay readable and rendered task checkboxes use the accent color.
Drawer shortcuts:
| Key | Action |
|---|---|
Esc |
Close the drawer |
Ctrl/Cmd + S |
Save and keep the drawer open |
Ctrl/Cmd + Enter |
Save and close the drawer |
Click Save (or press Ctrl/Cmd + Enter) to save and close; press Ctrl/Cmd + S to save without closing, or click away / press Esc to discard your changes.
Task content supports Markdown, so cards can contain formatted text:
- Headings, bold/italic/strikethrough, inline code
- Fenced code blocks with syntax highlighting (e.g.
```js) - Links, images, quotes, tables, horizontal rules
- Task lists:
- [ ] todo,- [x] done - Single line breaks render as line breaks
Raw HTML is disabled and all output is sanitized.
- Insert an image — open a task drawer, right-click in the editor and choose Image (or paste an image), then pick a file. The image is referenced in Markdown as
. - Storage — the binary is kept in your browser's IndexedDB, not embedded in the Markdown text, so the task content stays small even for large pictures.
- Rendering — images show up both in the drawer and on the task cards; they scale down to the column width instead of overflowing.
- Backup — image attachments are bundled into the Export Backup (ZIP) package and restored on import.
Since data lives in the browser (IndexedDB), use the export/import tools to back up or move your board. They live under the ⇄ (import/export) button in the board toolbar:
| Menu item | What it does |
|---|---|
| Export Backup | Downloads every board as a single .zip package (data + all image attachments) — the recommended way to back up or move your data |
| Import | Loads .zip backup files (full restore) |
Tip: export regularly — clearing your browser's site data will erase your board.
- Language — the button in the top-right corner toggles between 中文 and EN. Your choice is remembered (and so is the page title, which switches between "Kanban" and "看板").
- Theme — the same toolbar hosts a light / dark mode toggle and a color picker for the accent color. Besides the presets, you can pick any color with the system color picker or type a hex value (e.g.
#ff6b81) directly. Both are persisted as well.
- All boards, columns, tasks and image attachments are stored in your browser's IndexedDB; nothing is ever sent to a server.
- Data is tied to the browser/profile and device you use — it does not follow you across browsers or machines.
See CONTRIBUTING.md for the project structure, tech stack, available scripts, and contribution guidelines.