Visual editing and preview

Visual editing works directly in the App Viewer. Use the toolbar below the preview to select elements, edit text, replace images, apply a theme, and preview your changes before publishing.

Use Select element for AI-assisted changes, Edit Text for direct text changes, and Theme for global styles such as colors, fonts, and effects.

How visual editing works

When the AI agents complete a task, the App Viewer appears at the top of the project. The visual editing toolbar is located below the preview.

• Select element lets you select one or more elements and ask the agents to modify them.
• Edit Text lets you edit text directly in the preview.
• Theme opens the theme controls for global styles.

The toolbar can be collapsed when you do not need it.

Before you start

Before you start editing, make sure that:

• Your project has a completed build. The visual editing tools are available from the App Viewer after the agents finish a task.
• You know that changes are not live until you publish. Your public URL is unaffected until you publish the updated version.
• You know that a theme reaches shared styles only. Elements built with fixed values keep their old look after a theme change. See If a theme does not look right below.

Set global styles with Theme

A theme is your project's design system. It defines global variables — palettes, typography, and spacing — that apply across your whole app, rather than settings on one element.

Theme is best used during the preparation stage, before you start building. Applying one early means everything the agents generate follows it from the start.

Choose a theme

Select Theme from the toolbar below the App Viewer. The Theme panel includes a Search Themes field and groups themes into sections:

• Current Theme — what your project uses now. Before you apply anything it reads No theme applied yet, and the + button beside it creates a new theme.
• Featured Theme — 15 designer-curated presets. Each is shown as a preview of a page built with it, with its name and a row of swatches showing its palette. These cannot be deleted.
• Your Theme — themes you have created or customized. These can be renamed and deleted.

Every theme appears as a preview of a page built with it, with its name and a row of swatches showing its palette, so you can judge the direction before applying it.

The Theme tab, with an applied theme at the top and your saved themes below it.

To apply one:

1. Select the theme you want.
2. Atoms asks "Do you want to apply theme name?"
3. Select Apply to confirm, or Cancel to go back.
4. Check the preview.

Expected result: the preview updates to the theme you chose, and it now appears under Current Theme.

Note: If you have unsaved text or image changes, Atoms asks you to save or discard them before applying a new theme.

Update an applied theme

A dot on the Theme tab means a newer version of your applied theme is available.

To take it, select Update on your current theme and confirm Do you want to re-apply theme name? Your project then uses the newer version.

You do not have to update. If you leave it, your project keeps running the version you applied.

Note: Note: If your app does not look like the theme you selected, individual elements may have styles that override the theme.Those overrides target specific content and survive a theme change.

Build or edit a theme in Theme Manager

Select + beside Current Theme to build one from scratch, or open an existing theme to change it. Either opens Theme Manager, where you fine-tune a theme against a live preview.

Its settings sit on three tabs:

• Color — the color roles your app uses, grouped by purpose: Base Colors, Card, Popover, Primary, Secondary, and more. Each role has its own value, so changing Primary reaches every element that uses it.
• Fonts — your Serif, Sans-serif, and Mono typefaces.
• Effects — corner Radius, and a Shadow you control by color, opacity, blur, spread, and offset.

The preview beside them is built from real components — sign-in forms, buttons, inputs, body and monospace text — so you can judge a change immediately rather than guessing. Use the light and dark toggle beneath it to check both, because a palette that works on light surfaces can lose contrast on dark ones.

Under the preview you also get Undo and Redo for stepping through your changes, and Reset to return the theme to where it started.

Theme Manager. The preview updates as you change a value, and the controls beneath it cover undo, redo, export, import, and reset.

Save a theme

1. Select Save.
2. Give it a Theme Name, or keep the suggested one.
3. Select Save to confirm.

Expected result: your theme appears under My Theme on the Theme tab, with its palette shown as swatches. Apply it the same way as any other theme.

Note: Edits are not kept until you save them. Atoms will stop you and offer to save or discard if you try to apply a different theme with unsaved changes outstanding.

Reuse a theme across projects

Theme Manager has Export and Import beneath the preview. Export a theme to a file, then import it into another project to reuse the same design direction, or hand it to a teammate so their project matches yours.

If a theme does not look right

Applying a theme is not a compatibility check, so it does not normally fail. A theme replaces the shared style values your app is built on, which means any theme in the picker can usually be applied to any project.

What you may see instead is a theme that applies successfully but does not reach everything. There is no error message for this — it simply looks wrong.

Part of your app keeps its old appearance. This is the most common issue. An element that was given a fixed value, a specific color or font set directly on it, rather than one of your app's shared styles — cannot be reached by a theme change, so it keeps its previous look and can clash with everything around it. Select the affected element and describe the change in the project chat.

