Announcing the new SpellChecker app for Miro

How Miro’s engineers quickly developed a powerful, sought-after app to improve the experience of Miro customers.

At Miro, our engineering team is always looking for ways to improve the product for our customers. One of the most highly requested features has been the ability to check the spelling of text in a Miro board. That’s why our App Deployment team decided to prioritize building just such an app during a recent hackathon. Instead of building it as part of the product itself, we chose to release the feature as an app that can be downloaded from the Miro Marketplace.

At the core of the new SpellChecker app is the spelling engine. While there are several engines on the market, we wanted something free and self-hosted, to alleviate any concerns customers might have about their board content being shared with external services. To achieve this, we created a backend service that could easily swap the spell-checking provider if needed. We chose LanguageTool as a library, installing it as a Maven dependency.

On the frontend side, we designed SpellChecker in a way that users can select the language. We also let users decide whether to spell-check only the selected text or all text on the board. This is done so users can opt to spell-check only the content they added to a shared board while leaving content created by others untouched.

We deploy and run the application on the AWS App Runner.

Check out the SpellChecker app in action:

The challenges and solutions to building a Miro app

There were several challenges throughout the development process:

Encoded text

Because the element text content is encoded (i.e. not raw text), it’s not as simple as putting the element content into the spell-checking engine. We also need to know the coordinates of the text and the element reference.

To solve the encoding text issue, we implemented some logic around unwrapping the text content. This allowed us to calculate the proper coordinates for the spelling suggestions on the backend.

Multiple warnings in one element

If a single element (for example, a sticky note) has many spelling warnings, it gets complicated. That’s because if we apply one fix, the text positions for other suggestions must be recalculated.

In the end, we decided to fetch spelling suggestions every time a user applies a fix from the list, as the backend is the only source of truth regarding this data.

Performance optimization

How would the SpellChecker app perform on a board with hundreds of sticky notes? We had to ensure the app didn’t hinder performance.

Right now the backend doesn’t have any pagination patterns for the API. However, we do optimize the suggestion list rendering of the frontend by using the virtual scroll approach, in which we render only visible suggestions.

Publishing the app on the Miro Marketplace

Before releasing the app to the world, we needed an app icon. We chose to implement a simple design that conveys the familiar spell-check notion of a wavy underline.

Overall, we found that publishing the app to the Miro Marketplace was pretty straightforward.

To check out SpellChecker, install it now. With the app, you can:

• Fix multiple spelling and grammar mistakes in a single click
• Check text in a selected element or the whole board
• Choose from multiple suggestions
• Zoom in to the indicated text to help you review
• Work across multiple languages

Build your first app

SpellChecker is a Miro Labs app, developed internally by Miro’s engineers.

With the Miro Developer Platform, you can build apps for Miro too.

Would you like to be an engineer at Miro? Then check out our open positions for opportunities to join the team.