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!

Large Font: Increase closed cards font size

Looking to enhance your card readability and make it easier to stay productive? Enable this script to increase the default font size on your closed cards.

Use medium-font.css to make the font slightly bigger, and large-font.css to make it extra large.

Another approach would be to use the board zoom, which is part of the Board Background setting, allowing you to further boost the font size and tailor the experience to your exact needs.

Card Tilt: Give your board real-life sticky-notes look

Looking to spice up your boards and add a touch of excitement? The Card Tilt script lets you say goodbye to boring and predictable card alignment and hello to a whole new level of fun and functionality! Once activated, your cards will be transformed into lifelike sticky notes which is sure to inject some energy and creativity into your daily workflow.

Card Tilt Developer Tools Script

Delete All: Remove all cards in a column

Forget the hassle of deleting individual tasks one-by-one - if you like, this can be simplified with our Delete All Developer Tools Script.

The script adds a delete all option to your column context menu, which is easily accessible by right-clicking an empty space within a column.

Is it possible to delete all tasks in a column?

However, since deleting tasks can be a serious decision, we urge you to use this script with care. Deleted tasks can be recovered for a limited time, but the action is reserved for account admins and owners only.

For best results, when working with Kanban Tool boards, we recommend archiving, not deleting completed tasks. You’re welcome to learn more here.

Save and Done: Send a task straight to 'Done'

The Save and Done script adds a brand new option to your open task view, giving you the power to easily move a card to the last column of the board with just a single click.

If you click the new Move to done button, the card will be saved and moved to the last column of your board. No more tedious manual moves of those tasks that don’t need to go through the entire board of process columns.

Move to Done Developer Tools Script

If you happen to often work on tasks that require a quick and easy solution, this will be a perfect little tool for you.

Task Done: Move to 'Done' from the context menu

Once you activate this convenient script, you’ll gain access to a powerful new Task Done option in your tasks’ context menu, giving you the ability to effortlessly move a card to the last column of your board, regardless of its current position.

Task Done Button Developer Tools Script

This should help you keep track of progress on those tasks that don’t have to go through the entire workflow. Make work that little bit easier on yourself!

Change Column: Move directly to any work stage

Supercharge your productivity - enable an additional card context menu option for transferring tasks directly between the columns of your board!

It’s a brilliant time-saver that streamlines your workflow and frees up more time for you to focus on the things that matter most!

Change Column Developer Tools Script

Cycle Time: Show time elapsed since task creation

The Cycle Time script includes a time elapsed value on each card, making it easier than ever to track your process efficiency. With it, you’ll be able to tell - at a glance - how much time has passed from task creation to present, gaining a real-time view of your progress!

Cycle Time Developer Tools Script

Fixed Card Height: Remove empty spaces from wider columns

In columns broader than one card’s width, tasks of different heights display with extra spacing between them. If you don’t appreciate that, and would rather have a super-neat board, then please use the Fixed Cards Height script. It alters the default sizing of cards, forcing them to appear right next to one other, in perfect alignment.

Feel free to choose from the following card heights: small, medium, large, XL. Fixed Card Height

Please note, this script is incompatible with the following card design altering power-ups: Interactive Checklists, Card Covers, and Task Summary.

Order Highlight: Enforce order by priority

Need a foolproof way to ensure that your tasks are being worked on in the exact order of their priorities? Look no further than the Order Highlight script!

The add-on will add a red highlight to any columns where the task order does not match the default priorities hierarchy, giving you a visible warning that priorities are being ignored.

The order recognized by the script as correct is high priority, normal priority (or no priority assigned), and low priority.

Incorrect Priority Order Highlight

Swimlane Auto-Assign: Task assignments by swimlanes

In case you’ve decided, that each of your board’s swimlanes should hold tasks specific to a given user, you can set it up, so that when a card is moved to a particular swimlane, it will automatically be assigned to a designated team member.

Plus, an email notification will be generated for each of these auto assignments, keeping everyone on the same page and ensuring that nothing falls through the cracks.

To make it work, just add a team member’s name to the name of a swimlane and copy the script’s link to your board’s Developer Tools window (as is done with most Developer Tools). Swimlane Auto-Assign

