Visual Editor

Using the Visual Editor

Edit your website content directly on the page preview.

How It Works

When you view a page in the dashboard, editable content shows an Edit button on hover. Click to edit, make changes, and save.

What's Editable?

Elements with the data-edit-key attribute in your HTML:

<h1 data-edit-key="hero-title">Welcome</h1>
<p data-edit-key="hero-subtitle">Your tagline here</p>

Making Content Editable

In your HTML templates, add data-edit-key to any text element:

• Use unique, descriptive keys
• Use lowercase with hyphens
• Example: about-section-title, footer-copyright

Editor Features

• Text Editing — Click and type to change text
• Rich Text — Bold, italic, links (for rich text fields)
• Auto-Save — Changes save automatically
• Instant Preview — See changes immediately

Tips

• Only add data-edit-key to text you want editable
• Don't use it on CMS template tokens — those are managed in collections
• Keep keys consistent across page versions