{"id":24727309,"url":"https://github.com/miroapp/app-examples","last_synced_at":"2025-05-15T14:04:07.126Z","repository":{"id":37817334,"uuid":"203337003","full_name":"miroapp/app-examples","owner":"miroapp","description":"Miro Developer Platform App Examples","archived":false,"fork":false,"pushed_at":"2024-10-29T23:02:38.000Z","size":168588,"stargazers_count":352,"open_issues_count":5,"forks_count":211,"subscribers_count":27,"default_branch":"main","last_synced_at":"2024-10-30T01:46:45.410Z","etag":null,"topics":["live-embed","miro","plugins","rest-api","sdk","whiteboard"],"latest_commit_sha":null,"homepage":"https://developers.miro.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/miroapp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-20T08:49:40.000Z","updated_at":"2024-10-09T16:25:33.000Z","dependencies_parsed_at":"2023-10-03T04:18:19.995Z","dependency_job_id":"93061fb3-59d4-4b86-ba21-4af75fecd897","html_url":"https://github.com/miroapp/app-examples","commit_stats":{"total_commits":168,"total_committers":23,"mean_commits":7.304347826086956,"dds":0.8214285714285714,"last_synced_commit":"33d257fe2701787c647325259934c92d744e63b3"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miroapp%2Fapp-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miroapp%2Fapp-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miroapp%2Fapp-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miroapp%2Fapp-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/miroapp","download_url":"https://codeload.github.com/miroapp/app-examples/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247755489,"owners_count":20990618,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["live-embed","miro","plugins","rest-api","sdk","whiteboard"],"created_at":"2025-01-27T14:58:34.729Z","updated_at":"2025-04-08T00:34:06.372Z","avatar_url":"https://github.com/miroapp.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Miro App Examples\n\n[![Discord](https://discordapp.com/api/guilds/933103778855534614/widget.png?style=shield)](https://discord.gg/bh64hJVmS5)\n\n\u003cimg alt=\"Miro Developer Platform\" src=\"https://github.com/miroapp/app-examples/raw/main/assets/Banner.png\" /\u003e\n\nWelcome to Miro App Examples! In this repository you can find examples of apps built on top of the Miro Developer Platform 2.0. \\\nMake sure you visit our [developer documentation](https://developers.miro.com) to learn more.\n\n**\u0026nbsp;ℹ\u0026nbsp;Note**:\n\n- We recommend a Chromium-based web browser for local development with HTTP. \\\n Safari enforces HTTPS; therefore, it doesn't allow localhost through HTTP.\n- All examples use `npm` as a package manager and `npx` as a package runner. \\\n If you prefer, you can install and use equivalent alternatives, such as `yarn` or `pnpm`.\n- For more information, visit our [developer documentation](https://developers.miro.com).\n\n### App configuration\n\nAll examples include an [`app-manifest.yaml` file](https://developers.miro.com/docs/app-manifest) to quickly configure the example app.\n\n- Go to [App settings](https://miro.com/app/settings/user-profile/apps).\n- Click **Edit in manifest**.\n- Paste the YAML configuration, and click **Save**.\n\n### Get started\n\nThe fastest way to bootstrap a new app is by using [`create-miro-app`](https://www.npmjs.com/package/create-miro-app). \\\nTo get started, run the following command:\n\n```shell\nnpx create-miro-app@latest\n```\n\n### Miro Web SDK\n\n| | Description |\n| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [csv-to-mindmap](examples/csv-to-mindmap) | Import data from CSV and create mind map on a Miro board |\n| [drag-and-drop](examples/drag-and-drop) | This example shows you how to drag and drop images from your app onto the board. |\n| [asset-search](examples/asset-search) | This example shows you how to filter and search through assets by name and/or multiple tags. |\n| [digital-asset-manager](examples/digital-asset-manager) | This example shows you how to build a digital asset manager using Bynder's API. |\n| [connect-firebase](examples/connect-firebase) | This example shows you how to connect an SDK app to a Firebase backend. |\n| [stickynotes-to-shapes](examples/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. |\n| [template-builder](examples/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. |\n| [calendar](examples/calendar) | This example shows you how to add a calendar made with shapes and text for a given month and year. |\n| [wordle](examples/wordle) | This example shows you how to create a Wordle-like game using the Miro Web SDK. |\n| [blob-maker](examples/blob-maker) | This example shows you how to create a drag and drop blobmaker using Miro's Web SDK. |\n| [youtube-room](examples/youtube-room) | This example shows you how to sync a YouTube player across multiple users through Socket.IO. |\n| [custom-actions](examples/custom-actions) | This example shows you how register [custom actions](https://developers.miro.com/docs/add-custom-actions-to-your-app) in the item context menu. |\n| [breakout-rooms](examples/breakout-rooms) | This example shows you how use collaborative features (real-time storage, events, sessions, etc) |\n\n\u003cp\u003e\u0026nbsp;\u003c/p\u003e\n\n### REST APIs\n\n| | Description |\n| ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [python-oauth](examples/python-oauth) | This Python sample demonstrates how to implement the Oauth 2.0 authorization code flow in Miro. |\n| [node-oauth](examples/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. |\n| [node-passport-oauth](examples/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](https://www.passportjs.org/). |\n| [nextjs-oauth](examples/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. |\n| [node-stickies-csv](examples/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.\u003cbr /\u003eIt demonstrates a structured \u003e unstructured use case via CSV import, creating Miro sticky notes with tags based on CSV data. |\n| [python-flask-starter](examples/python-flask-starter) | This Python/Flask boilerplate will allow to start using the Miro REST API in a few minutes.\u003cbr /\u003eThis sample implements the full Miro authorization (OAuth 2.0 with refresh token) flow. |\n| [python-external-oauth](examples/python-external-oauth) | This Python/Flask app shows you how to set up an OAuth 2.0 flow with GitHub.\u003cbr /\u003eThis sample allows you to log in with GitHub and post some details to a Miro Board. |\n| [enterprise-team-management](examples/enterprise-team-management) | This Node.js sample demonstrates how to manage teams and organizations within Miro using Miro's REST API.\u003cbr /\u003eℹ️ _This example requires an Enterprise plan subscription and an [Enterprise Team account](https://miro.com/enterprise/)._ |\n\n\u003cp\u003e\u0026nbsp;\u003c/p\u003e\n\n### Full-stack apps\n\n| | Description |\n| ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |\n| [monetization-with-stripe](examples/monetization-with-stripe) | This full-stack example shows how use Stripe to add a paywall for certain features in your app. |\n| [html-preview](examples/html-preview/) | Use the Miro API to generate HTML pages from Miro boards. Each frame on the board produces an HTML page. |\n| [github-appcards](examples/github-appcards) | This full-stack example shows how to build an integration with GitHub that syncs data between GitHub issues and Miro app cards. |\n| [plant-uml](https://github.com/miroapp/miro-plantuml) | This full-stack example shows how to import [Plant UML](https://plantuml.com/) diagrams into Miro as editable board items. |\n| [nextjs](examples/nextjs-full-stack) | 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. |\n| [webhooks-manager](examples/webhooks-manager/) | This full-stack example demonstrates how to interact with the webhooks API, and how to handle the webhooks challenge. |\n\n\u003cp\u003e\u0026nbsp;\u003c/p\u003e\n\nIf you'd like to contribute your own app or idea, visit our [contributing guide](CONTRIBUTING.md) to get started.\n\n💡 _Interested in learning more? Feel free to join our [Developer Community](https://bit.ly/miro-developers) to chat with other Miro Developers!_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiroapp%2Fapp-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmiroapp%2Fapp-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiroapp%2Fapp-examples/lists"}