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

# Editing a screen

> Click into any element to change it directly with a full property inspector, or describe the change in chat.

In [Screen view](/docs/features/design/screens/views#screen), the toolbar at the bottom of the canvas switches how clicks on the preview behave:

* **Navigate** — click through the prototype's links as a user would, to move between screens.
* **Select / Inspect** — click an element to select it and edit it directly.
* **Arrange** — reposition elements on the canvas.
* **Comment** — leave feedback pinned to a specific spot on the screen; see [Comments](/docs/features/design/comments).

## Selecting an element

Switch to **Select / Inspect**, then click any element in the preview — a heading, a button, a card. A small floating toolbar appears on the element itself, showing:

* Its tag (for example, `h1`)
* **Select parent element** — move selection up to the containing element
* **Remove element** — delete it
* **Open prompt mode** — describe a change for this specific element in natural language; see [Asking Archie for a change](#asking-archie-for-a-change) below

At the same time, the left panel switches from **Components** (the [Theme and Customize](/docs/features/design/theme) panel) to an **Editor** tab, showing the full property inspector for whatever you selected.

## The Element Inspector

The inspector is scoped to the selected element and typically includes:

* **Text Content** — the element's text, editable directly, for elements that hold text
* **Text** — Font, Size, Weight, and Line height
* **Style** — bold, italic, underline, and text alignment
* **Color** — the element's text or icon color
* **Appearance** — Background and Border Color
* **Corners** — border radius
* **Layout** — horizontal and vertical alignment
* **Position**

Not every element shows every field — a text-only element won't offer background or border controls, for example. Changes apply immediately to the preview.

<img src="https://mintcdn.com/archie-e998dbf6/uKV7VZ3hAIAhG9GA/features/design/screens/element-inspector.png?fit=max&auto=format&n=uKV7VZ3hAIAhG9GA&q=85&s=31394ebb4d89cfc7277191a86aba5265" alt="Element Inspector open for a selected heading, showing text content, color, appearance, and layout controls" width="1700" height="1000" data-path="features/design/screens/element-inspector.png" />

## Asking Archie for a change

You do not have to use the inspector for every change. For anything easier to describe than to dial in by hand — swapping an image, rewording a headline, "make this card feel less crowded" — ask Archie in natural language instead.

### Prompt mode

Click the sparkle icon on a selected element's floating toolbar to open **prompt mode**: a small box anchored right on the canvas, next to the element. It shows the element's tag (for example, `Img`) so there's no ambiguity about what you're pointing at, plus a text field to describe the change and a back arrow to return to the inspector.

<img src="https://mintcdn.com/archie-e998dbf6/uKV7VZ3hAIAhG9GA/features/design/screens/prompt-mode.png?fit=max&auto=format&n=uKV7VZ3hAIAhG9GA&q=85&s=fe6bd0c1561c859bf33073bd991bd174" alt="Prompt mode open on a selected image, asking Archie to swap it for the one already used on the Dashboard page" width="2606" height="1528" data-path="features/design/screens/prompt-mode.png" />

Submitting sends the request to chat as a message for Archie to process — it automatically includes which element you selected and which screen you're on, so the message carries everything Archie needs to update the component to your preference without you having to spell out the context yourself.

### The chat panel

You can also work from the main chat panel on the left. With an element selected, it shows a reference chip for it (for example, `@h1`) — type an instruction there and it applies to that element specifically, the same way [Talking to Archie](/docs/features/frontend/talking-to-archie) works in the frontend. Without a selection, chat instructions apply to the screen or app more broadly.

Use the inspector for precise, mechanical changes (an exact color, a specific font weight). Use prompt mode or the chat panel for changes that are easier to describe than to dial in by hand.

For leaving feedback instead of making a change directly, see [Comments](/docs/features/design/comments).

## Screen-wide vs. global changes

Edits made here — through the inspector or through chat with an element selected — apply to that one screen. For a change that should apply everywhere (a color, a font, a corner radius across the whole app), use [Theme and Customize](/docs/features/design/theme) instead: it updates the underlying design values, and every screen picks up the change at once.

## FAQ

<AccordionGroup>
  <Accordion title="Should I set my theme and design values before or after editing individual screens?">
    Before. Theme, Color, Feel, and Polish apply everywhere at once — deciding those first means less rework than fixing one-off edits after a global change lands.
  </Accordion>

  <Accordion title="What does 'Open prompt mode' do differently from typing in the chat panel?">
    Both send an instruction to Archie. Opening prompt mode from a selected element's toolbar guarantees the instruction is scoped to that exact element, which is useful when a screen has several similar-looking elements.
  </Accordion>
</AccordionGroup>
