AI Element Editor
Flowmo's Element Editor is an AI assistant that modifies elements already on your designer canvas. Instead of creating new designs from scratch, it takes what you have -- buttons, headings, sections, images, forms -- and edits their properties based on your natural language instructions. Tell it "make the heading bigger and change the font to Inter" or "set the background to a dark gradient," and it translates your request into structured edit operations that are applied instantly.
The Element Editor is especially useful for post-design refinement. After you have generated a layout with the Design Agent, switch to the Element Editor to tweak colors, swap fonts, adjust spacing, update content, or restyle individual elements without regenerating the entire design.
Prerequisites
Before you start using the Element Editor, make sure you have:
- An active Flowmo project open in the designer. The Element Editor works within the context of a loaded project and needs access to the FMO engine.
- A signed-in account. Authentication is required to use AI-powered editing.
- Elements on your canvas. The Element Editor modifies existing elements -- it does not create new ones. Use the Design Agent or manual tools to build your layout first.
- Elements selected (recommended). While not strictly required, selecting the elements you want to edit gives the assistant much better context. It automatically extracts the HTML and CSS of your selection.
How It Works
When you submit a request, the Element Editor follows a three-step process:
- Context gathering. The assistant extracts the full HTML and CSS of your currently selected elements from the canvas. It also gathers your project brief, design system (colors, typography, CSS variables, design-system classes), and any component custom fields or code-element logic fields. All of this context is sent alongside your request to the AI model.
- Operation generation. The AI model returns a structured JSON response containing one or more edit operations. Each operation specifies a target (by element IDs or by query), a property to change, a value, and an apply mode.
- Operation execution. The Element Editor applies each operation to the canvas engine in sequence. Properties are set, added, or handled via special operations -- all through the FMO engine's property system. After all operations complete, the canvas updates to reflect the changes.
Apply Modes
The Element Editor uses four apply modes depending on what the AI determines is needed:
| Mode | Behavior |
|---|---|
| set | Sets a property to an exact value on the targeted elements. If no specific elements are targeted, falls back to the current selection. |
| add | Adds a delta value to the current numeric property (for example, increasing width by 20px). |
| selection | Applies the change to whatever is currently selected on the canvas, regardless of IDs. |
| special | Handles advanced operations that go beyond simple property changes (see Special Operations below). |
Special Operations
The Element Editor can perform several advanced operations beyond basic property edits:
- updateElementSource -- Swaps the source URL of an image or media element.
- setSetting -- Updates a project-level setting (setting type + setting ID + value).
- patchStyleRules -- Modifies CSS rules within an existing style definition.
- updateVariable -- Changes the value of a design system CSS variable.
- convertToComponent -- Converts targeted elements into reusable components.
- convertToPage -- Converts targeted elements into separate pages.
- setCustomField -- Sets a value on a component's exposed custom field (works on both instances and masters).
- setLogicField -- Sets a value on a code-element's logic field.
Simple Operation Shortcuts
For common bulk operations, the Element Editor skips the AI model entirely and applies changes directly. These shortcuts handle:
- "Replace all fonts to [font name]" -- Updates the font-family across all CSS class rules in your project.
- "Replace font [X] with [Y]" -- Finds all class rules using font X and swaps them to font Y.
- "Replace [value] with [value]" -- Substring replacement across all class property values.
These run instantly without consuming AI credits.
Step-by-Step: Edit Elements with AI
Step 1: Select Elements on the Canvas
- Open your project in the Flowmo designer.
- Click on the element (or elements) you want to edit. You can select multiple elements by holding Shift and clicking, or by dragging a selection box.
Selecting elements is important because the Element Editor automatically extracts the HTML structure and CSS of your selection and includes it as context for the AI. This gives the model a precise understanding of what it is editing.
Step 2: Open the AI Sidebar and Switch to Element Editor
- Open the AI sidebar on the right side of the screen.
- Click the assistant type dropdown at the top of the chat panel.
- In the popover menu, click Element Editor (shown with a lightning bolt icon in green).
The assistant header updates to show "Editor" as the active mode. The description reads: "Edit selected elements by describing the change. Returns structured edit ops."
Tip: You do not always need to manually switch to Element Editor. If you used the Design Agent to create a layout and then ask for tweaks or changes in a follow-up message, the Smart Agent router automatically routes your request to the Element Editor. This happens because the router recognizes that post-design follow-ups should modify existing elements rather than create new ones.
Step 3: Describe Your Edit
Type a natural language description of what you want to change. Be specific about which properties you want to modify and what values they should have.
Example prompts:
"Make the heading font size 48px and change the color to #1a1a2e"
"Set the padding on all buttons to 16px 32px and round the corners to 12px"
"Replace all fonts with Poppins"
"Change the background of this section to a linear gradient from #667eea to #764ba2"
"Make this a form input element"
"Set the custom field 'buttonText' to 'Get Started Free'"
Step 4: Review the Results
After the AI processes your request, the chat shows a summary of applied operations:
`
Element edits applied.
Operations: 3
- Set: font-size=48px (1 ids)
- Set: color=#1a1a2e (1 ids)
- Set: font-family=Poppins (1 ids)
`
The canvas updates immediately. Each operation is listed with its mode, property, value, and the number of elements affected.
Step 5: Follow Up or Take Action
After edits are applied, the assistant offers three quick action buttons:
- Add deep interactions -- Routes your next message to the Interactions Builder to add animations and scroll effects to the edited elements.
- Generate images -- Routes to the Image Generator to create images for the edited section.
- Go live -- Routes to the Settings Agent to publish your project.
You can also continue typing follow-up requests. Each subsequent message goes through the same context-gathering and operation-generation cycle with your updated canvas state.
Working with Component Fields and Logic Fields
The Element Editor is aware of your components' internal structure. When you select a component instance or master, it automatically extracts:
- Exposed custom fields -- Fields defined on the component master that are editable per-instance (text labels, colors, toggle states, etc.). The editor shows each field's ID, name, type, default value, and current value.
- Logic fields -- Fields defined by code-element logics attached to an element (for interactive components, API-connected elements, etc.).
You can ask the Element Editor to set these fields by name:
"Set the buttonText field to 'Sign Up Now'"
"Change the logic field apiEndpoint to '/api/v2/users'"
The editor uses the setCustomField and setLogicField special operations to apply these changes through the component manager and element logic manager.
Tips
- Select before you ask. The more precise your selection, the better the AI understands what to edit. Selecting a single button and saying "make it bigger" is far more reliable than having nothing selected and saying "make the button bigger."
- Use CSS variable names. If your project has a design system with CSS variables, reference them directly: "Set the background to var(--color-primary)." The Element Editor includes your project's CSS variables in its context.
- Bulk font changes are instant. Phrases like "replace all fonts to Inter" or "change font Roboto to Montserrat" trigger the direct shortcut path -- no AI round-trip needed, no credits used.
- Chain edits conversationally. You do not need to describe every change in one message. Make one edit, review the result, then ask for the next change. The editor re-extracts your canvas state each time.
- The editor handles CSS imports. When the AI determines that CSS rules need to be added or modified, it can return a
cssblock alongside operations. These rules are imported directly into the engine's class manager.
Common Issues
| Problem | Cause | Solution |
|---|---|---|
| "Engine is not available to edit elements" | The FMO engine has not finished loading | Wait for the designer canvas to fully load before using the Element Editor |
| "The model didn't return valid operations" | The AI could not parse your request into structured edits | Rephrase your request to be more specific. Include exact property names and values when possible |
| Edits apply to wrong elements | No elements were selected, so the editor fell back to applying changes broadly | Select the specific elements you want to modify before submitting your request |
| "Please authenticate first" | You are not signed in | Sign in to your Flowmo account |
| Font replacement did not work | The font name did not match any existing class rules | Check the exact font name in your project styles. Font matching is case-sensitive |
| Custom field changes not reflected | The component instance does not expose that field | Verify that the field is defined as an exposed field on the component master |
Related Articles
- Vibe Mode Overview -- Introduction to all AI assistants in Flowmo
- AI Smart Router -- How the Smart Agent automatically routes requests to the right assistant
- Research to Design -- The full research-to-design workflow that often precedes Element Editor usage