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.

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.

Bored with perfect card alignment? Try out this add-on to add more fun to your boards! The script makes cards look even more like real-life sticky notes.

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

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

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.

After activating the Task Done script, a new option: “Task Done” will be displayed in the context menu of a card.
It allows you to quickly move the card to the last column of your Kanban board.

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!

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.

If your mind is set on making the board appear evened-out and super-neat, then use the Fixed Cards Height script. It blocks the auto-scaling feature of cards and makes them appear next to each other, perfectly aligned.
You can choose from the following card heights: small, medium, large, XL.

Please note, this script is incompatible with these card design altering Power-Ups: Interactive Checklists, Card Covers, and Task Summary.

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.

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).

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

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

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.

If you’re finding yourself often making changes to your board configuration - editing Card Type, Template, 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
• W - for Workflow editor
• P - for Power-Ups
• A - for Process Automation

Note, the script does not include a menu option for the Board Background setting.

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.

Tasks with checklist items in them show a numerical completed/total items 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.

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.

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!

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.

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!

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.

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.

The No archive script hides the “Archive” option from the tasks’ context menu for all users except for account admins and owners. It’s a good way to ensure that only high-access-level team members get to say which tasks are ready to be put away.

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.
• /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.