Visual Editing

Visual Editing allows you to click on content directly on the website and edit it inline, without navigating through the admin panel.

How It Works

sequenceDiagram
    actor Editor
    participant Frontend
    participant VisualEditor
    participant InlineEditForm
    participant Database

    Editor->>Frontend: Clicks editable element
    Frontend->>VisualEditor: Sends source map data
    VisualEditor->>InlineEditForm: Opens slide-over panel
    InlineEditForm->>Database: Loads current value
    InlineEditForm->>Editor: Shows editing form
    Editor->>InlineEditForm: Edits and saves
    InlineEditForm->>Database: Updates section content
    InlineEditForm->>Frontend: Emits contentUpdated event
    Frontend->>Frontend: Refreshes section content

Enabling Visual Editing

1. Log in to the website (you must have the EditFrontendContent permission)
2. Look for the floating “Edit” button (usually bottom-right corner)
3. Click the button to enter editing mode
4. The page will reload with editable indicators

![Visual Editing Toggle - Placeholder for screenshot showing the edit button]

Editing Content

When editing mode is active:

1. Hover over content to see a pencil icon
2. Click the content to open the editing panel
3. Edit the value in the form
4. Save to apply changes
5. The content updates immediately without refreshing the page

![Visual Edit Panel - Placeholder for screenshot showing the slide-over panel]

Field Types

The editing panel adapts to the type of content:

Field Type	Editor	Example
Text	Single-line input	Headlines, labels
Textarea	Multi-line input	Descriptions
Rich Text	WYSIWYG editor	Body content
Image	File upload	Photos, logos
Repeater	List editor	Team members, features

Repeater Editing

For list-based content (like team members or features):

1. Click on the repeater container
2. Add, remove, or reorder items
3. Edit each item’s fields
4. Save to update the entire list

Keyboard Shortcuts

• Escape: Close the editing panel
• Cmd/Ctrl + S: Save changes

Exiting Editing Mode

1. Click the “Done” button on the floating control
2. Or click the pencil icon again
3. The page reloads without editing indicators

Limitations

• You can only edit text and image content
• Layout and styling changes require a developer
• Some complex fields may not be editable visually
• Changes are saved immediately to the database

Best Practices

• Preview your changes on the frontend
• Don’t edit content while other editors are working on the same section
• Save frequently
• Use the admin panel for creating new sections or pages
• Report any fields that should be editable but aren’t

Next Steps

• Working with Sections
• Collaborating with Developers