Outliners are a great way to structure our ideas and findings into hierarchical notebooks. Trello comments are great to keep a living history of each card, and Markdown formatting makes it possible to give some structure to those notes. What if we could have the benefits of outliners while editing Trello comments?

What it does

It allows to edit any Trello comment using a outliner, instead of Trello's built-in markdown editor.

This gives several benefits:

  • Increased focus while editing a comment, because the editor shows up in a separate browser tab, allowing to close the Trello board's tab (to avoid distractions)
  • WYSIWYG (what you see is what you get) Markdown editing
  • Manipulate the structure of bullet points and sub-bullet points easily, using TAB and shift-TAB key strokes
  • The editor will remind you to save your changes, and prevent accidental cancellation.

How I built it

I used and the "Card Snoozer" example provided by Trello as a starting point, then incrementally added my own features, starting with the core ones: listing comments, loading a comment, saving a comment from another browser tab, then integrating Markdown editing.

Challenges I ran into

The most tricky part was to figure out how to make Trello API calls the right way, and make sure to handle failures cases. For example, the API to update a comment for not easy to use (it's called "activities"), and I discovered that I could send my comment data in the body of my POST request, instead of query strings (as it was specified in Trello's documentation). Also, Trello's API documentation changed its layout in the middle of my development, which was a bit confusing!

Accomplishments that I'm proud of

I had already made an add-on for Trello, but it was made as an extension for Google Chrome. This is the first time that I develop a proper Trello Power-up!

What I learned

Glitch is a very efficient (and cool) way to develop a power-up for Trello!

What's next

I'm thinking of ways to integrate the advanced editing features right into the Trello card UI.

Share this project: