# Live preview & workbench

The workbench is where your app comes to life. It has two main parts: the **live preview** and the **code editor**.

## Live preview

Your app runs in real time, right in the browser. As the AI writes code — or as you edit it — the preview updates instantly. There's no server to wait on and nothing to install; everything runs in a secure sandbox in your browser.

Use the preview to click through your app exactly as a user would.

## Code editor

Open any file to read or edit it yourself. The editor has syntax highlighting and works like a normal code editor. Edits you make are reflected in the preview, and GenVibe stays aware of them for your next message — so you can mix hand-editing with AI changes freely.

## The inspector

Need to change one specific element? Turn on the **inspector** and click the element in the preview. GenVibe then knows exactly which element you mean, so your next instruction (e.g. "make this button bigger") changes only that element instead of guessing.

{% hint style="success" %}
The inspector is the most precise way to make targeted visual tweaks.
{% endhint %}

## Terminal & logs

The workbench runs your app's dev server in the sandbox. If something fails to start or throws an error, GenVibe surfaces it and can fix it — and you can reference it in chat.

## Checkpoints

As you build, GenVibe saves checkpoints of your project. If a change goes wrong, you can restore an earlier checkpoint and continue from there.


---

# Agent Instructions: 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:

```
GET https://docs.genvibe.pro/features/preview-and-workbench.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.