Miro App Examples

This application demonstrates the integration of the Miro Web SDK and the Miro REST API within a Next.js environment. It utilizes the following key capabilities:

Miro Node.js Client Library (Server-side):

• miro.isAuthorized: Check authorization status.
• miro.getAuthUrl: Retrieve the OAuth authorization URL.
• miro.exchangeCodeForAccessToken: Exchange an authorization code for an access token.
• api.getBoard: Retrieve board information.
• board.createImageItem: Upload and create an image item on a board.

Miro Web SDK (Client-side):

• icon:click event: Handling interactions with the app icon.
• miro.board.getInfo(): Accessing board metadata.
• miro.board.ui.openModal(): Opening a modal window.
• miro.board.ui.openPanel(): Opening a side panel.

The GitHub App Cards Miro app is a full-stack example demonstrating a 2-way synchronization between GitHub issues (specifically deprecated 'Classic' GitHub projects) and Miro app cards.

Important Limitations:

• Only deprecated 'Classic' GitHub projects are supported. You cannot connect this to a standard modern GitHub repository unless it uses the Classic project format.
• This is a demonstration of 2-way sync concepts using free services (Netlify, Supabase, Miro) and is not intended as a production-ready solution.

The project is organized as follows:

• app.py: The core Python script that manages the Miro OAuth flow and executes Miro REST API calls.
• templates/index.html: The landing page shown to users who have not yet authorized the Miro app.
• templates/loggedin.html: The view shown to users after successful Miro authorization.
• sample.env: A template for environment variables.
• requirements.txt: List of Python dependencies.

The Digital Asset Manager (DAM) example demonstrates how to integrate external asset libraries (like Bynder) directly into Miro boards using the Miro Web SDK.

Key capabilities implemented include:

• Panel Management: Using miro.board.ui.openPanel() to display the DAM interface.
• Event Handling: Listening for drop events via miro.board.ui.on('drop').
• Asset Insertion: Creating images on the board using miro.board.createImage.
• UI Interactions: Implementing draggable elements within the app panel and providing search and filter functionality for asset discovery.

The Asset Search app demonstrates several Miro Web SDK capabilities:

• Event Handling: Using miro.board.ui.on('drop') to handle assets dropped onto the board.
• Board Manipulation: Using miro.board.createImage to add images to the board.
• Viewport Control: Using miro.board.viewport.zoomTo to focus the user's view.
• UI Management: Using miro.board.ui.openPanel() to manage the app panel.
• Drag and Drop: Implementing draggable elements within the app panel.

The Miro HTML Preview App demonstrates how to use the Miro REST API to generate HTML pages from Miro boards. This is useful for quickly creating multi-page website mockups.

Key Workflow:

• The app prompts for Miro account connection via OAuth.
• Once signed in, it lists boards under your team.
• You can view specific frames using the URL pattern: /{boardId}/{frameTitle}.

The Template Builder app demonstrates how to use the Miro Web SDK to manipulate board content. Key capabilities include:

• Creating Text: Using miro.board.createText() to add text items to the board.
• Creating Shapes: Using miro.board.createShape() to add shapes to the board.
• UI Interaction: Using miro.board.ui.openPanel() to open the app's interface within a Miro board panel.

These examples demonstrate complex integrations combining the Web SDK, REST APIs, and external services:

• monetization-with-stripe: Use Stripe to add a paywall for app features.
• html-preview: Generate HTML pages from Miro boards (each frame becomes a page).
• github-appcards: Sync data between GitHub issues and Miro app cards.
• plant-uml: Import Plant UML diagrams as editable board items.
• nextjs: A Next.js app that uploads camera images to a Miro board using both Web SDK and REST API.

The Calendar app demonstrates how to use the Miro Web SDK to manipulate board content dynamically. It specifically utilizes the following methods to build a calendar using shapes and text:

• miro.board.createShape(): Used to create the geometric shapes that form the calendar grid.
• miro.board.createText(): Used to place text (such as dates or labels) onto the board.

For a deep dive into the implementation, refer to the calendar app tutorial.

Understanding the project layout:

• src/app.js: The main application logic. It handles Firebase configuration and pushes template details to the database.
• src/index.js: Initializes the app and contains logic for opening the app panel.
• app.html: The application UI, which is loaded into the Miro appContainer.
• index.html: The entry point for the application; this URL is assigned to sdkUri in the app manifest.

.
├── src
│  └── assets
│  └── App.js <-- The main app. Contains logic for configuring the Firebase instance and pushing template details to Firebase.
│      index.js <-- Initializes app, and contains logic for opening the app panel.
├── app.html <-- The app UI itself. This is loaded on the board inside the 'appContainer'.
└── index.html <-- The app entry point. This is the value you assign to 'sdkUri' in the app manifest file.