Quick Sketch for Confluence

You can edit existing attachments or create new one...
...or you can add macro to add editable sketches
There's plenty of tools to choose from: from sketching and annotating to diagram tools
When uploading you can overwrite existing attachment or create new one and automatically add it to the page
You can choose between inline and block macro...
...for different layout options
You can access attachment editor using "More actions" menu on page

Inspiration

Quick Sketch for Confluence was inspired mainly by my personal use cases while working with Confluence and other Atlassian products. It just helps with my workflow for quickly prototyping or drawing ideas that I could forget otherwise.

It's also continuation of my older Forge app, Quick Sketch for Jira, which is also quite helpful in my daily tasks. So why not check if similar idea could be implemented in Confluence environment? Turns out it can, and with many more features and improvements it integrates with Confluence seamlessly!

What it does

It allows you to create and edit image attachments on your Confluence pages. It also provides macros, so you can add editable images directly when you editing page. This is especially useful when you constantly prototyping or brainstorming ideas with your team.

It's also ideal for annotating text on images, working with diagrams, filling forms or signing image documents - all of this directly from any Confluence page!

How we built it

App is built entirely in Forge using CustomUI on Content Action and Macro modules. Additionally I was able to design app around existing Confluence page storage entities, so all the data is stored entirely on confluence page (attachments and macro configuration), so it doesn't need any external connection/storage permissions.

At first I've tried to build app around macro module with addition of Forge storage. Due to its limitations (at the time) I was forced to change this concept and find different way to implement my ideas. After some research I've decided to use Content Action module which worked great with concept of Editor that could create and edit attachments without editing whole page. At the end I was also able to implement editor in a Macro Module in a proper way, using internal macro storage. But more on that in the next paragraph...

Challenges we ran into

The main blocker was macro module. When I've started developing Quick Sketch there was no option to add configuration for macro using CustomUI. This meant, that I wasn't able to use my image editor when editing macro - so Quick Sketch was unusable in them. Bummer.

Luckily, couple days before deadline Forge team added editable macros with CustomUI (hooray!). This was an close call, and fortunately I was able to implement this functionality just in time!

Accomplishments that we're proud of & what we learned

I've made this app in time and implemented all the features that I wanted... with more features than I've expected at the start of this project! Integration with Confluence and macro modules with text on pages feels seamless. With new implementation of Forge macro module I was able to implement Quick Sketch editor with all the features like in other built-in or Connect macros. This was a great way to learn more about implementing better UI and UX.

This was also my first experience as developer with Confluence, but thanks to Forge it was pretty pleasant and straightforward.

What's next for Quick Sketch for Confluence

More editing tools
Support for more attachments formats
Maybe in future there will be some cool new Confluence modules that I could use to improve editing process