Hacking Trello With Custom JavaScript

Dave Yarwood
Dave Yarwood
Hacking Trello With Custom JavaScript

Trello Is Great

Trello has become an important part of how we collaborate at Kevel. We are big fans of the Kanban process* as a way to track the work we need to do and make it more manageable. We've found that the Kanban system is a good way to coordinate working on tasks between teams and individual Kevelers. For the most part, each column on our board is owned by a particular team, and it is the responsibility of that team to move cards in their column over to the right.

Admittedly, we use a slight variation on the Kanban process where cards can occasionally move backwards. Hopefully this does not offend any Kanban purists who may be reading.

For example, when a developer completes work on a task and pushes the change to a staging environment, the card makes its way into the Acceptance Testing column, at which point it becomes the QA team's responsibility to complete QA and keep that card moving to the right.


As a developer, I like the Kanban workflow because it is easy for anyone to create a task card on-the-fly for any idea that may come up while working on a separate task. If we are pair-programming to implement a new feature and we discover an unrelated bug, we can take a minute to create a Trello card and put it in our To Do column. This way, we can be sure that when we find a bug, there is a process for prioritizing and fixing it instead of just saying "Oh, we should probably fix that" and then probably forgetting about the bug shortly afterward.

Another thing I enjoy about our Kanban setup is that there are only a small number of columns that concern me, which fills me with a sense of purpose.

Cards with development work to be done come in from the left, and I feel motivated to do the work necessary to move them onward to the right.

One nice thing about Trello's UI is that it provides a search bar and filters that make it easy to focus on the cards that are relevant to my workflow.


As we have scaled as a company, we have started to find it more and more difficult to find the right Trello setup for our team. It is not always clear how we can best arrange our Trello boards, columns, and cards.

We use Trello to manage nearly every aspect of our operations, including product design work, support tickets, quality assurance, and even our interview and hiring process. Practically (maybe even literally?) everyone in the company uses Trello on a regular basis.

Our engineering team is split into 3 smaller teams: the UI/API team, the ad serving engines team, and the reporting system team. In addition to the engineers, there are other participants in the Trello process, such as our support staff, QA engineers, and Kevel's VPs of product and customer success.

Our Trello workflow started out minimal, with 5 general columns ranging from "To Crush" to "CRUSHED!" and each column was general enough in purpose that it was relevant to everybody. However, with time, our workflow evolved to the point where we now have 19 columns, and each column is focused on an aspect of our process that potentially only a handful of people care about. In each Keveler's view of the board, the remaining columns are not relevant to his/her workflow, and are typically regarded as Kanban noise.

We experimented with trying to reduce the noise by pulling out handfuls of related columns into separate Trello boards, but that got confusing; it ended up being harder to visualize the "big picture" than it was with the single, monolithic Kanban board that we had. So, we were forced to go back to having a single Kanban board shared by everyone in the company, and for a long while, that was "good enough."

...until now.

How We Improved Our Trello Experience With This One Weird Trick

After getting annoyed one too many times with how difficult it was to find a particular card I happened to be working on, it occurred to me that I could customize my experience by writing a little JavaScript code and having it run in my browser whenever I go to the Kevel Trello board in my browser.

This is possible thanks to a Google Chrome extension called Custom JavaScript for websites.

This handy little extension allows you to inject your own personal JavaScript to modify the appearance and behavior of the websites you visit frequently.

In this case, I wrote some JavaScript that:

  • Runs whenever the domain is https://trello.com.
  • Checks to see if the Trello board I'm looking at is the Kevel Kanban board.
  • Hides all the columns I don't care about.
  • Defines a backtick (`) keyboard shortcut which toggles between viewing only the columns I care about vs. all of the columns.


With this JavaScript set up to run automatically whenever we navigate to any page beginning with "https://trello.com/" in Chrome, our monolithic Trello board experience has become a great deal more pleasant. By default, we only see the columns that we use. From left to right, this is what I've configured the script to show me:

  • My team's "Crushable" (i.e. "to do") column.
  • My team's "Crushing" (i.e. "in progress") column.
  • The cross-team "Needs Code Review" column.
  • The cross-team "Needs Staging Deploy" column.
  • The cross-team "Needs Production Deploy" column.
  • The cross-team "Crushed" (i.e. "done") column.

My "blind spots" -- the columns that I choose not to see -- are:

  • The pre-development blind spot, which includes: (a) Our backlog. (b) The spec work that needs to take place before a task can be considered "crushable." For example, a development task might need a set of acceptance criteria before we are able to start working on it.
  • The QA blind spot.
  • The post-development blind spot, which includes: (a) Enablement tasks, such as updating documentation. (b) Product sign-off (one layer of assurance that a task is "done done") (c) Support sign-off (another such layer)

Managing these blind spots is trivial. Most of the time, we don't need to look at them at all, because we have a process that allows us to focus on only the columns that we interact with directly.

For example, after we complete work on a task and deploy our changes to a staging environment, my team moves the card from "Needs Staging Deploy" into the (hidden) column "Acceptance Testing" for QA testing. We are then free to forget that that card exists until it either comes back to us for additional development or it passes QA and moves on to the "Needs Production Deploy" column.

If we ever find ourselves wanting to see what's going on in the other columns (e.g. "Do we have any cards in QA right now?"), we can press ` and see all of the columns that are usually hidden. When we're done, we can press ` again and go back to focusing on our part of the board.

Did I mention that Trello is great?

For added convenience, I like to use a couple of built-in Trello keyboard shortcuts:

  • Pressing Q toggles on/off a filter that shows only the cards assigned to me.

I keep this on most of the time, to keep things super minimal. At times, when I'm using this filter in combination with my script, there are only 2 or 3 cards visible to me on the entire board!

  • Pressing < and > while a card is selected moves the card one column to the left or right. This includes columns that are in one of my "blind spots," which is great because I don't even have to un-hide all of the hidden columns when I'm moving a card forward into a blind spot.

    I can just press > and the card will move on to its next phase in our Kanban process.

    I have to be honest: seeing a card completely disappear when I push it forward into another team's territory is pretty satisfying.

A handful of my coworkers at Kevel have adopted my script and tailored it for their own needs, with positive results. The script is easy to customize if you have a basic understanding of JavaScript. Give it a try and see what you think!

Dave Yarwood
Dave Yarwood

Dave is a Software Engineer at Kevel, where he uses Clojure and ClojureScript to build UIs, APIs, and backend services. He is also the creator of the Alda music composition programming language.