> For the complete documentation index, see [llms.txt](https://aicre8.gitbook.io/aicre8.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aicre8.gitbook.io/aicre8.com/build-with-aicre8/inspector-tool.md).

# Inspector Tool

## Inspector Tool

The Inspector is a visual editing tool built into the AICre8 IDE. Click any element in your live preview to select it, view its properties, and edit it directly — no code required.

### How to Use

1. **Activate Inspector** — click the Inspector toggle in the chat toolbar
2. **Hover over elements** — a blue highlight shows which element you're targeting
3. **Click to select** — the Inspector Panel opens with editable properties
4. **Make changes** — edit text, colors, spacing, fonts, and more
5. **Save** — changes are written to your source files and auto-deployed

### What You Can Edit

The Inspector panel shows editable properties for the selected element:

* **Text Content** — edit headings, paragraphs, button labels directly
* **Colors** — text color and background color with color picker
* **Typography** — font size, font weight, text alignment
* **Spacing** — margins and padding (top, right, bottom, left)
* **Border Radius** — round corners on any element
* **Background** — solid colors or gradients

### Visual Feedback

When Inspector mode is active:

* **Hover highlight** — blue border appears around elements as you move your mouse
* **Element tooltip** — shows the tag name, ID, and class of the element
* **Selection indicator** — selected element stays highlighted while editing
* **Unsaved changes warning** — notifies you before navigating away with unsaved edits

### Auto-Deploy

When you save changes through the Inspector:

1. The modified CSS/content is written back to the source files
2. Changed files are tracked automatically
3. Auto-deploy triggers to push your changes live
4. Your branded URL reflects the update within seconds

### When to Use Inspector vs. Chat

| Task                             | Use         |
| -------------------------------- | ----------- |
| Change a heading or button text  | Inspector   |
| Adjust colors, spacing, or fonts | Inspector   |
| Add a new section or component   | Chat prompt |
| Restructure the page layout      | Chat prompt |
| Fix a bug or add functionality   | Chat prompt |
| Quick visual tweaks              | Inspector   |

### Tips

* Inspector works best for fine-tuning existing elements — use chat prompts for structural changes
* Color picker supports hex, RGB, and named colors
* Changes are non-destructive — your source files are updated cleanly
* Works with any framework (React, Vue, HTML) in the live preview