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.
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.
- Open the terminal and run:
Provide a name for your application or press
Enter ↩to use the default application name, my-miro-app.
Select your framework.
You can choose between Vanilla, React, or Vue.
Select your flavor.
Change the directory to the my-miro-app folder, where my-miro-app is the application name that you provided in step 2.
To install dependencies, run:
To start the app and begin developing, run:
Open your browser, paste the URL you just copied in step 7, and press
A message indicating that your app is now running locally appears.
Figure 1. Your app is running locally.
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.
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.
Click Build app.
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.
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.
- On the app settings page, scroll down to the App URL section.
- 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:
Figure 5. App URL.
- Under Permissions, select the boards:read and the boards:write checkbox (Figure 6).
Figure 6. Web SDK version and permissions.
Under the Permissions section, click Install app and get OAuth token.
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.
Open your Miro dashboard. Click the Dev team (DT icon on the left pane), and then click New board.
If the Template Picker appears, close the window.
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.
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:
- Get acquainted with fundamental concepts about Miro platform development.
- Learn how to create and interact with items on the board.
- Look through our Web SDK reference to get ideas about what to build next.
- Explore our design guidelines and best practices that dive into the details of building good Miro apps that help you provide a great user experience.
- When you're ready to take your app from development to deployed, you'll want to know more about how to submit your app.
Updated about 1 month ago