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 Developer Tools Power-Up you can add your 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.
Create your own scripts for Kanban Tool to try out unlimited customization possibilities.

High Contrast

This is a good solution for when you’re displaying Kanban Tool on a large TV screen. The script adds an option to the Tools menu, which changes the default colors into high-contrast ones.

You may also be interested in checking out the Dark Theme in the Custom Theme Power-Up. High Contrast Developer Tools Script

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.
Large Font Script

Another way to increase the card fonts is available with the Custom Theme Power-Up.

Card Tilt

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. Card Tilt Developer Tools Script

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.

Move 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

Task Done

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. Task Done Button Developer Tools Script

Change Column

This script will help you move tasks between columns even faster - thanks to an additional menu item, which offers moving the card directly to any of the available board columns. As far as process improvements go - this is 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

Fixed Card Height

If your mind is set on making the board appear evened-out and super-neat, than 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. Fixed Card Height Script

Order Highlight

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

Add the Show all Settings link:
/scripts/show-all-settings/show-all-settings.js
to Developer Tools Power-Up, to have new options next to Tools menu.

The new menu options it brings are:

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

How to edit a board faster?

Additional keyboard shortcuts

A list of keyboard shortcuts that Kanban Tool supports by default can be found under a board’s Tools – Keyboard shortcuts menu option. Keyboard shortcuts

Add the
/scripts/keyboard-shortcuts/keyboard-shortcuts.js
link to Developer Tools to enable the following extra keyboard shortcuts:

  • B - to reveal boards express menu dropdown (next to home).
    Once the boards dropdown is visible, you can navigate there by hitting tab a fair few times
  • T - to reveal the Tools menu
  • S - to go to Settings
  • H - to navigate to the Dashboard (home icon).