Developer Tools

The Developer Tools Power-Up offers a wide range of board customization using own scripts and stylesheets. All you need are great ideas and basic knowledge of Javascript and CSS. All of the currently available Developer Tools can be enabled from board Settings - Power-Ups - Developer Tools.
Note, that Developer Tools are available to users of account owner or admin privilege.

How to use Developer Tools?

With the Developer Tools Power-Up you can add own custom scripts and stylesheets to the board. All you need is some basic Javascript and/or CSS knowledge and awesome ideas ;)

A collection of currently available, free scripts can be found in our GitHub repository.
Try out Kanban Tool’s vast customization possibilities.

Larger Font on Cards

Enable this script if you want to increase the default font size on closed cards.
Use medium-font.css to make the font slightly bigger, and large-font.css to make it extra large.

Another way to increase the card fonts is through the board zoom, which is part of the Board Background setting.

Delete All

This script adds a delete all option to the column context menu - available when right-clicking an empty space within a column.
Delete All Developer Tools Script

Please use with care, as deleted tasks can only be recovered for a little while since deletion, and the recovery process is somewhat complex.

Save and Done - send a task straight to "Done"

Application of the Save and Done script adds a new option to the open task view.
If you click the new Move to done button, the card will be saved and moved to the last column of the board.

Try it out, especially if you often work on tasks that need not go through the entire board of process columns. Move to Done Developer Tools Script

Change Column

This script will help you transfer tasks between columns even faster - thanks to an additional menu item, which lets you move the card directly to any of the available board columns. It’s a brilliant time-saver! Change Column Developer Tools Script

Cycle Time

With this script, the time elapsed from creation to present will be displayed on each card, in the top left corner.
Great for an at a glance view of your process efficiency. Cycle Time Developer Tools Script

Order Highlight - make sure task priorities are being honored

Need to ensure that tasks are being worked on in the exact order of their priorities?
This script will add a red highlight to columns, in which the task order does not match the correct order of task priorities, clearly warning you that priorities are being ignored.

The order recognized as correct is a high priority, normal priority (or no priority assigned), low priority. Incorrect Priority Order Highlight

Swimlane Auto-Assign

In case you’ve decided, that each of your board’s swimlanes (rows) should hold tasks specific to a given user, you can set it up, so that when a card is moved to a specific swimlane, it will automatically be assigned to a given person. An email notification will also be generated for each of these auto assignments.

To make this work, you need to add a team member’s name to the name of a swimlane and copy this script’s link to your board’s Developer Tools window (as you do with all Developer Tools). Swimlane Auto-Assign

In case you need help with editing your board, please visit this page.

User Avatars

This Developer Tools script allows you to show team members’ avatars on card fronts. User Avatars

To use it, you first need to have your team photos available online - URLs to these images need to be defined in the script. For best results, please add images for all of the team members. Leaving someone out will result in a broken image preview on cards assigned to them.

Once you have the images ready, copy and edit the code provided on this page and paste it in your Developer Tools Javascript highlighted slot.

How to edit a board faster? Show All Settings script.

If you’re finding yourself often making changes to your board configuration - editing Card Type, Template, Background, changing the workflow layout, adding Power-Ups and tweaking Process Automation - you may speed this up for yourself, by bringing direct links to each of these options to the board view.

The Show all Settings script will add these options next to the Tools menu:

  • T - for Card Type
  • C - for Card Template
  • B - for Board Background
  • W - for Workflow editor
  • P - for Power-Ups
  • A - for Process Automation

How to edit a board faster?

Can I have opaque cards?

Bored with the generic Kanban Tool card looks? The Card opacity script will make your closed cards appear semi-transparent, giving the board an overall lighter feel. Looks best when combined with the Lite board Theme.

Card opacity

I need a distinct visual clue on checklist completion progress

Tasks with checklist items in them show a numerical completed/total items count:

Checklist item count

With the Checklist progress bar script, you will see an additional white progress bar on your closed cards, showing what percentage of checklist items have been completed.

Checklist progress bar

Can I show images for each column?

If your team will find images on each column to help with visually identifying the workflow stages, take a little moment to make this possible.

First, you will need to add the images as attachments to any card on the board. Then, click on the /scripts/column-images/column-images.js link in our Developer Tools repository and copy the Javascript to a notepad - you will need to edit it.

The required details to fill in are:

  • the URLs of the attached files with your images
  • the exact names of your columns, that each image should show for.

If your board has more than 3 columns, feel free to add more lines to the initial part of the script.

Once ready, copy-paste the script to Developer Tools, under the Javascript slot, and save changes.

Column images

If your board has images for the child columns too, then to collapse them correctly, you’ll need to first collapse the child column, and then the parent column.

Looking to show images on card fronts too? Check out the Card Covers Power-Up!

Can I increase the size of the Interactive Checklist font?

The Large interactive checklist script lets you do just that. Add it in, and the checklists shown on your closed cards will get a font increase.

Large Interactive Checklists

If you like, you can choose a different font size by clicking the /scripts/large-interactive-checklist/large-interactive-checklist.css link in our Github repository, and editing the px font-size value, and copy-pasting the CSS directly under the CSS slot in the board’s Developer Tools window.

In case you’d rather increase all of the board elements at once, consider giving the board zoom a try!

The card colors are too bright for me - can I change that?

It’s possible to decrease the saturation of your card colors with the Card saturation script. You can also customize the saturation, by clicking the /scripts/card-saturation/card-saturation.css link and changing the 0.8 saturate value to something else.

Card saturation

A very simple way to keeping the board’s look more toned-down is to switch the card type colors to grays and white only - that too can look rather nice.

Is it possible to decrease the height of the swimlanes?

The regular, minimum height of swimlanes is 3-cards tall. If your board has many swimlanes, or if you want to make the board less long for any other reason - you can, with the Shorter swimlanes script.

There are two options to choose from:

  • /scripts/shorter-swimlanes/shorter-empty-swimlanes.css
    This script will change the height of empty swimlanes, while adjusting all other lanes to the number of cards that are in them. Shorter swimlanes - flexible
  • /scripts/shorter-swimlanes/shorter-swimlanes.css
    This one will shorten all swimlanes of the board, and make them scrollable.
    Please note, this variant is only supported in Microsoft Edge and Google Chrome. Shorter swimlanes - fixed

Can I completely disable task priorities?

Since task priority is a value that most Kanban Tool users apply to their cards, we make the priority assignment available from 2 spots: from either the open card view or from the card’s context menu. No task priority

If you don’t want the board to support priorities at all you’ll need to:

  • disable Priority in the Card Template settings and
  • apply the No priority custom script, which will remove the card context menu option.

I need bigger column headers

You can increase the font of your column names with the Large column headers script. It makes the font proportionally larger, even when you zoom in on the entire board view.

Large board headers

Column Background

This script lets you fill an entire column - or swimlane - with color, highlighting the stage throughout its length.

Column Background

You need to modify the script so that the column and/or swimlane names match those used on your board.

Time tasks only when they're open on your screen

The Time Tracking automatically measures time on a task moved to an “In Progress” Lane Type and pauses when it moves to any other column type.

If you’d prefer for the system to record working time when you’re viewing an open task (have the card’s full view expanded) this is possible. Use the Task opening/closing starts/stops the timer script, and have the timer start when you open a task and pause when you close it.

Visual clues on task dependencies

Task dependencies show up in an open task view as a list. If you’d like to get visual hints on the board itself, showing which tasks depend on a given parent task, use the Task dependencies highlight Developer Tools script.

The parent task will keep the regular highlight style, but the dependent items will get an additional highlight, in a different color.

Visual clues on task dependencies