Build your first Hello, World app

This tutorial shows you how to get a simple app running in Miro using the Miro Web SDK.
If you've never built a Miro app before, you're in the right place. Welcome, and let's get started!
By the end of this guide, you'll have an app that displays a sticky note, with the text Hello, World!, on the board.

Prerequisites

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

  • You have a Miro account, and you've signed in to Miro.
  • You have Node 14.x or higher installed.
  • 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

  1. Open the terminal and run:
    npx [email protected]
    

  1. Provide a name for your application or press Enter ↩ to use the default application name, my-miro-app.

  2. Select your framework.
    You can choose between Vanilla, React, or Vue.

  3. Select your flavor.
    You can choose between JavaScript and TypeScript.

  4. Change the directory to the my-miro-app folder, where my-miro-app is the application name that you provided in step 2.

    cd my-miro-app
    
  5. To install dependencies, run:

    npm install
    
  6. To start the app and begin developing, run:

    npm start
    
  7. Copy the app URL from the console output.
    Keep your app URL handy: you'll need this URL when you configure and install your app in Miro.
    The URL should look like this:

    http://localhost:3000/
    
  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: Create a Developer team in Miro

📘

Developer teams for Enterprise plan

If your organization is on an Enterprise plan, go to the Enterprise Developer teams Help Center article to learn how to set up Developer teams for an Enterprise plan.

Step 2: Create a Developer team in Miro describes the procedure for other, non-Enterprise, Miro subscriptions.

The Developer team enables creating and testing apps without affecting production boards; it's comparable to a sandbox, and it has some limitations:

  • A Developer team can have up to 3 boards and up to 5 collaborators.
  • Start testing your app in the Dev team with 3 to 5 users.
  • Once all is well, install the app in a team that supports more than 50 users to check that everything works as expected.

Ensure that you use the Developer team only for development purposes, and not to complete any other type of work or remote collaboration.

  1. Create a Developer team in Miro.

  2. If you previously created the Developer team, the Your apps page appears instead of the Welcome to Miro Developer team box. Skip the steps in this procedure and proceed to Create your app in Miro.

    If you do not have the Developer team, clicking the link in step 1 creates a Developer team for you. Once the
    Developer team is successfully created, the Welcome to Miro Developer team box appears.


    Figure 2. Welcome to Miro Developer team box.

  3. Click Build app.

Step 3: Create your app in Miro

  1. On the Your apps page, review the Terms and Conditions, select the I agree to the Terms and Conditions checkbox, and then click Create new app .



    Figure 3. Select the checkbox to accept the terms and conditions before proceeding to creating a new app.

  2. On the Create new app window:
    a. In the App name box, enter Hello world.
    b. Click Create app.



    Figure 2. On the Create new app modal, give the app a name and make it available for a team.

Step 4: Configure your app in Miro

  1. On the app settings page, scroll down to the App URL section.
  2. In the App URL field (Figure 5), enter the URL you obtained in step 2 of Bootstrap the Hello, World app, and then click Save.
    ℹ️ The URL should look like this: http://localhost:3000/.

    Figure 5. App URL.
  3. Under Permissions, select the boards:read and the boards:write checkbox (Figure 6).

    Figure 6. Web SDK version and permissions.

Step 5: Install your app

  1. Under the Permissions section, click Install app and get OAuth token.

  2. On the Install app to get OAuth token dialog:

    • In the Select a team list, select Dev team.

      Figure 7. Install app to get OAuth token dialog.

    • Click Install & authorize. A message notifies you that the app is installed.
      For now, ignore the access token information as the Hello world sample app uses only the Miro Web SDK, which doesn't require an access token.

      Figure 8. Installation confirmation and tokens.

    • Click Close.

Step 6: Try out your app in Miro

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

  2. If the Template Picker appears, close the window.

  3. Click >> or ... on the toolbar on the left side of the board, and then click Hello World.

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

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 enough to let you build what you want while being powerful enough to support essential workflows for you and your team.

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

Here's a list of topics you might also be interested in:


Did this page help you?