blob-maker

Miro Blob Maker App

This app shows how to create dynamic blob SVGs on the fly, which you can then drag and drop to a Miro board.

⚠️ Note that the drag and drop part of the app only works with a public URL, so you will need to use Glitch or another service to host your app! ⚠️

👨🏻‍💻 App Demo

blob-maker-demo.mp4

📒 Table of Contents

• Included Features
• Tools and Technologies
• Prerequisites
• Associated Developer Tutorial
• Run the app locally
• Folder Structure
• Contributing
• License

⚙️ Included Features

• Miro Web SDK
  • miro.board.ui.on('drop')
  • miro.board.createImage
  • miro.board.ui.openPanel(options)
  • draggable elements

🛠️ Tools and Technologies

• React
• TypeScript
• Vite

✅ Prerequisites

• You have a Miro account.
• You're signed in to Miro.
• Your Miro account has a Developer team.
• Your development environment includes Node.js 14.13 or a later version.
• All examples use npm as a package manager and npx as a package runner.
• Glitch account.

📖 Associated Developer Tutorial

To view a more in depth developer tutorial of this app (including code explanations) see the Asset Search and Filter tutorial on Miro's Developer documentation.

🏃🏽‍♂️ Run the app locally (Not Recommended)

⚠️ Note that the drag and drop part of the app only works with a public URL, so you will need to use Glitch or another service to host your app! ⚠️ It is recommended to deploy this on Glitch. See next section below for more details.

1. Run npm install to install dependencies.

2. Run npm start to start developing.
   Your URL should be similar to this example:

   http://localhost:3000
   

3. Open the app manifest editor by clicking Edit in Manifest.
   In the app manifest editor, configure the app as follows:

   appName: Blob Maker
   sdkUri: "http://localhost:3000"
   scopes:
     - boards:read
     - boards:write

You can read more about Miro's app manifest on the developer documentation.

4. Go back to your app home page, and under the Permissions section, you will see a blue button that says Install app and get OAuth token. Click that button. Then click on Add as shown in the video below. In the video we install a different app, but the process is the same regardless of the app.

⚠️ We recommend to install your app on a developer team while you are developing or testing apps.⚠️

install-app.mov

5. Go to your developer team, and open your boards.
6. Click on the plus icon from the bottom section of your left sidebar. If you hover over it, it will say More apps.
7. Search for your app Blob Maker or whatever you chose to name it. Click on your app to use it, as shown in the video below.

search-for-app.mov

🏃🏽‍♂️ Run the app on Glitch (Recommended)

1. Create a Glitch account if you do not have one already.
2. Click New Project.
3. You should be able to select the option "Import from Github".
4. You can copy this app folder into a new github repo and use this url or you can use https://github.com/CharlieWinters/miro-blob-maker
5. After the app starts up, it will have a unique url that will serve the app over https. Click "Preview" in the bottom bar and then "Preview in a new window".
6. You should see "Great, your app is running locally", copy the url.
7. Go into your app settings, and click on edit manifest.
8. Add your public URL to your manifest like so:

appName: Blob Maker
sdkVersion: SDK_V2
sdkUri: https://polar-near-sumac.glitch.me
boardPicker:
  allowedDomains: []
redirectUris: []
redirectUriForSdk: ""
scopes:
  - boards:write
  - boards:read
icons:
  colored: ""
  outline: ""

9. From the app settings page, make sure to Install app and get OAuth token if you haven't.
10. Open a board & you should see your app in the main toolbar when you click the three dots.

🗂️ Folder structure

.
.
├── src
│  ├── assets
│  │  └── style.css
│  ├── app.js      // The code for the app lives here
│  └── index.js    // The code for the app entry point lives here
├── app.html       // The app itself. It's loaded on the board inside the 'appContainer'
└── index.html     // The app entry point. This is what you specify in the 'App URL' box in the Miro app settings

🫱🏻‍🫲🏽 Contributing

If you want to contribute to this example, or any other Miro Open Source project, please review Miro's contributing guide.

🪪 License

MIT License.