The latest iteration of Miro's Web SDK has brought significant changes that impact the way developers build and integrate their applications with the platform. In this guide, we'll dive into the key updates and provide a comprehensive overview of what you need to know to succeed in swift app development.

Widgets and Items

One of the most notable changes is the introduction of independent constructors for each widget type, now referred to as "items." This change aims to simplify the process of creating and updating widgets. For instance, when building an image item, you'll notice a similar structure to the previous board.widgets.create() call.

| v1 Create Widget Call | v2 Equivalent |

| --- | --- |

| Create an Image | Create an Image |

| Create a Shape | Create a Shape |

Synchronizing Data

To enhance performance and improve user experience, Miro has introduced a new sync() function for each object type. This method updates the content of an object without requiring a full board refresh. A great example is updating the description of a specific card; simply call card.sync() to ensure the refreshed data is immediately available.

Modals and Panels

The Miro UI has undergone significant changes since the release of the v1 Web SDK. To create consistency in user experience, the v2 SDK introduces two primary extension points: the app panel (also known as the left panel) and pop-up modal.

  • The app panel should be used for most application interactions and can be extended to provide multiple views depending on the context.
  • The pop-up modal steals focus of the browser window and is ideal for visually-intensive user interactions, such as configuring settings or customizations.

Additional Changes

Several updates aim to improve the developer experience and introduce consistency between the Web SDK and REST API. These changes include:

  • Automatic authentication when a user clicks on an app icon, eliminating the need for explicit authorization flows.
  • App names and icons will be managed in App Settings, with no longer a programmatic way to update either.
  • Some v1 endpoints designed for Enterprise accounts have been removed from the v2 Web SDK; any changes should be managed through the REST API.
  • Experimental features or methods can be previewed in the miro.board.experimental namespace.

Example: Converting Sticky Notes to Shapes

As you migrate your app from v1 to v2, you may encounter changes that require updates. We've included an example of converting sticky notes to shapes, highlighting key differences between the two versions. The full JavaScript source code for both the v1 and v2 sample apps is provided, along with a description of each affected piece of code.

| v1 Change | ||

| --- | --- | --- |

| bottomBar is no longer availabletitle can no longer be set or changed programmaticallysvgIcon can no longer be set or changed programmatically

|

|

| - The endpoint name has changed

|

|

| widget is now item STICKER is now sticky_note

|

|

| - Widgets are no longer deleted by ID. Rather, the item object is removed from the board object.

|

|

| - Shapes now have an independent creation endpoint, as do all other widget types.text is now content

|

|

| - Notifications in v2 are now handled via the showInfo() method.

By understanding these changes and updates, you'll be well-equipped to develop swift apps that seamlessly integrate with Miro's Web SDK v2.