> ## Documentation Index
> Fetch the complete documentation index at: https://docs.buildai.space/llms.txt
> Use this file to discover all available pages before exploring further.

# Visual editor

> Customize your app's design, layout, and styles visually without writing code.

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.

![Go to builder and click the finger button](https://firebasestorage.googleapis.com/v0/b/buildai-4bad5.appspot.com/o/apps%2FMawKjabo6bFib5kF3Aac%2Fusers%2FT7bmOuNUliXu3aCLQl0sE0aRWZo2%2Fb2e3e4df-6c45-4057-8c3d-c62a2f2bc8fa.jpg?alt=media\&token=329135ec-be7c-469d-8634-5583cbaff9b8)

## 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.

![Click area in app preview you would like to edit](https://firebasestorage.googleapis.com/v0/b/buildai-4bad5.appspot.com/o/apps%2FMawKjabo6bFib5kF3Aac%2Fusers%2FT7bmOuNUliXu3aCLQl0sE0aRWZo2%2F4734bc47-fc9a-4eb5-bd31-54c13d36e0c5.jpg?alt=media\&token=7a9891c9-a1cb-49bd-87fc-68c1a2a03c24)

## 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.

![Item edit menu is opened in left side allowing you to edit item content, colors, font, size, spacing and more advanced abilities](https://firebasestorage.googleapis.com/v0/b/buildai-4bad5.appspot.com/o/apps%2FMawKjabo6bFib5kF3Aac%2Fusers%2FT7bmOuNUliXu3aCLQl0sE0aRWZo2%2F0fd41f78-0334-42dc-85eb-e7eda75d457e.jpg?alt=media\&token=3d6ce6df-7f51-4a2b-bd21-fb9b9c243576)

## 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.

![More abilities as font size, spacing and more](https://firebasestorage.googleapis.com/v0/b/buildai-4bad5.appspot.com/o/apps%2FMawKjabo6bFib5kF3Aac%2Fusers%2FT7bmOuNUliXu3aCLQl0sE0aRWZo2%2F7e28ef16-ea0d-484c-a502-dd8d6c85b888.png?alt=media\&token=8c19e873-2fdb-4cca-9524-35b479deb4cc)

## 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!