Kanban Board

A kanban board is a wall of sticky notes with rules. This one puts that wall inside a web page: columns you name yourself, cards you drag from one to the next, a limit on how much may sit in any column at once, and a small pile of detail on each card for the things a sticky note never had room for. It saves itself as you work, it belongs to this browser and no server, and it hands the whole thing back as a file whenever you ask.

What the columns are for

The board opens with three columns: To do, Doing, Done. That is the shortest arrangement that still says something useful, and plenty of people never change it. The point of the layout is that work travels in one direction. A card starts on the left, moves right as it progresses, and stops at the far edge when it is finished. Nothing else about the board needs explaining once someone sees that.

The Edit button on a column heading opens its settings. You can rename it, give it a work-in-progress limit, choose its position, and tick a box marking it as a finished column. The little arrows either side of Edit shove the whole column one place left or right without opening anything, which is faster when you just want to reorder.

Adding columns is where boards start to reflect real life. A team that hands work to a reviewer wants a Review column. A workshop that waits on parts wants a Waiting column, because a job blocked on a supplier is not the same as a job nobody has picked up. A freelancer chasing payment wants an Invoiced column at the end. Twelve columns is the ceiling, which is far more than any board should need.

Be sparing anyway. Every column you add is another decision each card has to pass through, and a board with nine columns takes longer to read than the work takes to do. If two columns always contain the same three cards, they are one column.

The work-in-progress limit, and why it nags

The limit is the one feature that separates a kanban board from a list with headings. Set a number on a column and the count in its corner starts showing as a fraction: 2 / 3 while there is room, then 3 / 3 in amber when the column is full, then 4 / 3 in red with a line of text underneath saying how far over it is and suggesting you finish something before starting more.

It does not stop you. There is no locked column and no refused card. That is a deliberate choice: a tool that blocked you would be switched off within a week, usually on the exact day the blocking mattered most. A tool that goes red and stays red is harder to argue with, because everyone looking at the board can see it.

The number to choose is smaller than feels comfortable. For a Doing column, roughly one card per person is right, or one and a bit if people genuinely juggle. Three people, limit of three or four. A limit of ten on a team of three is not a limit; it is a decoration that will never once trigger.

The reason to hold to it has nothing to do with tidiness. Work that is started and not finished is work nobody is getting the benefit of, and every extra thing in flight makes each of them slower, because switching between them costs time that never shows up on any card. Six half-done jobs help nobody. Two finished ones help two people.

Why the limit ignores your filter

The count on a column is always taken over every card in it, never over the cards you can currently see. Type in the search box, pick a label, filter down to one person's work, and the fraction on each column does not move. What changes is a quieter line saying Showing 2 of 7, so you know the view is partial.

This matters more than it sounds. The first version counted what was on screen, and the effect was awful: filter the board to your own name, watch every column go green, and get a lovely feeling of headroom that was pure fiction. A limit that falls silent whenever you narrow the view is worse than having no limit at all, because it reads as permission.

The same reasoning applies to keyboard moves. When you press an arrow key to send a card into the next column, it lands in the position it held in its old column, counted against every card there rather than only the visible ones. Otherwise a filtered card would leapfrog things you had hidden, and the order you carefully set would rearrange itself behind your back.

What goes on a card

Click any card, or press Enter while it is focused, and it opens for editing. Only the title is required. A card that says Ring the plumber is a complete card and needs nothing else.

The Notes box takes as many lines as you like, but only the first line appears on the board itself, trimmed to fit. Treat the first line as the summary and put the detail underneath. Anyone glancing at the board sees the gist; anyone opening the card sees the rest.

The colour label is one of eight, and it paints the stripe down the left edge of the card. Use labels for the kind of work rather than its urgency. Urgency changes daily and you will stop maintaining it by Thursday, whereas bug, admin, client work, or waiting on someone else stays true for the life of the card and tells you something real at a distance.

The assignee is a free-text name. There is no user list to set up and nobody to invite, so initials work as well as full names. Once a name has been typed once it appears as a suggestion the next time, which is enough to keep the spelling consistent, and it feeds the Assignee filter menu automatically.

