Edit directly on the canvas
Refine an HTML design after generation: edit text, adjust selected elements, save changes, and check the result before sharing.
Choose how to make the change
| Your task | Use | What changes |
|---|---|---|
| You know the exact text, color, or spacing | Edit | The selected HTML file, after committing or saving the edit |
| You want the agent to rework an element | Comment → Send to chat | The agent receives an element-specific instruction |
| You want to explain a visual region | Mark | A screenshot and notes are added to the conversation |
For a new section, responsive behavior, or a change across several screens, give the agent a clear brief. Use direct editing for a small visual adjustment. See comments and marked feedback for the other two paths.
Open an editable preview
- Open an HTML artifact from Design Files and select Preview. HTML slide artifacts also use the preview editor; available controls depend on the file.
- Choose Edit in the preview toolbar, then select the element on the canvas. Wait for its selection outline and parameter panel.
- Exit Edit before testing links, forms, or buttons as a normal user. Selecting an element in editing mode has a different purpose from using the prototype.
Change a line of text
- In Edit, click the text you want to change. Text and link labels can be edited on the canvas.
- Type the replacement. Press Enter to commit this text; Shift+Enter inserts a line break. Press Escape to cancel the current text input.
- Check the wording in normal Preview. If the page generates that text with JavaScript, also test the action that renders it again.
Adjust an element or its layout
Select an element to see the properties it supports. The inspector includes typography, color, size, spacing, border, and corner radius. Flex and Grid containers expose layout controls such as direction, alignment, and Gap. A link can expose its Href; an image can be replaced with Upload image. These controls are contextual, so not every element has every field.
You can drag a selected element to adjust its position. Keep changes small and check neighboring elements and mobile layouts; moving something until it fits one desktop view does not establish a responsive layout.
| Field | What to enter or check |
|---|---|
| Text / Href / Image URL / Alt text | Text elements expose wording; links also expose their destination. Images expose source and alternative text. The fields depend on the selected element. |
| Text / Background / Border color | Use a hexadecimal color such as #262626. Check contrast and hover states after saving. |
| Opacity | A number from 0 to 1: 0 is transparent and 1 is opaque. This affects the selected element, not only its background. |
| Font / Size / Weight / Line height / Letter spacing | Choose the font and weight, then adjust size and tracking. Line height accepts a positive number or px value; 1.5 is a multiplier, while 24px is a fixed height. |
| Width / Height | A plain number becomes px. Percentage values are accepted for these dimensions. Check narrow layouts before choosing a fixed width. |
| Padding / Margin | Adjust top, right, bottom and left separately. Padding is inside the element; margin separates it from its neighbors. Margin can use auto. |
| Border width / Style / Radius | Set the border’s thickness, style and color together. A width without a visible style can appear to do nothing. Radius rounds the corners. |
| Direction / Distribution / Gap / Align | Layout controls depend on selecting a layout container. On an ordinary element, Align changes text alignment; it is not a command to rearrange its parent. |
Most spacing fields accept numbers or px, not arbitrary CSS expressions. If a value is rejected, check its unit and the selected element instead of repeatedly saving. Blank fields can reflect inherited or computed styles rather than a value of zero.
Save, cancel, or undo
| Action | What it means |
|---|---|
| Enter while editing text | Commit the current text edit |
| Save in the parameter panel | Write the current content and style changes to the file |
| Cancel / Reset | Discard or reset the current draft; this does not erase all previously committed changes |
| Undo / Redo in the editor | Reverse or reapply committed manual edits |
| Delete element | Remove the selected element; check dependencies and use Undo if needed |
Check the saved result
- Leave Edit and reload the preview. Confirm the change survives.
- Switch the viewport menu to a mobile size and test real controls.
- Use version history if you need an earlier HTML version. For a shared file, update its link after checking the new version.
Editing an HTML animation does not change an already rendered MP4. Ask for a new render, then inspect the new video.
If you cannot select or save
Confirm that you opened a supported HTML file in Preview and that the project is editable. A read-only shared project can allow comments while disabling editing. Exit and reopen Edit, then reload the file if necessary. If selection still produces no outline or inspector, use Comment or Mark to describe the change to the agent and include your app version when reporting the issue. Do not keep clicking Save without a selected element or a confirmed result.