# How to Get Frontend Code for a Wireframe Section?

> Turn the selected part of your wireframe into ready-to-use frontend code instantly with MockFlow's Build Mode. It generates code...

Source: https://mockflow.com/docs/wireframepro/build-mode/to-get-frontend-code-for-wireframe-section

Turn the selected part of your wireframe into ready-to-use frontend code instantly with MockFlow's Build Mode. It generates code for the specific section you select. Follow the steps below to get started:

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

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

1. You’ll see two options; click on 'Convert Selected Part.'

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

1. Next, select the wireframe section you want to convert and click on 'Select a Comp or group and click here' in the top left.

![WowTo KB settings (15).gif](https://assets.mockflow.com/docs/media/1fa6c36789a82a3da5500233.gif)

1. And choose the type of code you want to generate. Enter the name of the code file and select your preferred code framework, 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/e4079a25307c62fc2cf6b1db.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/5fb927dcd1615d836b5cc1e1.gif)

1. To view, click on the 'preview' option from the top right.

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

1. The frontend code of the selected wireframe section can be exported and added to your code repository. [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.