Skip to main content

Build your first Hello, World app

This tutorial shows you how to get a simple app running in Miro using the Miro Web SDK.
By the end of this guide, you'll have built an app that displays a sticky note on the board with the text Hello, World!

If you've never built a Miro app before, you're in the right place: let's get started!

Prerequisites

Before you begin, ensure that you have the following prerequisites:

  • You have a Developer team.
  • Your development environment includes Node.js 14.15 or a later version.
  • 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 sample app to run locally.

Step 1: bootstrap the hello world app

Video Run the command to create the sample app, and then click the link to review the preconfigured app options in the app settings UI.

  1. Open the terminal and run: 

    npx create-miro-app@latest

  2. Give your app a name, or press ↵ Enter to use the default app name: my-miro-app.

  3. Select your framework.
    If you're creating an app that uses only the Web SDK, select one of these options:

    • Preact
    • React
    • Vanilla
    • Vue

    If you're creating an app that also features a backend, select one of these options:

  4. Select your flavor.
    Choose one of the following options:

    • JavaScript
    • TypeScript

  5. Once the app is created, click the link displayed in the terminal.

    Figure 1. The terminal displays a link and a message: Create your preconfigured app in Miro by clicking on the following link.

    It points to the app settings UI, where you can:

    i. Create the app by clicking the Create app button on the Create new app modal.
    ii. Check the preconfigured options in the app settings UI.
    iii. Click Install app and get OAuth token to install the app to a team.

  6. In the terminal, go to the my-miro-app directory, where my-miro-app is the application name that you set in step 1. 

    cd my-miro-app


    Figure 2. In the app project root directory, use npm commands to install dependencies, build the app, and start running the app.

  7. To start the app and begin developing, run: 

    npm start

  8. Open your browser, paste the URL you just copied in step 7, and press ↵ Enter.
    A message indicating that your app is now running locally appears.


    Figure 1. Your app is running locally.

Step 2: try out your app in Miro

  1. Open your Miro dashboard. Click the Dev team (DT icon on the left pane), and then click the + New board tile.

  2. If the modal with the template picker appears, close it.

  3. On the newly created board, click + / More apps on the app toolbar on the left side of the board, and then click the app icon corresponding to the app name that you assigned upon creation.
    For example: my-miro-app, or Hello World.

    You should see a sticky note on the board with the text Hello, World.

You did it!

Congratulations on building your first Miro app. The Miro Developer Platform allows you to create all kinds of fun, useful apps and integrations. It’s flexible so you can build what you want, and it's powerful enough to support essential workflows for you and your team.

Explore more examples of other apps and ideas that you can build. To find out more, check Miro App Examples.

Here's a list of topics you may want to check out: