At work, we build white-label mobile apps connected to a headless CMS. Most CMSs can show website data in an iFrame, but that's not an option for mobile app previews. We solved this by exporting Figma mockups as React components. It works, but requires significant effort to embed into the CMS for each project.

As an experiment, I built a no-code tool that creates live previews from Figma mockups (exported as SVGs) and connects them to API. Export your design, visually connect data fields, and get real-time previews with actual content.

From a technical perspective, the editor is xyflow/react + react-complex-tree + zustand. The lib itself includes tons of heuristics and 130 unit tests that try to keep it stable.

Here is the library code: https://github.com/vladvlasov256/flowmolio

The embedding of a live preview is pretty simple: <FlowMolioPreview dataSources={{"data-source-1": product}} blueprint={blueprint} />

The dataSources is the data to show, and the the blueprint is a file saved from the editor.

---

There is also a live demo with a fake CMS: https://try.flowmol.io/

---

Would appreciate any feedback or questions.