Skip to Content
StudioSyncingBoardIn-Place Engine

In-Place Engine

Tagging native Miro item metadata to update images without disrupting board layouts.

The primary user experience flaw in traditional design sync plugins is canvas clutter. Most plugins handle updates by uploading a new image file and pasting it beside the old image. On large product design boards, this destroys carefully organized flow layouts, breaks arrow connectors, wipes attached comment threads, and disrupts visual grid alignment.

SyncingBoard solves canvas clutter by executing non-destructive, in-place image payload updates.

1. The In-Place Swap Mechanics

Instead of deleting and recreating canvas nodes, SyncingBoard operates through MiroAdapter.ts using the Miro Web SDK v2:

// Pseudocode for in-place metadata swap in MiroAdapter.ts
async function syncInPlace(miroImageItem: ImageItem, newSvgPayload: string) {
  // 1. Snapshot original canvas coordinates and dimensions
  const snapshot = {
    x: miroImageItem.x,
    y: miroImageItem.y,
    width: miroImageItem.width,
    height: miroImageItem.height,
    rotation: miroImageItem.rotation
  };
 
  // 2. Perform non-destructive URL payload swap
  miroImageItem.url = await uploadSanitizedPayload(newSvgPayload);
  await miroImageItem.sync();
 
  // 3. Restore exact canvas bounds & apply aspect ratio scale
  await restoreGeometryBounds(miroImageItem, snapshot);
}

The 4-Step Update Lifecycle

  1. Deterministic Hash Generation: pairingId.ts generates a deterministic SHA-256 pairing hash based on source ID, frame ID, and sanitized title.
  2. Metadata Tagging: When a frame is first synced or adopted, SyncingBoard tags the Miro widget using native appData metadata tags containing the pairing hash.
  3. Target Identification: During subsequent sync triggers, MiroAdapter queries active Miro items for matching pairing hashes.
  4. Non-Destructive Payload Swap: MiroAdapter updates the url property of the existing image widget directly, leaving its node ID, board position (x, y), connector lines, and attached stakeholder comments 100% intact.

2. Operational Spectrum: Adopt, Import & Batch Sync

SyncingBoard provides three flexible operational modes to fit any team workflow:

Import Mode

Pulls fresh design frames from Figma or Penpot directly into Miro as newly tagged widgets, automatically laying them out in organized grid rows.

Adopt Mode

Tags an un-synced image widget already sitting on your Miro board with a design source pairing ID, turning existing static screenshots into active live-sync targets without replacing the widget.

Batch Board Sync

Scans the entire Miro board to update single screens or all tagged screens in a single action, utilizing rate-limited request queues (/api/relay/update-image) to maintain API stability.

3. Preserving Board Integrity & Geometry

Swapping vector SVGs into existing whiteboard widgets can alter element aspect ratios. SyncingBoard implements a geometry preservation engine in MiroAdapter.ts that snapshots original widget bounds, applies the new image payload URL, and rescales the widget container to maintain exact spatial alignment and grid layout bounds across re-syncs.

Continue exploring: Sources & Whiteboard Targets or return to SyncingBoard Overview.