Categories

How to Preview the Generated Frontend Code in Build mode?

MockFlow provides two options to preview the generated frontend code,


1Use the ‘Preview’ option in the top right corner to view the UI inside the editor.


Youttube full video - Built with AI (8).gif


2Click ‘Open in New Window Tab’ to launch a live website preview in a new browser window.


Note - MockFlow provides in-app preview support for limited frameworks


Supported Framework Previews

MockFlow supports live previews for the following frameworks:

  1. Tailwind
  2. Bootstrap
  3. Material
  4. Shadcn
  5. Ant Design
  6. Bulma

These frameworks allow instant UI previews directly within MockFlow.


Supported Framework Previews - MockFlow Build Mode


Watch this video to learn how to generate frontend code for an Android Mobile App UI using MockFlow Build Mode and preview it in Android Studio:




Frameworks without Preview Support

MockFlow does not provide preview for the front-end code generated from these frameworks:

  1. React Tailwind
  2. React Shadcn
  3. React Bootstrap
  4. React Ant Framework
  5. Vue Tailwind
  6. Vue Bootstrap
  7. Vue Ant Framework
  8. iOS UI
  9. iPadOS UI
  10. Watch OS UI
  11. Android UI
  12. Flutter UI
  13. MS Windows UI
  14. macOS UI

These require an online playground of the desired framework to preview the generated frontend code. You can export the code and open it within the respective framework to preview it.




Rate this article
great ok bad
For more questions - Contact Us
...