Build your first Hello, World app

The Miro Web SDK sample app includes boilerplate and scaffolding to make it fast and easy to run a Miro app on a board.

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 1. 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 [email protected]
    
  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 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 may want to check out:

See also


What's next

Learn how to reflect on the board updates to board item properties by syncing the changed board items.