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!

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.

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.

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.

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.

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.

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

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.

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!

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!

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!

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.

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

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.

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

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

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.

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!

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

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.

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

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

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.

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!

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!

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.

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!

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.

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.

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

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.

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.

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!

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.

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.

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!