Visual Editor: Edit Your App Without Writing Code

What Is the Visual Editor?

The Visual Editor is a point-and-click editing mode built into GenMB's live preview. Instead of writing CSS or modifying HTML in the code editor, you click directly on elements in your app preview and change their properties through an intuitive panel. Text, colors, spacing, font sizes, layout direction — all editable with a few clicks.

It bridges the gap between the AI-generated output and your exact vision. While chat refinement is great for describing changes in natural language, the Visual Editor lets you make precise, pixel-level adjustments instantly.

Getting Started

Step 1: Open the Visual Editor

In the app editor, look for the Visual Editor toggle above the live preview panel. Click it to activate the editing overlay. You will see a subtle border highlight appear as you hover over elements, indicating they are selectable.

Step 2: Select an Element

Click on any element in the preview — a heading, a button, an image, a card, or any visible component. A property panel appears showing the editable properties for that element.

Step 3: Make Your Changes

Use the property panel to modify the selected element. Changes are applied in real time so you see the result immediately in the preview.

Step 4: Save Changes

When you are happy with your edits, click Save to persist the changes back to the code. The Visual Editor modifies the actual source files, so your edits survive regeneration and deployment.

Editing Text Inline

One of the most common Visual Editor tasks is changing text. Click on any text element — headings, paragraphs, button labels, link text — and you can edit it directly in place.

How it works:

1. Click on the text element
2. The text becomes editable with a cursor
3. Type your new text
4. Click outside or press Enter to confirm

This is especially useful for:

• Replacing placeholder text with real content
• Fixing typos without opening the code editor
• Adjusting heading copy to test different messaging
• Updating button labels ("Submit" to "Get Started")

Modifying Colors and Backgrounds

The Visual Editor's color panel lets you change any element's colors visually:

Text Color

Select a text element and use the color picker to choose a new color. The picker shows your app's existing color palette for consistency, plus a full color wheel for custom choices.

Background Color

Select any container — a card, section, or div — and modify its background color. This works for solid colors, and you can adjust opacity for subtle overlays.

Border Color

For elements with borders, you can modify the border color independently from the background and text colors.

Pro tip: Hold a color from one element and apply it to another to maintain visual consistency across your app.

Adjusting Spacing and Sizing

The spacing panel gives you control over the box model properties of any element:

Padding

Adjust the internal spacing around an element's content. You can modify all four sides independently (top, right, bottom, left) or lock them together for uniform padding.

Margin

Control the external spacing between elements. This is useful for adjusting the gap between cards, sections, or any layout elements.

Width and Height

Set explicit dimensions for elements. You can use pixels, percentages, or viewport units depending on your needs.

Border Radius

Round the corners of any element. This is one of the most impactful visual tweaks — converting sharp rectangles into soft, modern cards.

Adjusting Layout

The layout panel handles how child elements are arranged within a container:

Flex Direction

Switch between horizontal (row) and vertical (column) layout. Click a container and toggle the direction to instantly rearrange its children.

Alignment

Control how items align along both axes — start, center, end, or stretch. This is particularly useful for centering content within hero sections or aligning items in navigation bars.

Gap

Adjust the spacing between flex or grid children uniformly without touching individual margins.

Wrap

Toggle whether items wrap to the next line when they exceed the container width. Useful for responsive card grids and tag lists.

How Changes Sync to Code

The Visual Editor does not just overlay temporary styles. Every change you make is written back to the actual source code of your project:

• Inline style changes modify the corresponding CSS properties in your stylesheets or inline styles
• Text changes update the HTML content in the appropriate file
• Layout changes modify the flexbox or grid properties in your CSS

When you click Save, the modified files are updated in GenMB's code storage. The code editor reflects the changes immediately, and they persist through future refinements and deployments.

This means you can freely mix Visual Editor changes with code editor changes and chat refinements. They all modify the same source files.

Tips and Tricks

Use the Visual Editor for Fine-Tuning

The Visual Editor excels at small, precise adjustments. After the AI generates your app, use the Visual Editor to fine-tune spacing, adjust colors, and fix text — then use chat refinement for larger structural changes.

Hover to Inspect

Before clicking, hover over elements to see their boundaries highlighted. This helps you select the right element in nested layouts where multiple containers overlap.

Work Top-Down

Start with the largest containers (sections, page-level divs) and work your way down to individual elements. Adjusting a parent container's layout first prevents having to redo child element positioning later.

Undo with Version History

If a Visual Editor session goes wrong, use GenMB's version history to roll back. Every save creates a checkpoint you can restore.

Combine with Chat Refinement

The Visual Editor and chat refinement work together naturally. Use the Visual Editor to get the pixel-level details right, and use chat refinement for changes that affect multiple elements or require new functionality.

When to Use Visual Editor vs Code Editor

The Visual Editor handles presentation changes. For structural changes, new features, or logic, use the code editor or chat refinement.

Summary

The Visual Editor lets you click on any element in your app preview and modify it instantly — text, colors, spacing, sizing, and layout. Changes write back to the actual source code, so they persist through refinements and deployments. Use it for fine-tuning AI-generated output, fixing text, adjusting visual details, and getting pixel-perfect results without touching the code editor. For structural changes and new features, combine it with chat refinement and the code editor.