The due date is a proper date picker, and how the date is written on the board is your choice. The Date format menu at the top offers day-first, month-first, the plain international form, and a written-out short month. Pick whichever your part of the world reads without hesitating; the CSV export carries both your format and the unambiguous one, so a spreadsheet gets a date it can sort.

Checklists, and the bar on the front of the card

Each card can hold up to forty checklist steps. Type one in the box at the bottom of the card editor, press Enter, and carry straight on typing the next. Tick them off as you go, edit the wording in place, or remove one with the cross beside it.

The board shows the result as a small counter and a bar: 2/4 with the bar two-fifths filled, turning green when everything is ticked. That is the most useful thing on a card at a glance, because it separates a job nobody has touched from one that is nearly out the door, without either of them having to move columns.

The natural use is a card that has a sequence baked into it. Moving a shop to a new host means copying the database, testing checkout somewhere safe, switching the address over, then cancelling the old plan, in that order and not another. Those four steps are one job, so they belong on one card, not four cards racing each other across the board.

There is a happy side effect. A card you put down three weeks ago and picked up again this morning is instantly readable: the ticks tell you exactly where you stopped, which is a question notes almost never answer well.

Overdue, and the column that stops the shouting

A card whose due date has passed is drawn with a red tint and its date reads Overdue rather than Due. The running summary under the controls counts them, so you can see at a glance whether anything has slipped without hunting through columns.

There is one exception, and it is the reason the column settings have a tick box. Mark a column as one whose cards count as finished, and nothing in it is ever flagged overdue. Without that, work you completed in March would still be glowing red in July, and after a fortnight of false alarms nobody looks at the colour any more.

So set that box on your Done column, or on Invoiced, or on Shipped, or whatever your last column is called. The example board has it set on Done already. If old finished work is being flagged, the box is the first thing to check.

Three ways to move a card

Dragging is the obvious one. Pick a card up and drop it in another column, or higher or lower within its own, and it lands where you let go. The column you are hovering over is outlined so there is no ambiguity about where the card will end up.

The keyboard does the same job without a mouse. Tab until a card has focus, then the left and right arrows send it to the neighbouring column, and up and down shuffle it within the one it is in. Enter opens it for editing, Delete removes it after a confirmation. The card keeps focus after every move, so you can walk something across four columns in four keypresses. Each card also carries a spoken description of its column, assignee, due date and checklist progress for anyone using a screen reader.

The third way is inside the card. Open it and change the Column dropdown. That exists mainly for touchscreens, where dragging across a horizontally scrolling strip is fiddly on a good day and impossible on some mobile browsers. It does exactly what a drag does.

Underneath, the order of the cards in a column is a number stored on each card rather than the order they happen to appear in the page. That sounds like a detail and is not. If the order were read back out of the page after a drop, every card hidden by a filter would be quietly shunted to the bottom of its column, and you would only find out later.

Finding things on a busy board

The search box looks across four things at once: card titles, the notes underneath them, assignee names, and every checklist step. That last one is the surprise. Searching for a supplier's name will surface a card whose title never mentions them but whose third checklist step does.

The Label and Assignee menus filter to one value at a time. Both offer an extra choice at the top for the cards that have nothing set, which is the fastest way to find work nobody has claimed or cards that never got categorised. Both menus rebuild themselves from what is actually on the board, so a label nobody is using does not clutter the list.

Search and the two menus stack, so you can look for everything of Sam's carrying a red label with the word invoice in it. Clear filters puts everything back in one press. If a column ends up with nothing matching, it says so rather than looking empty.

Several boards on one page

The Board dropdown holds up to thirty separate boards, each with its own columns and cards, and switching between them is instant. New makes an empty one with the standard three columns, Rename retitles the current one, and Delete board removes it after telling you how many cards go with it.

One board per project is the usual arrangement, and it works because it keeps each board short enough to read in one look. A single board holding a house renovation, a work project and a reading list is a board you stop opening.

