# How to Convert a Full Wireframe Page into Code?

> Turn your full-page Wireframes into ready-to-use to use frontend code instantly using MockFlow's Build Mode. Follow these...

Source: https://mockflow.com/docs/wireframepro/build-mode/to-convert-wireframe-page-into-code

Turn your full-page Wireframes into ready-to-use to use frontend code instantly using MockFlow's Build Mode. Follow these instructions below,

1. Inside your WireframePro editor, click on the ‘Build’ option from the top menu.

![Navigate to 'Build' in the WireframePro editor](https://assets.mockflow.com/docs/media/ec830cd2a3efe2cdfa325582.webp)

1. You’ll see two options: click on 'Convert Full Page.'

![Click on the 'Convert Full Page'](https://assets.mockflow.com/docs/media/affc7fc9e80b2331d58e0b28.webp)

1. Next, select the wireframe page you want to convert and choose the type of code you want to generate.

![image](https://assets.mockflow.com/docs/media/dbae4da81c549d8230c0cd38.webp)

1. MockFlow supports multiple frameworks like Tailwind, Bootstrap, and more. Select your preferred code type, then choose a specific version based on the selected framework. Click ‘Convert’ to begin the code generation process.

![image](https://assets.mockflow.com/docs/media/7e5727093f50abf9ea0cf118.gif)

5On clicking Convert, the code generation process for the selected framework begins. Click OK once the generation is complete.

![image](https://assets.mockflow.com/docs/media/69ba0ac496bbe90afbaa6788.gif)

1. To see how your code exactly renders as UI, click on the 'Preview' option from the top right corner.

![image](https://assets.mockflow.com/docs/media/c0d46cb5fa221b8dad7c325e.gif)

1. The code can be exported by clicking on the download icon in the top menu bar. [Refer to this article](https://support.mockflow.com/article/how-to-export-front-end-code-from-a-wireframe) to learn how to export the frontend code.

Here's a video demonstrating this MockFlow Build Mode Feature:

[Video](https://www.youtube.com/embed/rXeGu72Xabo)