# Edit AI code components visually

By Steven Van · 2026-09-02

Visual editing brings direct, on-canvas control to AI code components. Select, style, and edit elements the same way as any other Webflow element.

[Webflow](<https://creatorstoolbox.com/tools/webflow>)'s AI code components can now be edited on the canvas the same way as any other Webflow element, rather than only through prompts. Selecting an element inside a generated component now works like selecting a native one.

- Select any element inside a code component and style it in the Style Panel

- Add an element as context in a prompt, so the AI Assistant scopes its changes to that element

- Manually edit text directly on the canvas

The idea is to generate a component with AI, then handle small refinements directly instead of writing a prompt for them. Webflow has a help center article covering how it works, detailed in the [announcement](<https://webflowmarketingmain.com/updates/ai-code-components-visual-editing>).

[![](<https://cdn.prod.website-files.com/687e8d1b96312cc631cafec7/6a903f17e8615eea116c08c5_AICC%20Visual%20Editing.png>)](<https://webflowmarketingmain.com/updates/ai-code-components-visual-editing>)

![Webflow](<https://cdn.prod.website-files.com/686294e263eb7e215bd232f7/686d53d0446d4237b2f38c5f_webclip.png>)

Webflow

Build professional websites visually — no code required, with CMS, interactions, and hosting built in.

[View Webflow →](<https://creatorstoolbox.com/tools/webflow>)

Sources

[Original source](<https://webflowmarketingmain.com/updates/ai-code-components-visual-editing>)

[Read Edit AI code components visually on Creators Toolbox](<https://creatorstoolbox.com/blog/webflow-edit-ai-code-components-visually>)

---
Canonical source: https://creatorstoolbox.com/blog/webflow-edit-ai-code-components-visually