My Experiences Building a Plugin for Miro

Example of the Reciprocal.dev miro plugin showing loading a version into a frame and activating test coverage & user journey visualisations (sequence shorted to reduce GIF size)

After launching the Reciprocal.dev alpha a couple of months ago we started to think about how we’d better scale out our data-driven User Journey Mapping functionality and bring it to the tools that teams use everyday.

We decided Miro would be a good platform to run an experiment to validate this idea due to it being the tool that most companies we’ve interacted with adopted when the lockdowns in the UK happened.

It also worked in Miro’s favour that the inspiration for what would eventually become Reciprocal.dev, which started from me experimenting with building a Miro plugin to link acceptance criteria against UI elements in November 2020.

In order to conduct the experiment we agreed on the following scope:

• We’d build a plugin for Miro that users would install via the Miro Marketplace
• The plugin would allow users to tag widgets on the board with development data points that would then be used to visualise that information
• The plugin would allow users to save versions of a User Journey Map and load versions at a later point to compare them

This would put the functionality on-par with the web app that we built for the alpha, but without us having full control over every aspect of the UI.

The upside of building a Miro plugin would be that we’d no longer need to invest time in building our own editor which would speed up our ability to ship new data driven features.

The downside of building a Miro plugin was that where we didn’t have full control, we were exposing ourselves to the risks of Miro changing their platform and rules, as well as the more limited interaction options presented by the Miro API.

We felt that the upsides outweighed the downsides for the purpose of our experiment so I cracked on building an MVP of a Reciprocal.dev Miro plugin.

A quick intro to building a Miro plugin

A Miro plugin is essentially a set of HTML & JavaScript files rendered in iframes that use the Miro SDK (and maybe the REST API too) to interact with the Miro UI, the Miro board and the board’s widgets.