> ## Documentation Index
> Fetch the complete documentation index at: /docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Visual editing

> Select visible content in your site preview and update it without opening the CMS.

Edit mode lets you change CMS-managed text and images by selecting them in the site preview. Use AI chat for layout, styling, new sections, and functionality.

## Edit visible content

**1. Open edit mode**

Make sure the preview is visible and loaded. Select the pointer icon in the preview header, just before Share, or
press
<kbd>Alt</kbd> + <kbd>E</kbd>. On macOS, press <kbd>Option</kbd> + <kbd>E</kbd>.

**2. Select an element**

Choose CMS-managed text, an image, or a structured field. An orange outline marks the selected element, and its
editor opens in the sidebar on the right.

**3. Make the change**

Update the selected field in the sidebar. Changes save automatically and appear in the preview. If a value cannot be
saved, correct the error or use the retry control.

**4. Finish**

Select another element to edit it, or select the edit-mode button again to return to the preview. Closing the
sidebar dismisses the selected field.

For a quick edit, hold <kbd>Option</kbd> on macOS or <kbd>Alt</kbd> on Windows and Linux. The pointer icon highlights without opening a panel, and the element already under your cursor is highlighted immediately. Select an element, then release the key and continue editing. If you release without selecting anything, Studio returns to your previous mode. Clicking the icon or pressing <kbd>Option</kbd>/<kbd>Alt</kbd> + <kbd>E</kbd> also keeps edit mode on until you finish.

> [!NOTE]
>
> Edit mode is available on desktop only. Use the CMS or AI chat on a smaller screen.

Use AI chat to change text and images written directly in your site's code.

For JSON fields, an incomplete draft stays in the editor without saving. Leaving an empty JSON field saves `null` and updates the preview without a page reload.

## See the complete entry

Select the link icon beside the field in the sidebar to open its label or CMS entry. **All fields** in the side editor opens the complete entry form, scrolls to the selected field, and focuses it in place.

When visible content comes from a linked entry, such as an author's name on a post, Studio opens that linked entry. Use the back arrow to return to the entry that owns the relation. Studio opens its complete form and focuses the relation field, where you can open, replace, or clear the linked entry.

Fields inside components work the same way. **All fields** focuses the nested field inside the complete form, where you can also add, duplicate, remove, or reorder repeatable components and blocks.

If Studio says that the selected element has nothing to edit, use AI chat. Edit mode has no controls for colors, spacing, typography, borders, or page layout.

## What's next

> [card] [CMS](/docs/studio/cms.md)
>
> Edit content in its full form.

> [card] [Media library](/docs/studio/media-library.md)
>
> Upload or generate replacement images.

> [card] [AI chat](/docs/studio/ai-chat.md)
>
> Request visual or structural changes.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.