Visual edits

Instead of describing every small change to the agent, you can work directly in your project preview. Click an element to change how it looks, rewrite text in place, or draw a mark over the page to point the agent at what you mean. Visual editing is element-scoped. You pick an element on the page, see the settings available for it, and apply the change there. Design and text changes are written into your project when you save, without an agent turn and without using credits.

​

The toolbar

A toolbar floats over the live preview of your project with three tools:

• Edit design: Click any element to change its look, image, or layout.
• Edit text: Editable text is outlined, so you can click it and rewrite it.
• Annotation: Draw on the page to point at what you mean.

Press Esc at any point to go back to browsing your preview.

​

Edit design

Selecting an element opens its settings in the left panel. What you get depends on the type of element you picked: a section offers size, spacing, background, borders, and how its children are arranged, a text element offers typography, and an image lets you swap in a new file. The panel header tracks where you are, from the Global level down to the selected element, and the theme toggle lets you check your work in both light and dark mode before you save.

​

Edit text

Text you can rewrite is outlined directly in the preview. Click into it and type. This is the fastest way to fix a headline or a paragraph, because you see the result in place as you write.

​

Annotation

Sometimes it’s quicker to show the agent what you mean than to describe it. With Annotation on, draw over the part of the page you’re talking about. Macaly works out which elements sit under your mark and attaches them to your next message. Draw as many marks as you need, then type your message and send it as usual. While you’re drawing, Undo, Redo, and Clear are right there in the toolbar. Annotations are a way of pointing, not a place to leave comments. They aren’t saved with your project, and they cost nothing beyond the message you send.

​

Navigating between elements

Clicking exactly what you want isn’t always possible, usually when elements overlap or a child covers its parent. A small bar above your selection lets you step up a level or sideways through neighboring elements. It’s also where you’ll find the code icon, which opens that element’s source in the Code tab, and the option to remove the element entirely.

​

Ask AI

Ask AI sits next to text and images in the panel for when you’d rather describe a change than configure it. On text it rewrites the copy from your prompt. On an image it can edit the one you have or generate a new one, and you preview the result before keeping it. With an element selected, the chat composer also switches to editing that element. Anything you write there applies only to your current selection.

​

Saving your changes

While you have unsaved changes, the toolbar shows how many you’ve made, and you can save or discard them all at once. Saving doesn’t go through the agent, so it’s immediate and costs no credits. If a change is more involved, Macaly hands it to the agent in your chat, where it behaves like any other message.

​

When the toolbar isn’t available

The toolbar hides itself, or grays out, when direct editing wouldn’t work:

• Wait for Macaly to finish: The agent is still working on your project.
• Waiting for the preview to be ready: Your preview is still starting up.
• Close the plan to edit the page: You have a plan open in the chat.