Building Miro Plugins is Literally Life Changing: Miro API is ūüöÄ

  • 12 May 2020
  • 3 replies
  • 1690 views

Userlevel 7
Badge +11

We’ve been having a blast developing tools for this community on the Miro API/SDK. 

‚ÄėBlast‚Äô doesn‚Äôt capture it‚Ķ¬†the ability to build tools on top of all the amazing features in Miro is straight-up life changing.¬†

The developer docs and sample projects are well put together and make it easy to get started. Its not rocket science¬†-- but the potential feels ‚Ķ¬†astronomical¬†ūü§ď

‚Üź¬† Miro now¬† |¬† ¬†Miro after the creative world discovers the API ‚Üí¬†

What follows is a¬†glimpse into how its been going.¬†We‚Äôre about to begin sharing the¬†tools in beta. We‚Äôll keep you posted.¬† Always eager to share what we‚Äôve learned and collaborate with other Miro enthusiasts. I‚Äôll probably¬†post over in the ‚ÄėDeveloper Forum‚Äô a deeper dive into some of the more developer side of things‚Ķ¬†¬†


 

Miro Plugin Development Project HQ

Here’s some screenshots of our development HQ Miro board … don’t mind the mess, if I knew you were coming over I’d have cleaned the place up.

 

The High Level

  • Top left / top: Concept, Glossary and Research ‚Ķ¬†research continues to expand/evolve to the right‚Ķ¬†
  • Underneath these(middle row(orange and red))¬†initial Design, System Architecture¬†and Work Plan.¬† Emerging out of / to the right of these is¬†(yellow and green)¬†Meeting notes/to dos, Work tracking, a perma-link to our zoom room, and outside research/resources that apply to our specific challenges.¬†
  • As the major functionality for our Miro plugin(s) came together the UI wireframe/UX flow diagrams emerge (far central right) -- and below it in prep for deployment, Dev¬† Ops section emerges.
  • The first demo video of the working product¬†is embedded in a blue ribbon‚Ķ¬†gotta celebrate a little success right?¬†
The main development team room we worked out of. 

 

 

Basic Data Architecture with Live Google Sheet

 

Here’s a zoom in on some initial system architecture work…  What I love most here is that Miro lets us embed live update-able Google Sheets. We used this to update the data architecture plan against a conceptual design of the system. 

A zoom in some initial system architecture work… 

 

 

Project Central 

 

Like many in this community, I like to have Miro boards act like a project room and be the primary start point for all conversations and excursions related to the project. Among other key links and resources we have our zoom room link front and center. We have google doc links and embeds as well… we have our Miro plugin app hosted on Glitch and can embed the project into a Miro board… which is wild … in that we can adjust the code for the plugin that’s active in our Miro toolbar from an embed of Glitch on our board’s canvas…not super practical at the current moment but a promising glimpse at a fascinating future possibility. 

 

 

UI/UX of Miro in Miro

 

Working ON Miro IN Miro is an extra-special feedback loop of joy: Here we’re working on wireframes of a left sidebar Miro plugin.  

 

 

 

We’ve just scratched the surface of Miro API

 

The Miro API/SDK¬†is SUPER¬†promising!¬† As more designer/developers unlock their creativity on this API / SDK ‚Ķ¬†Miro will gain¬†an exponential¬†‚Äėplatform‚Äô edge against its ‚Äėapp‚Äô competitors (I dare not speak their names).¬†¬†

Here’s a couple photos of TagConnector: our first Miro plugin to share in beta. 

It automatically ‚Äėaffinity clusters‚Äô tagged items -- unveils the network of connections in a batch of tagged Miro objects.¬†

 ---

 

Here’s a quick quiet video of Tag Connector: a tool that automatically affinity clusters your tagged items in Miro. One of the first things we plan to release. 

 

Here’s an early video of the first tool we built that imports network data from Google Sheets and generates the network graph on your board.

 


3 replies

Userlevel 4
Badge +8

Great read @Max Harper , thanks for all the feedback!

Really looking forward to seeing what users have to say :muscle:  

Badge

I really like this! It’s giving me more ideas on how we can use Miro outside of the normal use cases.

Badge

Very cool!

Would you guys be into building THIS?   It looks like it could be a very quick project for your team -- perhaps you already have most of it done since you built Clusterizer….:

 

https://community.miro.com/wish-list-32/highlight-connecting-lines-when-hovering-the-cursor-to-show-how-objects-are-related-2847

 

Reply