Moonchild's Design Editor gives you two powerful ways to refine your designs: AI-powered prompt editing for quick changes and a visual properties panel for manual editing, just like traditional design tools such as Figma and Framer. To access the Design Editor, click the Edit tab at the top of the interface.

How to Edit Your Design in Preview

Method 1: Edit Using AI Prompts

1. Click the Edit tab at the top of the interface

2. Select the element you want to edit

   

3. The element is selected and referenced at the bottom of the left panel, showing its name (e.g., "Container (Top Bar)")

4. Type your edit instruction in the prompt field

   

5. Moonchild applies the change and creates a new version

Method 2: Edit Using The Properties Panel

1. Click the Edit tab at the top of the interface

2. Click on any element on the canvas to select it

3. The right panel opens, showing all editable properties for that element

   

4. Manually adjust any property directly:

   • Text: Edit text content values directly
   • Background Color: Change the element's background using hex codes
   • Text Color: Adjust the text color using hex codes
   • Font Size: Set exact pixel values for text size
   • Font Weight: Choose from available weights (400, 500, 600, etc.).
   • Padding: Set equal or individual padding values (top, right, bottom, left) in pixels
   • Offset: Adjust X and Y position values to move the element on the canvas

5. Changes apply immediately to the design as you edit

Deleting an Element

• To remove an element entirely, select it on the canvas and click the Delete element button (trash icon) in the top-right corner of the right panel.

• You can also select element and press Del on your keyboard as a shortcut. The element is removed, and a new version is created reflecting the deletion.

  

Understanding Version History

• Every edit creates a new version in the left panel. AI prompt edits are listed as Version 1, Version 2, Version 3, and so on, each showing the prompt that was applied.