Text becomes hard to read. A dark theme applied to a layout designed for light surfaces can leave text with too little contrast. Adjust the affected elements in Visual Editor, or choose a theme closer to your existing design.

Atoms tells you the theme cannot be applied. Uncommon, and it means your project's interface was not built on the Atoms theming system. Use Visual Editor instead — everything is still achievable element by element.

Important: Choose a theme early where you can. When the agents build with a theme already applied, they use its shared styles from the start, so fewer elements end up with fixed values that a later theme change cannot reach.

Edit elements with Visual Editor

1. Hover over the visual editing toolbar and select Select element.
2. The toolbar displays Click to select, Ctrl/Cmd + Click for multiple.
3. Select an element in the preview. To select multiple elements, hold Ctrl on Windows or Cmd on Mac while selecting.
4. Your selections are attached to the project chat. The toolbar shows the number selected, such as Edit 1 selection in chat window.
5. Describe the change you want in the project chat and send your message.
6. Select Select element again to leave selection mode.

Use the project chat for changes such as layout, colors, spacing, styling, or changes affecting multiple selected elements.

Edit text directly

1. Select Edit Text from the toolbar below the App Viewer.
2. When Click text content to edit appears, select the text you want to change.
3. Edit the text directly in the preview.
4. You can edit multiple text elements before saving. The toolbar shows the number of pending edits, such as 1 text change or 2 text changes.
5. Select Save to keep all pending text changes, or Discard to remove them.

You can also double-click text while using Select element to begin editing it directly.

Save or discard your changes

Direct text and image changes are not applied until you save them. When changes are pending, the toolbar shows the number of changes together with Discard and Save.

• Save applies all pending direct edits.
• Discard removes the pending edits and returns the affected elements to their previous state.

If you try to leave edit mode with pending changes, Atoms displays:

Unsaved changes

You have unsaved changes. Please save or discard changes before leaving edit mode.

Select Cancel to continue editing or Discard to leave without keeping the changes.

Saving updates the working project. It does not update the live site until you publish.

Replace an image

1. Enter Select element mode.
2. Select the image you want to replace.
3. Choose an image from the image library, or use the upload control on the selected image.
4. Check the replacement in the preview.
5. Select Save to apply the image change, or Discard to remove it.

If you also enter an instruction in the project chat, the image replacement and chat instruction can be submitted together.

The Library tab with image categories and Popular Images.

Where the images come from

Image is the built-in collection. Use Search assets for something specific, or browse a category — Backgrounds, Nature, Education, Health, Fashion, Science, Feelings, and People, with More tags for the rest. Selecting a category opens it; use the back arrow to return. Popular Images below shows a general selection. Hover any image and select Use asset to apply it.

Generate creates a new image from a description, and needs a Pro or Max plan. Type what you want under Describe the image you want to generate and select Generate. Results appear below the field. Select a finished thumbnail to apply it to your element.

Upload adds your own file by drag-and-drop, paste, or click. Images can be in JPEG, PNG, GIF, BMP, TIFF, or WEBP formats, up to 4MB. Uploaded images appear below the drop area — select one to apply it.

Note: Use asset appears on the built-in images only. Images you generate or upload are applied by selecting their thumbnail instead.

Describe changes in chat

After selecting one or more elements with Select element, describe the result you want in the project chat.

For example:

• "Make this section calmer, with more whitespace and a smaller heading."
• "Match these buttons to the styling on the pricing page."

Be specific about the intended result. Instructions such as "make it look better" may produce unpredictable results

Preview your changes

Use the toolbar above the preview:

• Device view — switch between screen sizes to test responsiveness. Theme and typography changes that look right on desktop often break on mobile, so always check mobile before publishing.
• Page selector — move between the pages of your app.
• Refresh — reload the preview if it looks out of date.
• Open in a new tab — view the app full width in a separate browser tab.
• Console — open the log panel when something looks wrong.

Expected result: your changes are visible on every page and at every device width you intend to support.

Recover from a preview problem

If the preview looks out of date, keeps loading, or shows red errors, the problem may be with the App Viewer rather than with your visual edits. See Build and preview troubleshooting for the troubleshooting steps — Refresh, the Console panel, Resolve, and how to report an error that persists.

If your direct text or image edits seem to have vanished, check whether you saved them. Unsaved changes can be discarded when you leave edit mode — see Save or discard your changes.

Publish your changes

Visual edits stay in your working project until you publish. Select Publish in the top-right corner, or Update if the project is already live.

Note: If your project uses Specify Version rather than Always Latest, the live site stays locked to the version you chose, and your design changes will not appear publicly until you publish a new version.

For the errors the agents report during a build, see Issue Report.