Miral

These are the different types of post-it's. Notice the shadows!
Different Geo-metric shapes
This is editing a text box
Bringing it all together, zoomed out.
This is an example of screens on Miral

Inspiration

As the COVID pandemic gripped the world and remote working became the new normal I began to see a lot of people I knew become dependent on digital whiteboarding tools like Miro and Mural.

As I began to use them more and more for client workshops/documents I noticed a number of things began to bug me. Most importantly both tools had proprietary data formats and I couldn’t take a board from one and load it into the other. Also the rendering engines I found to be unreliable and over-complicated, I hated that I was forced to store my (potentially sensitive) client data on their cloud storage (with their questionable security and backgrounds)- some clients even refused to use it for this reason and finally, there was just too much bloat, the tools were trying to do everything (video conferencing, etc.) I searched for a good open-source alternative but came up empty-handed, so I decided to build my own.

What it does

Miral is an embeddable whiteboard that focusses on the tools needed by workshop facilitators. As such it offers : *Infinite zoomable working canvas *Fully formattable geo-metric shapes (rectangle, circle, triangle) *Skeuomorphic formattable post-it notes *Formattable text areas *Customisable lines and freehand drawing tool *Embeddable images *Undo & redo *Saveable

How I built it

All existing solutions seemed to rely on either DOM manipulation or canvas, Miro for example always makes my laptop fan go crazy and get really hot if I leave the tab open too long. I wanted to make sure, Miral was performant and not resource-heavy, so I decided to use browser native SVG to do the rendering it turned out to be a great choice, coupled with using react and the virtual dom as a control plane to manipulate and manage events, the two came together in a really elegant way.

Challenges I ran into

The sheer amount of features present that needed to be built, was the biggest problem. Then creating an architecture that allowed for a decentralised approach that enabled putting the functional logic as close to the components as possible. Getting the resizing, selection and interaction events all working together in a harmonious non-spaghetti way was super hard.

Accomplishments that I'm proud of

Getting the undo & redo feature working was fun, as was getting the smooth freehand line drawing, oh and getting the drop shadows right on the post-its was also really satisfying. Overall, that so much is possible in such a short timeframe and that the look and feel and performance stand-up quite well.

What I learned

A ton about SVG, some of the newer react feature and how to get Jest working properly.

What's next for Miral

There's a long long backlog still of features to replicate but overall the big ones I'm looking forward too are :

*Multi-user updates & cursors *Slides (navigatable & presentable) *Iframe & other integrations (e.g. youtube) *Beautiful timers *Voting and quizzes *Export to image *Import PDF *Import from Miro *Import from Mural