Building Miro Plugins is Literally Life Changing: Miro API is 🚀

  • 12 May 2020
  • 3 replies
  • 2931 views

Userlevel 7
Badge +5

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

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

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

 

Userlevel 4
Badge +1

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

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

Reply