Skip to main content
Direct, Precise, Instant — Skip the back-and-forth. Select elements on screen, edit them visually, and apply changes instantly. Visual Editing empowers you to iterate faster while using fewer AI credits.
Visual Editing transforms the way you build. Instead of describing UI changes to AI, you select elements directly in the preview, adjust them visually, and see results in real-time. Perfect for fine-tuning layouts, updating text, swapping images, or refining interactions—all without consuming extensive AI resources.

​
Why Visual Editing Matters

Faster Iterations

Make changes in seconds, see results instantly. No waiting for AI responses.

Lower Credit Cost

Visual modifications consume minimal credits compared to descriptive edits.

Precise Control

Select exactly what you want to change. No ambiguous descriptions needed.

Live Preview

See every adjustment update in real-time as you modify elements.

​
Getting Started

1

Enable Visual Editing

Click the Edit button in the bottom-left corner of the chatbot to activate Visual Editing mode
2

Select an Element

Hover over the element you want to modify, then click to open the editing toolbar
3

Make Your Changes

Use the available tools to adjust text, images, styling, or properties
4

Apply Changes

Click the send arrow or press Enter to apply your edits and exit Visual Editing mode

​
Editing Different Elements

​
Text Elements

Click directly on any text to edit its content. The toolbar provides comprehensive formatting options:

Text Formatting

Adjust font size, color, style (bold, italic, underline), and text alignment. Add hyperlinks to make text interactive.
Modify padding and margin to control space around text elements and their positioning.
Text editing demonstration showing font size, color, and style adjustments Advanced text editing features including alignment, padding, margin, and hyperlink insertion

​
Image Elements

Select any image to replace or customize it:

Replace Image

Upload a new image file (PNG, JPG, SVG, WEBP, GIF) to replace the selected image instantly.
Adjust corner radius for rounded corners, control padding and margin, or add hyperlinks for interactivity.
Image replacement workflow showing file upload and instant preview update Image customization showing corner radius, padding, margin, and hyperlink adjustments

​
Other Elements (Divs, Buttons, Spans, etc.)

Customize styling and interactivity for any page element:

Styling Options

Modify corner radius, padding, margin, or background color to match your design vision.
Add hyperlinks to make any element clickable, turning static elements into interactive components.
Delete elements you no longer need with a single click. The element is removed from your page immediately.
Element deletion showing selection, delete confirmation, and removal from page

​
Keyboard Shortcuts

Speed up your workflow with these keyboard shortcuts:
  • Cmd+Z — Undo your last change
  • Shift+Cmd+Z — Redo your last change
  • Ctrl+Z — Undo your last change
  • Ctrl+Shift+Z — Redo your last change

​
Applying & Saving Changes

Important: Changes are only saved when you apply them. Unsaved modifications will be lost if you exit without applying.
When you’re ready to finalize your edits:
1

Review Changes

Take a moment to review all modifications in the preview
2

Apply Changes

Click the send arrow or press Enter to apply your edits and exit Visual Editing mode
3

Check Credit Usage

View the credit cost displayed after each edit (for example: Credits used: 20). Depending on change complexity, some edits may consume no credits at all.
Workflow showing edit review, application via send arrow, and credit usage display

​
Exiting Visual Editing

You have two options when leaving Visual Editing mode:

Save & Exit (Apply Changes)

Click the send arrow or press Enter to save your edits and exit Visual Editing mode. Your changes become permanent.
Click the Edit button again in the bottom-left corner. In the popup menu, select Discard changes to exit without saving any modifications.
Exit workflow demonstrating both save/apply and discard/cancel options

​
Best Practices

Pro tip: Use the undo/redo shortcuts (Cmd+Z / Ctrl+Z) liberally. You can experiment freely and revert any mistakes instantly without affecting your AI credit balance until you apply changes.

Be Specific

Visual Editing works best for targeted, precise modifications rather than complete redesigns.

Edit in Batches

Make multiple related changes before applying to optimize credit usage.

Review First

Always review changes in the preview before applying them to avoid unintended modifications.

Combine with AI

Use Visual Editing for refinements and AI chat for structural changes to your website.

​
Summary

Visual Editing transforms “slow, credit-heavy back-and-forth” into “quick, precise, and affordable” improvements you fully control. By selecting elements directly in the preview, you eliminate misunderstandings, shorten feedback loops, and keep projects moving forward. Whether you’re polishing copy, swapping images, fine-tuning layouts, or adding interactivity, you can iterate in seconds and apply changes confidently—no guesswork, no waste.