Back
product

Introducing Visual Editing: Edit Your Content in Context

Edit text and images right on your site within Directus, see changes instantly, and simplify your content workflow.

One of our most requested features has finally arrived: Visual Editing now lets you edit website content directly where it appears on your site.

Directus Visual Editing Pop-Over Example

This important new feature allows content editors to edit their website content directly in-place, within the Directus Studio user interface. This eliminates the need to switch between form interfaces and preview modes.

Here's what makes Visual Editing so useful:

  1. Edit in Context. Make changes directly on your website while viewing it within Directus. Just click on any connected element and modify it instantly.
  2. Navigate Freely. Browse through your entire website within the Visual Editor module, finding and editing content across multiple pages without returning to collection interfaces.
  3. Immediate Feedback. See your changes reflected right away, ensuring your content looks exactly as intended before publishing.
  4. Flexible Editing Modes. Choose between drawer, modal, or popover interfaces depending on your editing needs and content complexity.

A Practical Example of Visual Editing

Consider managing a corporate website with dozens of landing pages that need frequent updates across multiple teams.

Without Visual Editing, your content editors would need to locate the right collection, find the specific item, edit it in a form interface, save, and then navigate to the live site to verify the changes appear correctly.

With Visual Editing, they simply:

  • Open the Visual Editor module in Directus
  • Navigate to the page they want to update
  • Click directly on the text, image, or component that needs editing
  • Make their changes while seeing exactly how they'll appear
  • Save and continue browsing or editing other elements

Implementation Overview

For the most up-to-date and detailed information on this new release, please check out our documentation at directus.io/docs/guides/content/visual-editor. 

We've built this feature with both developers and content editors in mind, balancing technical flexibility and user-friendly operation. Making use of the visual editor requires the set-up the Frontend Library and the Studio Module built into Directus.

Getting Started with Visual Editing

Visual Editing consists of two main components:

  1. A Frontend Library that developers integrate into their websites
  2. A built-in Studio Module within Directus where editors can navigate and edit the site

The setup process includes:

  1. Developers implement the Frontend Library on your website
  2. Configure the Visual Editor URLs in your Directus Settings
  3. Enable the Visual Editor module
  4. Start editing your content directly within Directus

Additional Features

Along with Visual Editing, we've also included:

  • Custom styling options to match your brand and website design
  • Client-side navigation support for single-page applications
  • Performance improvements for a responsive editing experience
  • Customization options through CSS selectors and variables

Visual Editing is available now!

This new feature is ready for you to implement. Check out our documentation to get started with Visual Editing in your projects.

We're interested to hear how this affects your content management workflow. As always, we welcome your feedback in our community platform at community.directus.io!