Switching boards clears the label and assignee filters, since the names on one board rarely mean anything on another. The search text stays, which is occasionally useful when you are hunting the same thing across two projects.

Getting the board out of the browser

There are four exports, and they exist because they answer four different questions.

Board as JSON writes the current board to a file, complete with every card, note, label, date and checklist step. All boards as JSON does the same for everything you have. This is the format the Import button reads back, so it is your backup, and it is the only way to carry a board to another computer or another browser.

Markdown is for reading. Each column becomes a heading with its card count and limit, each card becomes a checkbox line with its label, assignee and due date, and notes and checklist steps sit indented underneath. It pastes into a wiki, a message or a plain notes app and still looks like a board. There is a Copy Markdown button too, for when you are pasting straight into something rather than saving a file.

CSV is for counting. One row per card, with the column, position, label, assignee, due date in both your chosen format and the sortable one, whether it is overdue, and how many checklist steps are done out of how many. Open it in a spreadsheet and you can total up whose queue is longest or how many cards are late.

Print snapshot is for the wall. Printing lays the columns out one under another instead of side by side, drops the controls and the toolbars, and puts the board name and today's date at the top. If a filter is active, the heading says so, so nobody mistakes a partial print for the whole board.

Importing, and what the importer will forgive

Import JSON reads a file back in as a new board, leaving whatever you already had untouched. It accepts a single board, a file of several boards, or a bare board object, so an export from any of the three JSON buttons goes back in without fuss.

It is deliberately forgiving about the contents. A card with no title becomes Untitled card rather than being thrown away. A due date that is not really a date is dropped and the rest of the card survives. Checklist steps written as plain strings are accepted alongside the proper form. A card pointing at a column that does not exist lands in the first column instead of disappearing. Duplicate column identifiers are renumbered, and the cards that referred to them are pointed at the right one.

What it is not is a converter for other kanban products. If a file happens to contain a list of columns and a list of cards naming their column, it will probably come through. If it is some other application's own format, you will get a board with the right shape and the wrong contents, and you are better off retyping.

Anything absurd is simply cut off: a file claiming eight hundred cards keeps the first six hundred, and one claiming forty columns keeps the first twelve.

A board through one week

Monday. A shop is redoing its website. The board is named for the project, Doing is given a limit of two because there are two people, and Done is ticked as a finished column. Five cards go into To do, each with an owner and a rough date, and the one about moving the shop to a new host gets a four-step checklist because the order of those steps matters.

Tuesday. Two cards are dragged into Doing and the count reads 2 / 2. A third is dragged over anyway, the count turns red at 3 / 2, and the line underneath says one over the limit of two. The third card goes back to To do, which is the whole mechanism working exactly as intended.

Thursday. The host migration card has two of its four steps ticked and the bar on the front of it is half full. A card about the contact form is now past its date and has gone red. Someone types the word form in the search box, finds it, opens it and adds a note about which phone it fails on.

Friday. The finished cards are dragged into Done, where their old due dates stop being flagged. Press Print snapshot and the whole thing goes on a sheet of paper for the wall. Press Board as JSON and the same thing goes into a file, which lands in the project folder next to everything else.

Where the board actually lives

Every change writes itself to this browser's own storage the moment you make it. There is no save button and nothing to remember. Close the tab mid-sentence and the card is still there when you come back.

That storage is tied to one browser on one device. The board will not appear on your phone, it will not follow you to a different browser on the same machine, and clearing site data or working in a private window will wipe it. None of that is a bug; it is the direct consequence of there being no account and no server. Export the JSON if you want the board somewhere else, and export it before you clear anything.

Start over wipes every board on this device and brings the example board back, after asking first. It is there for when a board has become a mess worth abandoning, and it is the only button that destroys more than one thing at a time.

Nothing you type is sent anywhere. There is nowhere for it to be sent to: the page makes no network requests at all once it has loaded, which you can confirm by pulling the plug and carrying on working. That is also the reason there is no live sharing. Handing a board to a colleague means handing them a file, and the same design that makes that slightly inconvenient is what guarantees nobody else can read what is on your board.