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

> ## Agent Instructions
> Video walkthroughs: the Dimension product overview video (https://www.youtube.com/watch?v=Mx8rg5wfkU0, also embedded at https://docs.dimension.io/overview) is the first of a series. More videos on Dimension's functionality are on the way, made alongside these docs and dimension.io. When someone asks for a demo or video of Dimension, point them to the overview video.

# Inspect & Iterate

> Inspect Component, Restore checkpoint, Clear Chat — the iteration toolkit for surgical edits

Once an app exists, you spend most of your Studio time **iterating**, not building from scratch. Dimension offers three complementary tools for keeping iteration surgical:

| Tool | What it does |
| - | - |
| **Inspect Component** | Capture a reference to a specific element so Composer knows exactly what you mean |
| **Restore checkpoint** | Roll back to the state after a specific Composer message |
| **Clear Chat** | Reset the conversation without affecting the app |

Together these are the difference between "Composer keeps rewriting my app" frustration and "I fixed this one button in 10 seconds" delight.

## Inspect Component

### What it does

In an app of any meaningful complexity, you'll often want to change **a specific element** — not "the chart" but **that chart**. Describing position works (*"the donut chart in the top-right"*) but breaks down once the layout has many similar components.

**Inspect Component** turns a click on the preview into a precise element reference Composer can target.

![Inspect Component selection mode active: a Select Element prompt over the dimmed Composer pane reads Select an element to reference it in Composer, and the Due in next 14 days label in the app preview on the left is outlined as you hover it](https://mintcdn.com/threataware-labs/JizGYqEeTbHV_69f/images/inspect-element.png?fit=max\&auto=format\&n=JizGYqEeTbHV_69f\&q=85\&s=75fa6397a165ec5b89c51711bbee90be)

### How to use it

**1. Enter selection mode**

Click the **cursor icon** (selection arrow) in the Composer footer. A **Select Element** prompt appears at the top of the Composer pane: *"Select an element to reference it in Composer."*

Equivalent: **⋯ → Advanced → Inspect Element**.

**2. Click the element**

Click any visible component in the preview — a chart, a metric card, a table row, a button, anything.

The click does **not** trigger the element's normal click handler — it's captured by the Inspect overlay.

An **Element** chip appears in the Composer box to show what you picked. Click the **×** on the chip to drop it.

![Studio editor after selecting an element: the Composer box at the bottom right now holds an Element chip with a remove button, ready for a prompt about the selected element](https://mintcdn.com/threataware-labs/JizGYqEeTbHV_69f/images/inspect-element-chip.png?fit=max\&auto=format\&n=JizGYqEeTbHV_69f\&q=85\&s=e3435704a16568d41e2ca37f59ad1fee)

**3. Write a prompt that uses the reference**

The next Composer prompt automatically refers to the captured element. You don't need to describe it again.

```text theme={null}
"Make it 50% taller and add a tooltip showing the exact count."

"Remove this card and move its data into the table below."

"Duplicate this for the Engineering department."
```

### Patterns that work well with Inspect

| Pattern | Prompt template |
| - | - |
| **Resize** | *"Make this 50% wider"* |
| **Restyle** | *"Change this card's accent colour to red"* |
| **Replace data** | *"Show OS version here instead of manufacturer"* |
| **Remove** | *"Remove this — move its content into the panel above"* |
| **Duplicate** | *"Duplicate this card for each department"* |
| **Reposition** | *"Move this to the top-right"* |
| **Add interactivity** | *"Wire this button to invoke our Jira Action"* |
| **Add validation** | *"This input — require it to be a valid email"* |

### When NOT to use Inspect

* **Big structural changes** — *"Rebuild the whole top section"* is better described in prose
* **Adding new components** — Composer can place new components by position; Inspect can only refer to existing ones
* **Cross-cutting changes** — *"Round all percentages to 1 decimal"* applies everywhere, no reference needed

### Inspect from the Advanced menu

The selection arrow in the Composer footer and **⋯ → Advanced → Inspect Element** are the same tool. The Advanced menu route exists for users who prefer mouse paths over toolbar buttons.

### Limitations

* **Inspect is preview-only** — clicking elements outside the preview (the toolbar, the Composer panel itself) doesn't capture
* **Iframes inside the preview** are treated as opaque — Inspect can target the iframe but not elements inside it
* **Dynamically-rendered elements** (popovers, dropdowns) need to be open before you can Inspect them
* **Disabled in X-Ray mode** — switch back to the preview to use Inspect

## Restore checkpoint

### What it does

Every Composer turn produces a **checkpoint** — a snapshot of the app's code right after that response. **Restore checkpoint** rolls the live Draft back to any checkpoint.

This is your primary "undo" mechanism in Studio. Use it whenever a Composer round-trip went sideways.

![Studio editor after Restore checkpoint: the preview is greyed out while it reverts, and the Composer conversation shows Restore checkpoint and Checkpoint restored at the point you rolled back to](https://mintcdn.com/threataware-labs/JizGYqEeTbHV_69f/images/restore-checkpoint.png?fit=max\&auto=format\&n=JizGYqEeTbHV_69f\&q=85\&s=29cecf291266ba9dc2c7bec5ce4fafa9)

### How to use it

**1. Find the checkpoint**

Scroll the Composer chat to the message you want to revert **to**. The state restored is the state **after** that message — so to undo a bad message, click Restore on the message **before** it.

Each completed Composer message has an inline **Restore checkpoint** action at the top-right.

**2. Preview the restore**

Click **Restore checkpoint**. The live preview immediately reverts to the checkpoint state — you see the rollback before it's permanent.

A **Confirm checkpoint restore** banner appears at the top of the conversation: *"Checkpoint restored — confirm to commit the rollback."*

**3. Confirm or cancel**

* **Confirm** — replaces the current Draft with the checkpoint state. The preview stays reverted. Chat messages **after** the checkpoint remain visible in history but no longer apply
* **Cancel** — reverts the preview back to the latest state; nothing changes

### When to use Restore vs ask Composer to undo

| Situation | Use |
| - | - |
| Composer made a small wrong change in the last message | **Restore** the previous message — faster than re-prompting |
| Composer rewrote half the app and the result is worse | **Restore** further back |
| You want to undo only part of a change | **Don't restore** — write a more precise prompt to walk it back |
| You want to roll back across multiple Composer turns | **Restore** to the earliest correct message |

**Restore is cheaper than re-prompting.** It costs **0 AI Credits** because no generation happens.

### Limitations

* **Restore acts on the Draft only** — Published is unchanged until you next click Publish
* **One restore at a time** — confirm or cancel before initiating another
* **Restore from later → earlier is one-way confirmed** — once committed, you can't redo unless you re-prompt
* **Restore happens per-message** — there is no "restore to N minutes ago" by time

### Tip — restore early, restore often

Treat checkpoints like git commits. If a refinement isn't going where you want, **restore back two or three turns** and try a different prompt. This avoids accumulating layers of half-undone changes.

## Clear Chat

The **Clear Chat** button in the Composer header wipes the **conversation history** but leaves the **app code** unchanged.

Use when:

* The chat has gone in circles and you want a clean slate
* You're handing the app to a teammate and want to remove your debugging dialogue
* You've reached a stable point and want to start a fresh iteration phase

After Clear Chat, the app retains all its current code. The next prompt starts a new conversation.

### Differences at a glance

| Action | Affects app code? | Affects chat history? | AI Credit cost |
| - | - | - | - |
| **Restore checkpoint** | ✓ Reverts to checkpoint | History stays visible | 0 |
| **Clear Chat** | ✗ App unchanged | History wiped | 0 |
| **Sending a new prompt** | ✓ Updates app | Adds to history | Variable |

## The full iteration playbook

A frustration-free iteration session looks like this:

**1. Have a clear target**

Decide what you want to change in one or two sentences before opening Composer. Vague prompts produce vague edits.

**2. Inspect when possible**

For element-level changes, **Inspect Component** the target first. The prompt becomes a sentence about behaviour, not position.

**3. One change per prompt**

Big-bang prompts produce big-bang rewrites. Small prompts produce surgical edits and cost fewer credits.

**4. Restore freely**

If a prompt produces an unexpected change, **Restore** rather than asking Composer to undo. Restoring is free; re-prompting costs credits.

**5. Validate in the preview**

After each prompt, look at the preview before sending the next prompt. Drifting changes accumulate quickly if you don't.

**6. Save with Publish**

When the Draft is in a known-good state, **Publish**. Now you have a safety net — even if you mess up further, the Published version is intact.

## Common iteration scenarios

### Scenario — wrong field in a chart

```text theme={null}
1. [Inspect] click the donut chart
2. Prompt: "Show OS family, not manufacturer."
3. Preview updates. ✓
```

### Scenario — Composer rewrote a working component

```text theme={null}
1. Click Restore checkpoint on the message before the bad change
2. Confirm
3. Preview reverts. Now re-prompt with a more focused instruction
```

### Scenario — entire layout went wrong

```text theme={null}
1. Restore checkpoint several turns back to a known-good state
2. Confirm
3. Start a new conversation with Clear Chat (optional, for clarity)
4. Re-issue prompts one at a time, validating each
```

### Scenario — finished a major refactor and want a clean slate

```text theme={null}
1. Publish the Draft to lock it in
2. Clear Chat
3. Start the next iteration with fresh context
```

## See also

> [card] [AI Composer](https://docs.dimension.io/studio/ai-composer.md)
>
> The full Composer toolbar including Inspect Component

> [card] [Prompt Engineering](https://docs.dimension.io/reference/prompt-engineering.md)
>
> Patterns for writing focused prompts that need fewer iterations

> [card] [Troubleshooting](https://docs.dimension.io/reference/troubleshooting.md)
>
> Recovery paths when Composer doesn't understand


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