Visual edits

Visual edits let you select part of your app in the preview and make focused UI changes without describing every file or component.

Use Visual edits when you can point to the exact element you want to improve: a headline, card, button, section, spacing group, color, or piece of text.

When to use Visual edits

Use Visual edits for focused interface work:

• Adjust spacing, alignment, width, or layout.
• Change text, background, or border colors.
• Tune typography, radius, shadows, or borders.
• Edit visible text on a selected element.
• Reset a selected element back toward its original styling.
• Make a small visual correction after a larger build.

Use Build mode (Agent) when the change affects multiple files, app behavior, data, integrations, or a larger redesign.

Use Plan mode first when the change is risky, broad, or needs agreement before the agent edits the project.

How Visual edits work

1. Open your project preview.
2. Turn on selection mode.
3. Click the element you want to edit.
4. Use the inspector to adjust style, layout, or text.
5. Review the pending changes summary.
6. Save to apply the change, or discard if you want to start over.
7. Check the refreshed preview after the save finishes.

Visual edits are intentionally narrow. They work best when you select the smallest useful element instead of a whole page.

Inspector controls

The inspector shows controls based on what the selected element supports.

Style controls can include:

• Text color and background color.
• Border color and border width.
• Radius and shadow.
• Font size, weight, and letter spacing.

Layout controls can include:

• Vertical and horizontal padding.
• Gap between child elements.
• Maximum width.
• Text or content alignment.

Text controls appear when the selected element has editable text. Keep text edits short and review the preview afterward to make sure the copy still fits.

Colors and tokens

Color fields can use your project's available design tokens when they are detected. This helps keep edits aligned with the existing visual system.

You can also use custom colors when a token is not enough. Use custom colors carefully so the project does not drift away from its established palette.

Good color habits:

• Prefer existing tokens for brand, text, and background colors.
• Use custom colors for intentional exceptions.
• Check contrast after changing text or background colors.
• Review nearby elements so the selected element still fits the page.

Save, discard, and review

Visual edits are pending until you save them.

• Use Save when the previewed change is correct.
• Use Discard when you want to remove all pending visual changes.
• Wait for the save feedback before making another change.
• Review desktop and mobile if the edit affects layout, spacing, or text length.

If the preview reports an issue after saving, the edit may still have been applied. Review the message, open the preview, and ask RIB AI to help fix the preview issue if needed.

Ask RIB AI fallback

Some elements cannot be edited directly from the inspector. This can happen when styling or text is generated dynamically, or when the selected element needs a broader code change.

When direct editing is not supported, use Ask RIB AI from the visual edit panel. RIB Creative will use the selected element as context so you can describe the outcome you want in natural language.

Example:

Use the selected pricing card as context.
Make it feel more prominent than the other cards.
Keep the same pricing, CTA text, and section layout.
If direct styling is not enough, update the component safely.

Good Visual edit habits

• Select the smallest element that represents the issue.
• Make one focused change at a time.
• Save before switching to an unrelated area.
• Use Ask RIB AI when the inspector says direct editing is not supported.
• Use Plan mode before large visual redesigns or changes that affect behavior.
• Review the final preview before publishing.

Next steps

• Make implementation changes: Build mode (Agent)
• Plan complex changes: Plan mode
• Improve prompts: Prompting best practices