Convert sticky notes to shapes

The Miro Developer Platform allows developers to create apps and integrations on top of Miro that add extra or custom functionality.

Whether it's something creative, useful, or something that allows you and your team to collaborate more efficiently together, the Miro Developer Platform gives you all the pieces you need to build your next big idea.

Goal

In this guide, we’ll be exploring one of our example apps, which allows you to convert a selection of sticky notes and convert them into shapes.

Here’s what it will look when we’re done:

Get started

We’ll be creating this app from the create-miro-app tool, which gives us a starting point with everything we need to build.

To start, open a terminal session and create a new app by running the following command:

npx create-miro-app@latest

Select the prompts for Vanilla, and then JavaScript.

This will give us a starting template to start building our app with.

After we’ve got this up and running, we’ll need to set up our developer team in Miro.

Setup

To create apps in Miro, you must first create a developer team. This is a team that allows you to test and build your app without having to worry about it messing up any projects on your main team.

After you create a developer team in Miro, you’ll be able to start building apps right from the dashboard.

1. Navigate to your developer team’s dashboard, and click “Create app” in the upper right corner. From here, we’ll need to fill in information about our app.
2. The most important detail we need to fill in is our App URL. This is a URL that points to our running app.
   As we develop our app, we’ll be developing on localhost:3000; make sure you put http://localhost:3000 as your App URL for now.
   To run your app locally, your web browser must allow the HTTP transport protocol.
   Recommended web browser: Google Chrome
   Apple Safari doesn't allow HTTP; therefore, it doesn't allow the app to run locally.
3. You can access your apps from your user dashboard if you ever want to update this in the future.
4. After we save our settings here, we can verify it’s working by creating a new project in our developer team, and launching the app from the sidebar.

If you don’t see your app appear, make sure your app is running by running npm start in your project directory and checking again.

After we see the app in Miro, we’re ready to start building!

Project structure

Our project has 2 main files we’ll focus on in this guide, index.html and src/index.js.

index.html

Miro requires an HTML file in order to work. This file contains the main structure of the app, whereas the majority of the code is inside index.js.

src/index.js

This file contains the code to initialize the app when opened from the sidebar. There is some boilerplate code in here already, so go ahead and replace the entire file with the code snippet below.

async function init() {
  miro.board.ui.on("icon:click", async () => {

    // Get selected items
    let selectedItems = await miro.board.getSelection()

    // Filter sticky notes from selected items
    let stickyNotes = selectedItems.filter((item) => item.type === 'sticky_note')

    // Delete selected stickers
    for (const stickyNote of stickyNotes) {
      await miro.board.remove(stickyNote) 
    }

    // Create shapes from selected sticky notes
    for (const stickyNote of stickyNotes) {
      await miro.board.createShape({
        content: stickyNote.content,
        x: stickyNote.x,
        y: stickyNote.y,
        width: stickyNote.width,
        height: stickyNote.height
      }) 
    }

  });
}

init();

Get your selection

First, we’ll need to get a list of elements we currently have selected on the board. Fortunately, part of Miro’s SDK allows us to grab a list of currently selected items.

With an element or elements selected on the board, calling let selectedItems = await miro.board.getSelection() will return an array of elements that you currently have in your selection.

Keep only sticky notes

Now that we have a way to find our current selection in code, we want to keep only selected items that are sticky notes, and we want to discard any other items in the selection that aren't sticky notes.

Luckily, JavaScript gives us a built-in way to filter out items from an array.

Array.Filter() is the default way to filter out items from arrays. We can pass in the criteria of what we intend to keep, and the filter takes care of the rest.

let stickyNotes = selectedItems.filter((item) => item.type === 'sticky_note')

The line above will take the selection we stored earlier, filter out any elements that don't have a type sticky_note, and give us an array that only contains the sticky notes we have selected.

This array of sticky notes is going to be useful for the next parts, as it also contains helpful information, such as the content of each sticky note, its position on the board, and more!

Remove sticky notes from the board

Before we can add in a shape to the board, we need to remove the sticky notes.

for (const stickyNote of stickyNotes) {
  await miro.board.remove(stickyNote)
}

The block of code above will do just that for us. This will loop over our array of sticky notes, and remove them one by one.

Luckily, even when the sticky note is removed from the board, we’ll still have access to the original array of sticky notes, so we can insert a shape in their place.

Insert shapes

The last part of the code we’ll look at is the part that will insert a new shape in the place of our original sticky note, with the content it originally had.

for (const stickyNote of stickyNotes) {
  await miro.board.createShape({
    content: stickyNote.content,
    x: stickyNote.x,
    y: stickyNote.y,
    width: stickyNote.width,
    height: stickyNote.height
  })
}

This statement is very similar to the previous one (removing sticky notes from the board), but instead of removing a sticky note, it inserts a shape using Miro’s createShape() method.

The options for the createShape method include all the original information about our sticky note, like it’s content/text, x and y position, and even its original size! This way, we can make sure that the newly inserted shape contains everything we need.

Let's wrap up

The Miro Developer Platform allows you to create all kinds of fun, useful apps and integrations. It’s flexible enough to let you build what you want, while being powerful enough to support essential workflows for you or your team.

We have many more examples of other apps and ideas you can build: check Miro App Examples to find more.