Create Wireframe from metadata using API

@Jason Bougas

All the methods and events you’ll need to accomplish this are available in the SDK.
 

You’ll have to implement the logic and flow of sync’ing the data/visuals. Miro gives each widget (term for any item on the Miro canvas) a unique id- and the method  Miro.board.widgets.create() returns a Miro js object/array of objects, each complete with their unique Miro id.  Furthermore, you can store some meta data on each widget- which would give you the ability to store down the original source ID per record/item in your database(db). As you’ll likely have a nesting component structure to your wireframe data, I imagine you’ll likely have some internal id referencing in your db structure… your makeWireframeX() method will access each record accordingly and use them to generate/style your wireframes. Once the metadata of ‘database_uid’ is stored per widget in Miro, you can run a return trip of the Miro ids to the db… how you handle this all depending on your logic, handling of source of truth, cardinality, relation etc. 

Anyway... 

Miro Events: Widget creation, deletion and move(transform update) may be useful for you. 

Less obvious maybe— You’ll also have to build “wireframes” from scratch Miro widgets (likely shapes). At this moment the Miro “wireframing” app/plugin/tool, (like the kanban or mind map) is a special kind of object not exposed to developers- meaning you can’t read or write to it through methods or property-sets… So, yah - you’ll have to build up a wireframe library from scratch (e.g. slider = long rectangle shape intersected by a circle shape which is set at V% the width (X dimension) of the rectangle:: where V is your default slider value). Then your data structure will reflect the parameters of each component. 

Also: generating a compound wireframe in Miro (many widgets co-positioned) at this time can be done, but the sdk does not yet allow you to “group” the widgets… so you’ll have to group manually … or just move them with multi select.