Visual editor

The App Visual Editor is a powerful, user-friendly tool that lets you select and edit any area of your app directly—without consuming credits or needing to use the builder chat. Best of all, it’s available on desktop, making it easy to visually customize your app on a larger screen with precision. Follow this straightforward step-by-step guide to start editing your app visually and effortlessly!

​

Step 1: Activate Visual Edit Mode

Begin by opening your app’s builder interface on your desktop. Look for the finger icon located at the bottom left corner of the screen. Clicking this icon will activate the Visual Edit Mode, enabling you to click on and edit elements directly within the app preview.

​

Step 2: Select the Area You Want to Edit

With Visual Edit Mode active, simply click on the part of your app preview you want to modify. This action opens the editing options specific to that element, allowing you to customize it instantly.

​

Step 3: Use the Item Edit Menu

Once you’ve selected an element, the item edit menu will appear on the left side of your screen. Here, you can adjust the content such as text, colors, fonts, sizes, spacing, and other advanced settings to tailor the element exactly how you want it.

​

Step 4: Explore More Editing Abilities

Dig deeper into the advanced options to fine-tune your design. You can modify font size, weight, decoration, alignment, text transformation, spacing, and other styling features to perfectly customize your app’s visual elements.

​

Annotate your app for the builder chat

Want the builder to make the change for you? Use Annotate to point at exactly what you mean.

1. Click Annotate next to the attachments button in the chat input.
2. Click any element in your app preview and type a short comment, like “make this bigger”. Click the send arrow or press Enter to save it.
3. Repeat for as many elements as you like. Each one gets a numbered pin in the preview and a matching chip above the chat input.
4. Click Send. You can add a message or send the annotations on their own.

BuildAI receives each comment together with a screenshot of the element and details about it, like its text, where it sits on the page and where it lives in your app’s code, so it knows exactly which part of your app to change. A small thumbnail of the screenshot appears on each chip; click it to see it full size. To remove an annotation before sending, click the x on its chip, or click the element again and click the trash icon. On mobile, tap Annotate in the chat: the chat closes so you can tap elements in your app, and each comment opens in a panel at the bottom of the screen. Tap Done to go back to the chat and send your annotations.

​

Summary

• The App Visual Editor is available on desktop, providing a convenient workspace to edit your app visually.
• Click the finger icon at the bottom left corner to activate Visual Edit Mode.
• Click any element in your app preview to open its editing options.
• Use the left-side menu to adjust content, colors, fonts, sizes, spacing, and more.
• Explore advanced styling options to customize your app’s look precisely and efficiently.

With the desktop App Visual Editor, you have all the tools you need to make your app look exactly how you envision—quickly, intuitively, and without any additional costs. Enjoy creating your perfect app experience with ease!