Your first edit session

This walkthrough takes you from an empty session to your first previewed change. It should take just a few minutes.

1. Open a session

Start a new edit session from your workspace. The editor opens with a multi-pane layout:

a chat panel where you describe what you want,
a tasks panel showing the agent’s plan,
a live preview of the page you’re editing,
and panels for files, sub-agents, skills, and tests that you can toggle as needed.

2. Describe what you want

In the chat panel, describe the change in plain language — include your goals, constraints, and any success criteria. For example:

Make the hero headline larger and change the call-to-action button to green. The button must be at least 48 px tall, and the mobile layout should stack vertically.

From your description the agent automatically:

Extracts requirements — the success criteria it will work against (e.g. “button must be green”, “mobile layout stacks vertically”).
Creates a task plan — a set of concrete steps visible in the Tasks panel, each mapped back to the requirements it satisfies.

You describe the intent; the agent figures out how to break it down and get it done.

3. Watch the agent work

As the agent executes the plan:

Tasks move from pending to in-progress to complete.
Files update to show edits in real time.
Preview refreshes to show each change as it’s applied.
For complex requests, sub-agents may be spawned to handle independent parts in parallel.

4. Interact with the preview

The preview updates to show your change running in a real browser. Nothing you do here affects the live site — the preview is an isolated, safe environment.

Click buttons and links to verify behavior.
Scroll through the page to check layout.
Open menus and modals to test interactions.

5. Annotate and iterate

Not quite right? You have two options:

Chat — send a follow-up instruction: “Actually, make the button a bit smaller and add more spacing above it.”
Annotate — click directly on an element in the preview and describe what’s wrong. The agent gets both your feedback and the element’s context.

Each instruction refines the previous result.

6. Run tests

If your project has vitest tests, the agent can run them from the Tests panel to verify the change doesn’t break anything. Test results are mapped to requirements, so you can see coverage at a glance.

7. Publish

When you’re happy with the change, publish it to make it live.