Miro App Examples
Welcome to Miro App Examples! In this repository you can find examples of apps built on top of the Miro Developer Platform 2.0. \ Make sure you visit our developer documentation to learn more.
ℹ Note:
- We recommend a Chromium-based web browser for local development with HTTP. \ Safari enforces HTTPS; therefore, it doesn't allow localhost through HTTP.
- All examples use
npmas a package manager andnpxas a package runner. \ If you prefer, you can install and use equivalent alternatives, such asyarnorpnpm. - For more information, visit our developer documentation.
App configuration
All examples include an app-manifest.yaml file to quickly configure the example app.
- Go to App settings.
- Click Edit in manifest.
- Paste the YAML configuration, and click Save.
Get started
The fastest way to bootstrap a new app is by using create-miro-app. \
To get started, run the following command:
npx create-miro-app@latestMiro Web SDK
| Description | |
|---|---|
| csv-to-mindmap | Import data from CSV and create mind map on a Miro board |
| drag-and-drop | This example shows you how to drag and drop images from your app onto the board. |
| asset-search | This example shows you how to filter and search through assets by name and/or multiple tags. |
| digital-asset-manager | This example shows you how to build a digital asset manager using Bynder's API. |
| connect-firebase | This example shows you how to connect an SDK app to a Firebase backend. |
| stickynotes-to-shapes | This example allows you to select several stickies, click the plugin button in the bottom bar, and replace any selected stickies with shapes. |
| template-builder | This example shows how to create and position on the board multiple widgets of different types and render create custom interfaces in the library. |
| calendar | This example shows you how to add a calendar made with shapes and text for a given month and year. |
| wordle | This example shows you how to create a Wordle-like game using the Miro Web SDK. |
| blob-maker | This example shows you how to create a drag and drop blobmaker using Miro's Web SDK. |
| youtube-room | This example shows you how to sync a YouTube player across multiple users through Socket.IO. |
| custom-actions | This example shows you how register custom actions in the item context menu. |
| breakout-rooms | This example shows you how use collaborative features (real-time storage, events, sessions, etc) |
REST APIs
| Description | |
|---|---|
| python-oauth | This Python sample demonstrates how to implement the Oauth 2.0 authorization code flow in Miro. |
| node-oauth | This Node.js sample demonstrates how to implement the Oauth 2.0 authorization code flow in Miro and make an API request to a Miro endpoint. |
| node-passport-oauth | This Node.js sample demonstrates how to implement the Oauth 2.0 authorization code flow in Miro and make an API request to a Miro endpoint using Passport.js. |
| nextjs-oauth | This app demonstrates how to implement the Oauth 2.0 authorization code flow from Miro into a client side application built with Next.js. |
| node-stickies-csv | This Node.js sample app uses server side rendering (Handlebars.js) to provide a lightweight, CRUD-oriented REST example in the browser for Miro's sticky notes and tags APIs. It demonstrates a structured > unstructured use case via CSV import, creating Miro sticky notes with tags based on CSV data. |
| python-flask-starter | This Python/Flask boilerplate will allow to start using the Miro REST API in a few minutes. This sample implements the full Miro authorization (OAuth 2.0 with refresh token) flow. |
| python-external-oauth | This Python/Flask app shows you how to set up an OAuth 2.0 flow with GitHub. This sample allows you to log in with GitHub and post some details to a Miro Board. |
| enterprise-team-management | This Node.js sample demonstrates how to manage teams and organizations within Miro using Miro's REST API. ℹ️ This example requires an Enterprise plan subscription and an Enterprise Team account. |
Full-stack apps
| Description | |
|---|---|
| monetization-with-stripe | This full-stack example shows how use Stripe to add a paywall for certain features in your app. |
| html-preview | Use the Miro API to generate HTML pages from Miro boards. Each frame on the board produces an HTML page. |
| github-appcards | This full-stack example shows how to build an integration with GitHub that syncs data between GitHub issues and Miro app cards. |
| plant-uml | This full-stack example shows how to import Plant UML diagrams into Miro as editable board items. |
| nextjs | This full-stack example shows a Next.js application that uploads a camera image to the Miro board using Web SDK and REST API integration. |
| webhooks-manager | This full-stack example demonstrates how to interact with the webhooks API, and how to handle the webhooks challenge. |
If you'd like to contribute your own app or idea, visit our contributing guide to get started.
💡 Interested in learning more? Feel free to join our Developer Community to chat with other Miro Developers!