Building an app with the Miro Developer Platform

Learn the app development process from Vladimir, a Miro engineer who has built a calculator app leveraging the Miro Developer Platform.

As an engineer at Miro, I wanted to experience what it’s like for developers — inside and outside of Miro — to build apps with the Miro Developer Platform, without letting my insider knowledge interfere with an authentic experience. By going through the entire development workflow, I could possibly identify ways to improve the developer experience going forward.

To accomplish this, I had the following conditions in mind:

• The app needed to be simple so I could quickly experience the entire development process, from ideation to delivery.
• The app needed to be easy for Miro users to install, without requiring authorization. This was important to me because I wanted to ensure a seamless user experience and drive app adoption.
• I wanted to develop and publish an app as an individual developer, without extra support or knowledge that results from being a Miro employee.

For this exercise, I opted to build a calculator app.

Getting started building an app

From the Developer Platform homepage, it’s easy to get started. Simply click Start building now and you’ll see a list of all the apps you’ve built, if any. From there, click Create new app.

I then followed the documentation to get my app running in Miro using the Miro Web SDK. I used npx create-miro-app@latest to create an app template.

Behind the app logic and hosting

Create-miro-app allows you to generate app templates in various frameworks and programming languages. This boilerplate generator not only works for Web SDK applications, but also for REST API.

For my use-case, I wanted the user of the app to be able to use it directly within the Miro board, meaning I needed to leverage the Miro Web SDK. I decided to use a JavaScript-based framework.

The next step was to build the actual app. I decided to search for an open source calculator app with an MIT license I could build off. I settled on a React-based app and forked it (basically just copy-pasted the source code).

Overall, the development process went smoothly despite the small hiccups while learning Web SDK basics (app templates). The entire app development phase took a single evening, or about 3 hours.

The next thing to solve was the hosting. Web SDK apps are pure front-end static files, so any basic hosting solution will do the job. I found this guide giving some recommendations and decided to use Netlify to host my application.

Submitting my app to the marketplace

Next, I wanted my app to be available on the Miro Marketplace so anybody could use it. I submitted the app for review via the app settings page, and got a confirmation dialog that my submission was successful.

The app review process has multiple parts.

Security review feedback

Less than a week later, I received an email linking to detailed security feedback, indicating that my app was rejected due to two security violations.

• First, it was identified that the Strict-Transport Security (HSTS) header was not used in my domain. It was recommended I implement the HSTS on the site.
• Second, it was identified that the ‘Cache-Control’ header did not contain the value recommended in the Miro guidelines, specifically ‘Cache-Control: no-cache, no-store’.

Both violations were surprising because (1) My app does not use user data at all, so I wasn’t concerned about using Strict-Transport, and (2) I was hosting on GitHub, which I (as a personal developer) consider safe and secure.

Yet in order to continue the app publishing process, I had to choose a different hosting option since GitHub pages do not allow header customization (especially a cache-control one). Since my app was mainly developed for research purposes, I didn’t want to go with a non-free solution. I decided to go with Netlify and specify all required headers in accordance with the security guidelines.

Design review and feedback

The next step toward getting published was to pass a design review, which I received two days later. At first, my app was rejected due to design violations. This was the feedback I received from the Miro Design team:

• Feedback learn links should be replaced by Miro icons
• Unavailable calculation modes should be explained better
• The entire layout should use space in a more meaningful way
• Stick to Miro colors instead of some fixed RGB values

I realized I failed to refer to the app design guidelines before submitting my app. I also discovered Mirotone during this phase. Mirotone is a lightweight component library that allows devs to style regular HTML matching native Miro UI elements. This helps ensure any app you build will have a consistent look and feel with the rest of the Miro interface.

After addressing the feedback and incorporating my design learnings, my app passed the design review four days later.

Final feedback on the Calculator app

The final step was to fill out the Miro Marketplace information that will be seen by Miro users and help them discover and understand the app.

As explained in the Marketplace listing guidelines, there is a set of mandatory information to provide. For me, the most difficult piece to create was the privacy policy for my app. As I am not used to creating such content, I took inspiration from other, existing privacy policies.

To meet this requirement, I found a similar app for inspiration (open source, developed by an individual under an open license, and with a privacy policy on GitHub). I then created a privacy policy with a basic explanation that the app doesn’t use/store/process user data and doesn’t provide any guarantee over its functionality. Having a set of templates would have made this part much smoother: lesson learned and this feedback was shared with our developer experience team!

My app is published to the Miro Marketplace

Two weeks after my initial submission, my app was officially in the Miro Marketplace.

Considering that building the app only took a few hours over the course of one evening, the whole process was a bit longer than anticipated, but I do understand the need to do a proper review and enforce certain guidelines.

Yet keep in mind that this review period will be about as long no matter how complex your app is. So if you build a more complicated app that takes days or weeks to develop, then a two-week review period is not relatively long at all. As you can see, developing apps with the Miro Developer Platform is easy.

So go ahead and give it a try. With the Miro Developer Platform, you can build apps for Miro, too.