Core Features
Visual Editing

Visual Editing

Make precise edits to your components and designs using the visual editor.

Visual editing tutorial

Learn how to use the visual editor to customize your designs

Edit Mode

To enter edit mode, click the "Edit" tab in the right side panel of your component, or double click on the component's name.

What you can edit:

  • •Text content: Click any text to edit it directly
  • •Images: Replace images with your own
  • •Styles: Modify colors, spacing, fonts, and more
  • •Layout: Rearrange elements with drag and drop

Layers

Once in edit mode (either by clicking the "Edit" panel in the right panel or double-clicking on the component's name), you get access to the layer tree for that component. The layer tree shows you all the elements in your design and lets you select, organize, and navigate through them easily.

Layer tree in edit mode
The layer tree showing all elements in your component

Precise AI Edits

This functionality works inside the visual editor. When you select an element, you can ask the AI for a specific change. This is perfect for small, targeted modifications that don't require using the main .

Precise AI edits in the visual editor
Select an element and ask AI for specific changes

Great for:

  • •Adjusting a specific element's color or style
  • •Modifying spacing or alignment of an element
  • •Quick text or content changes
  • •Fine-tuning individual components

Don't forget to save your edits:

Since every MagicPath project is a fully deployed and shareable app, you need to confirm your changes before exiting the editor. Click the "Save" button at the top to save your edits.

Save button in the editor
Always save your edits before exiting the editor

Pro tip: After saving an edit, a new revision is created, so you can always go back to previous versions.

Next Mentions