Skip to main contentWhat is Visual Editor?
Visual Editor lets you edit your app’s appearance by clicking on elements directly—no coding required. Want to change a headline? Click it and type. Need a different color? Select the element and pick from the color palette.
It’s like editing a document, but for your app.
Selecting and Editing Elements
How to Select
- Open your project in OptiDev
- Click the Visual Editor tab above your app preview
- Click any element on your page (text, buttons, images, etc.)
- A blue outline appears showing what’s selected
What You Can Edit
Once you select an element, the sidebar shows options you can change:
- Text content — Click and type to change words
- Colors — Background, text color, borders
- Size — Width, height, padding, margins
- Position — Move elements around the page
- Visibility — Show or hide elements
Common Tasks
Change Text
- Click on any text element
- The text becomes editable
- Type your new content
- Click outside to save
Change Colors
- Select an element
- In the sidebar, find Background or Text Color
- Click the color swatch
- Pick a new color or enter a hex code
Adjust Spacing
- Select an element
- Look for Padding (space inside) or Margin (space outside)
- Drag the sliders or enter specific values
Rearrange Elements
- Select an element
- Drag it to a new position
- Drop it where you want
Working with Agent Mode
Visual Editor and Agent Mode work together. If you can’t find an option in Visual Editor, just ask the agent:
- “Move this section above the header”
- “Make all buttons rounded”
- “Add a shadow to this card”
The agent makes the code changes, and you see the results in Visual Editor.
Limitations
Some changes are easier to make through Agent Mode:
- Adding new sections or components
- Complex layouts with multiple columns
- Interactive features (forms, popups, animations)
- Changes that affect multiple pages at once
When in doubt, describe what you want to the agent—it’ll figure out the best approach. 
