Docs/Visual Editor
DocsVisual Editor
Free

Visual Editor

Click elements in the live preview to edit text, styles, and layout — changes are applied directly to your source code.

What is the Visual Editor

The Visual Editor lets you click directly on elements in your app's live preview to modify them. Change text, adjust colors, tweak spacing, and update layout — all without touching code. The AI translates your visual changes into the underlying source code automatically.

Click any visible element in the preview to select it and open the editing panel. Make changes visually and the AI updates the actual source code to match your edits. The Visual Editor works alongside chat refinement and GenMB Code for a complete editing workflow.

No AI credits consumed

The Visual Editor does not consume AI generation credits for simple property changes like text content, colors, and spacing. Only complex multi-property edits that require AI interpretation count toward your quota.

How to Activate

The Visual Editor is toggled on and off from the preview toolbar at the top of the app preview panel. Activating it takes just a couple of clicks.

1

Open your app in the editor

Make sure the preview panel is visible so you can see the live rendering of your app.
2

Click the Visual Editor toggle

Look for the pencil icon in the preview toolbar. Click it to activate the Visual Editor mode.
3

Hover to discover elements

When active, hovering over elements in the preview highlights them with a selection outline so you can see exactly what you are targeting.
4

Click to select and edit

Click any highlighted element to select it and open the editing controls. Make your changes in the panel that appears.
5

Toggle off when done

Toggle off to return to normal preview mode where clicking navigates the app as usual.

Editing Elements

Once you select an element, you can modify its properties through a simple editing panel. The available options depend on the type of element selected.

  • ●Text content — Edit headings, paragraphs, button labels, and any visible text inline.
  • ●Colors — Change text color, background color, and border color using a color picker.
  • ●Spacing — Adjust padding and margin values to control spacing around and within elements.
  • ●Typography — Modify font size, font weight, and text alignment.
  • ●Layout — Change display properties, flex direction, and alignment for container elements.

For complex changes that span multiple properties, describe what you want in the edit prompt — the AI handles multi-property updates in one step.

How Changes Are Saved

Every visual edit creates a new version of your app. The AI modifies the underlying source code to reflect your changes, and a version snapshot is saved automatically.

  • ●Changes are applied to the actual source code, not just the rendered preview.
  • ●A new version is created after each edit, so you can always rollback via Version History.
  • ●The code editor updates in real-time to show the modified source files.
  • ●Multiple quick edits may be batched into a single version to avoid cluttering the history.
Check the code diff after visual edits to understand what changed in the source. This is a great way to learn how CSS properties map to visual changes.

Tips

Make the most of the Visual Editor with these recommendations.

Use it for quick tweaks

The Visual Editor is faster than writing a chat prompt for small changes like updating text, adjusting a color, or tweaking spacing. Save chat refinement for bigger structural changes.

Combine with chat refinement

Use chat refinement for a broad redesign, then follow up with the Visual Editor to fine-tune specific elements. This two-step approach gives you both speed and precision.

Selecting nested elements

If an element is hard to select, try selecting its parent container first, then drill down to the nested element you want to edit.

Limitations

The Visual Editor works on rendered HTML elements. Some scenarios require using chat refinement or GenMB Code instead.

Elements that may not be selectable

Dynamic content generated by JavaScript at runtime may not appear in the element tree. Elements inside iframes, canvas elements, or shadow DOM are also not accessible to the visual editor.
For structural changes like adding new sections or rearranging page layout, chat refinement or GenMB Code is more effective. The Visual Editor is designed for modifying existing elements, not creating new ones.

Very deeply nested elements may require multiple clicks to reach. Use the parent-first approach — select the outer container, then work your way inward to the element you want.

FAQs

Is the Visual Editor available on the Free plan?▾
Yes. The Visual Editor is available on all plans including Free. There are no feature restrictions based on plan.
Can I undo a visual edit?▾
Yes. Every visual edit creates a new version. Open the Version History panel in the sidebar and click any previous version to restore it.
Does the Visual Editor modify my actual code?▾
Yes. The Visual Editor is not just a preview overlay — it modifies the underlying source code (HTML, CSS, JSX) to match your changes. You can see the updated code in the code editor after each edit.
Why can't I select certain elements?▾
Elements that are dynamically generated by JavaScript after the initial render, or elements inside iframes and shadow DOM, may not be selectable. For these elements, use chat refinement or GenMB Code to make changes by describing what you want.

Ready to build?

Create your first app for free — no credit card required.

Image to CodeGenMB Code