Skip to main content
Vibe Coding is a visual editing mode. Instead of describing where something is, you point at it - then describe what you want to change.

​
How it works

  1. Open a session and click Vibe Coding in the bottom toolbar
  2. Your live site appears in the center panel
  3. Click any element - text, image, button, heading, section
  4. The selected element is highlighted with an orange dashed border
  5. Describe the change in the text field on the right
  6. Foenix finds the exact file responsible and applies the change

​
What you can edit

ElementWhat you can change
Text / headingContent, font size, color, weight, alignment
ImageReplace image, change alt text, adjust size
ButtonLabel, color, border radius, link target
Navigation itemLabel, URL, visibility
Section / blockLayout, background, spacing, visibility

​
Example prompts

Change this heading to "Welcome to Pizza School Dubai"

Make this button larger and change the label to "Book a class"

Replace this image with a food photography style banner - warm tones

Hide this section on mobile devices only

​
Tips

  • You can switch between Vibe Coding and the chat panel at any time in the same session
  • If you select the wrong element, click elsewhere to deselect and try again
  • For changes affecting multiple elements at once, use Direct Edits instead
  • Works with both classic themes and block (FSE) themes
Always make a backup before making changes on a production site. Backups →