Should you need help editing the board, please visit this page.

User Avatars: Identify assignments with user images

Looking for a simple way to personalize your team’s board? This script allows you to show team members’ avatars on card fronts, making it easier to see who is working on each task.

User Avatars

To get started, all you need is your team photos available online and their corresponding URLs defined in the script. For best results, make sure to add images for all team members to avoid any broken image previews.

Once your images are ready, simply copy and edit the code provided on this page and paste it in your Developer Tools Javascript slot. It’s that easy!

Show All Settings: Quicker access to board configuration

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?

Card Opacity: Semi-transparent tasks

Bored with the classic Kanban Tool card looks? The Card opacity script will make your closed cards appear semi-transparent, giving the board an overall lighter feel.

It looks best when combined with the board’s Lite Theme.

Card opacity

Checklist Progress Bar: Completion status display

By default, Kanban Tool task cards with checklist items show a numerical completed/total items count, or a ✔, when all items are completed:

Checklist item count

The nifty Checklist Progress Bar script adds an extra dose of motivation by showing you a white progress bar on closed cards.

Checklist progress bar

The length of the progress bar is proportional to how many of the task’s checklists have been completed, so that you get an instant visual on your progress, and can enjoy a sense of accomplishment as you move closer to completing your goals.

Column Images: Graphics in column headers

Would you like to add images to each column header to help visually identify the workflow stages? You can!

To get started, add the images you’re planning to display 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 image files
  • the exact names of the columns, that each image should show on.

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. You’re done!

Column images

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

Looking to show images on your card fronts too? Check out the Card Covers power-up!

Large Interactive Checklists: Increase to-do lists font

Need a close-up of your tasks’ to-do items? The Large interactive checklist script increases the font size of list elements shown on your closed cards.

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.

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

Card Saturation: Tone down the card colors

If you’re finding the standard card colors too bright, you can tone them down with the Card saturation script.

You’re welcome to customize the saturation level, by clicking the /scripts/card-saturation/card-saturation.css link and changing the 0.8 saturate value.

Card saturation

No Archive: Only admins can archive tasks

Need a way to ensure that only high-access-level team members get to say which tasks are ready to be put away?

The No archive script hides the “Archive” option from the tasks’ context menu for all users except for account admins and owners.

Shorter Swimlanes: Decrease default swimlane height

The regular, minimum height of swimlanes is 3-cards tall. If your board has many swimlanes making it very tall, or if you want to compress the board height for any other reason - you can, using 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 of the script is only supported in Microsoft Edge and Google Chrome. Shorter swimlanes - fixed

No Change Priority: Disable priorities in context menu

Because task priority is a value that most Kanban Tool users apply to their cards, we make the high, normal, low priority assignments available from two spots: from the open card view and from the card’s context menu. No task priority

If you don’t want the board to support priorities in any of those forms, you’re welcome to:

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

Large Board Headers: Increase column titles

Want to make the work stage names more prominent? You’re welcome to increase the font of your column names with the Large column headers script.

It makes the work stage names font proportionally larger, even when you zoom in on the entire board view!

Large board headers

Column Background: Fill entire lanes with color

Bored with your board’s looks? The Column Background 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 unique board.

The script offers you a great way to direct focus to given work stages, or to simply have more fun with the project board design!

Want more? Be sure to try out the Board Background settings with board color themes and zoom adjustments as well.

Task Opening/Closing Starts/Stops the Timer

Our Time Tracking is designed to automatically measure time on a task moved to an “In Progress” Lane Type and to pause the record when the card moves to any other column type.

If you’d prefer for the system to record working time only when you’re viewing a task - meaning, you have the card’s full view expanded - that is possible to set up.

Use the Task opening/closing starts/stops the timer script to have the timer start when you open a task, and pause when you close it. Easy!

Task Dependencies Highlight: Show dependent tasks

Items that you have connected through Task Dependencies show up in the open task view, as a list.

If, in addition to that, you’d like to get visual hints of connected work items on the board itself, showing you which cards depend on a given parent task, apply the Task dependencies highlight script.

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

Visual clues on task dependencies

This way, you’ll be one mouse click away from seeing which of your tasks make part of other work elements!