Visual Edits
Last updated October 8, 2025
Make instant design changes to your landing page directly in the preview — no waiting for AI, no back-and-forth.
What is Visual Edit?
Visual Edit lets you click on any element in your preview and modify its appearance in real-time. Changes update your code automatically, giving you precise control over your design without depending on the AI agent for every small tweak.
How to Use Visual Edit
Getting Started
- Open Visual Edit: Click the Edit icon in the chatbox when your agent is idle.
- Select an Element: Click any element in your preview to select it.
- Make Changes: Use the editing panel to adjust styles and content.
- Preview Live: See your changes instantly in the preview.
- Save: Click "Save" to update your code permanently, or "Discard" to cancel.
What You Can Edit
Content Tab
- Text Content: Update any static text directly.
- Cannot edit: Text from databases, variables, or dynamic content (like items in a list).
- Colors: Change text and background colors with the color picker.
- Corner Radius: Round the corners of elements (top, right, bottom, left).
- Opacity: Adjust transparency from 0-100%.
- Shadow: Add or remove shadow effects.
Appearance Tab
- Colors: Change text and background colors with the color picker.
- Corner Radius: Round the corners of elements (top, right, bottom, left).
- Opacity: Adjust transparency from 0-100%.
- Shadow: Add or remove shadow effects.
- Font Family: Switch between available fonts or inherit from parent.
- Font Weight: Choose from regular, bold, semibold, and more.
- Font Size: Select from common text sizes.
- Line Height: Adjust spacing between lines of text.
- Letter Spacing: Fine-tune spacing between characters.
- Text Alignment: Left, center, right, or justify.
- Text Decoration: Add italic, underline, or strikethrough.
Type Tab
- Font Family: Switch between available fonts or inherit from parent.
- Font Weight: Choose from regular, bold, semibold, and more.
- Font Size: Select from common text sizes.
- Line Height: Adjust spacing between lines of text.
- Letter Spacing: Fine-tune spacing between characters.
- Text Alignment: Left, center, right, or justify.
- Text Decoration: Add italic, underline, or strikethrough.
- Margin: Control spacing outside the element (top, right, bottom, left).
- Padding: Control spacing inside the element (top, right, bottom, left).
Layout Tab
- Margin: Control spacing outside the element (top, right, bottom, left).
- Padding: Control spacing inside the element (top, right, bottom, left).
- Quick Color Updates: Perfect for matching your brand colors without asking the agent repeatedly.
- Typography Refinement: Instantly adjust font sizes, weights, and spacing to get the perfect look.
- Spacing Tweaks: Fine-tune margins and padding to create the exact layout you want.
- Shadow and Visual Effects: Add depth and polish to buttons, cards, and other elements.
Example Use Cases
- Quick Color Updates: Perfect for matching your brand colors without asking the agent repeatedly.
- Typography Refinement: Instantly adjust font sizes, weights, and spacing to get the perfect look.
- Spacing Tweaks: Fine-tune margins and padding to create the exact layout you want.
- Shadow and Visual Effects: Add depth and polish to buttons, cards, and other elements.
- Select Precisely: Click directly on the element you want to change for best results.
- Preview First: Always preview your changes before saving.
- Agent is Idle: Visual Edit only works when the agent isn't processing a request.
- Static Content Only: Dynamic content (database values, list items, variables) cannot be edited through Visual Edit.
Tips for Best Results
- Select Precisely: Click directly on the element you want to change for best results.
- Preview First: Always preview your changes before saving.
- Agent is Idle: Visual Edit only works when the agent isn't processing a request.
- Static Content Only: Dynamic content (database values, list items, variables) cannot be edited through Visual Edit.
Important Notes
- Visual Edit is currently available only for landing page projects created after launch. Full-stack apps and Expo projects will receive Visual Edit support in future updates.
- You must be authenticated with your VS Code credentials to save changes. Unauthenticated users can preview changes but cannot save them.
When to Use Visual Edit vs. Agent
Use Visual Edit when:
- Making quick design tweaks (colors, spacing, fonts).
- Fine-tuning existing elements.
- You know exactly what you want to change.
- Working with static content.
Keyboard Shortcuts
- Cmd/Ctrl + E: Toggle Visual Edit mode on/off.
Was this article helpful?