> For the complete documentation index, see [llms.txt](https://docs.buzzy.buzz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.buzzy.buzz/getting-started-with-buzzy/new-buzzy-ai-v3/5.-editing-your-app-in-the-design-tab.md).

# 5. Editing your app in the Design Tab

The Design tab is where you make direct screen-level changes in the editor. It supports both AI-assisted changes and manual editing, so you can move quickly between prompting, selecting, inspecting, and adjusting the layout.

## Make changes with AI from the Design tab

1. Open **Build** > **Design**.
2. Choose the screen you want to change from the screen picker above the preview.
3. Open the **AI** panel from the top-right toolbar if it is not already visible.
4. Enter a prompt describing the change you want, such as "Add a search bar at the top", "Change this list to a two-column grid", or "Add an export button below the table".

The AI updates the selected screen based on your instruction. Review the result in the preview before moving on.

<figure><img src="/files/GlO2yWn3R2sCuIMTulNr" alt=""><figcaption><p>You can collapse the navigation and chat panels when you want more room to inspect the screen.</p></figcaption></figure>

## Make manual changes in Edit mode

1. With the correct screen open, switch the preview to **Edit** mode.
2. Select an item directly in the preview or from the left-hand structure panel.
3. Use the right-hand tabs to inspect and edit the selection:
   * **Properties** for labels, layout, actions, bindings, and display settings
   * **Code** when a selected element exposes editable code-backed configuration
   * **Debug** when you want to inspect bindings, context, and issues before changing anything

> 💡 Tip: You can mix manual edits, AI edits, and debug diagnosis in the same session.

## Insert components from Assets

1. Open **Design** and switch the preview to **Edit** mode.
2. Select the area or component where you want to insert something new.
3. Open the **Assets** tab in the left panel.
4. Browse or search the available Buzzy components.
5. Preview the asset if needed.
6. Choose **Before**, **After**, or **Inside** to insert it relative to the current selection.

<figure><img src="/files/KfgjPxqxzMT9XJUBFK1n" alt=""><figcaption></figcaption></figure>

## Diagnose a problem before editing

If a component looks wrong, open the **Debug** tab before you start making changes. This is especially useful for:

* broken data bindings
* visibility or display-rule issues
* repeated content such as lists and sub-tables
* actions that appear to be wired incorrectly

From the Debug tab, you can inspect the issue list and launch **Diagnose with AI** for the current selection or screen.

For the full debug workflow, see [Debugging with the Debug Tab and Debug Agent](/getting-started-with-buzzy/new-buzzy-ai-v3/6.-debugging-with-the-debug-tab-and-agent.md).

***

For more examples and help, visit the [Buzzy AI Prompt Guide](https://docs.buzzy.buzz/getting-started-with-buzzy/buzzy-ai/example-prompts).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.buzzy.buzz/getting-started-with-buzzy/new-buzzy-ai-v3/5.-editing-your-app-in-the-design-tab.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.