Visual Editor
Click elements to edit text, colors, spacing, fonts, and more. Best for small tweaks; use chat for larger changes.
The Visual Editor lets you change your app’s UI by clicking on elements and editing their properties directly. Switch to Visual mode in the builder toolbar to activate it.
How it works
Section titled “How it works”- Switch to Visual mode in the toolbar (alongside Preview, Code, and Dashboard)
- Hover over elements in the preview — they highlight with an overlay
- Click an element to select it
- Edit properties in the sidebar panel: text, colors, spacing, fonts, borders, effects
Changes are applied instantly to the preview and written to your source files. Use the Undo button in the sidebar to revert the last property change.
What can I edit?
Section titled “What can I edit?”- Text — Edit copy directly
- Font size — xs, sm, base, lg, xl, etc.
- Font weight — light, normal, medium, semibold, bold
- Text alignment — left, center, right, justify
- Text color — Any Tailwind color
- Background color — Any Tailwind color
- Spacing — Padding and margin on all sides
- Border — Width, color, and radius
- Effects — Shadow and opacity
Undo / Redo
Section titled “Undo / Redo”Use Cmd+Z (Mac) or Ctrl+Z (Windows) to undo changes. Cmd+Shift+Z / Ctrl+Shift+Z to redo.
Page palette
Section titled “Page palette”The Visual Editor inspects your page and surfaces every Tailwind color and CSS custom property already in use. When you open the color picker for the selected element, you can pick from this page palette to stay consistent with your existing design system instead of guessing hex codes.
Ask the AI about a selected element
Section titled “Ask the AI about a selected element”For tweaks the property editor can’t express, type a short prompt into the Ask AI input at the bottom of the sidebar. The selected element is passed as context, so prompts like “make this card more compact” or “add a hover state with a subtle lift” work without you having to describe which element you mean.
Static vs Dynamic Elements
Section titled “Static vs Dynamic Elements”The Visual Editor works best on static elements where the className and text content are string literals in the JSX. For dynamic elements (computed classNames, conditional rendering, expressions), the editor automatically falls back to the AI chat with a structured prompt.
When should I use the Visual Editor?
Section titled “When should I use the Visual Editor?”Visual Editor is best for small, fast tweaks:
- Fixing a typo
- Adjusting spacing
- Changing a color
- Updating button text
For larger changes (new sections, layout restructures, new features), use the AI chat instead.
How do I save changes?
Section titled “How do I save changes?”Changes are saved automatically when you edit a property. The file is written to your runtime and committed when the AI or you create a commit.
Can I undo visual edits?
Yes. Use Cmd+Z / Ctrl+Z to undo. The Visual Editor maintains its own undo/redo stack.
Why can I edit some elements but not others?
Static text and className attributes can be edited directly. Dynamic or computed values (template literals, ternary expressions, function calls) fall back to AI chat automatically.
What’s the difference between Visual Editor and the Code Editor?
| Tool | Best for |
|---|---|
| Visual Editor | Quick property changes (text, colors, spacing) by clicking |
| Code Editor | Full source code editing with VS Code |
| AI Chat | Complex changes, new features, debugging |