Create Wireframe from metadata using API

  • 28 January 2021
  • 1 reply

I was wondering whether I can create dynamic wireframes using metadata stored in a database?

Has anyone done this?

For example if I have a list of fields, data types and the order they should appear on a page could I render a dynamic wireframe?  So if I change the order of the fields it would update the wireframe.

Ideally I would like to drag items on the wireframe and update my metadata as well or add new items and have the metadata update.

I would also like to tag every field with a unique id that ties it back to my metadata.  This way I can track dependencies back from the wireframe to the metadata.

1 reply

Userlevel 7
Badge +5

@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. 


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.