Our Visual Editing feature is live! 🎉 Learn more
Directus Logo
  • Use Cases and Features
    • Headless CMS
      Manage and deliver content with ease
    • Backend-as-a-Service
      Build and ship applications faster
    • Headless Commerce
      A single source of truth for products
    • 100+ More Use Cases
      Build anything (or everything)
    • Instant APIs
      Connect a database, get REST + GraphQL APIs
    • Granular Policy-Based Auth
      Provide secure, autonomous data access
    • Visual Automation Builder
      Automate content and data workflows with ease
    • 50+ More Features
      Get everything you need out-of-the-box
    Project Showcase
    Built With Directus

    Built With Directus

    See what everyone's been building with Directus

  • Learn More
    • Blog
      Read our latest articles and guides
    • Case Studies
      Case studies and success stories
    • Community
      Join our 13k member Discord community.
    • Agency Directory
      Browse our list of agency partners
    • About Us
      Learn more about Directus and the team
    • Wall of Love
      See what others are saying about us
    • Contact
      Have a general inquiry or question for us?
    • Support
      Reach out to Directus support
    Watch Directus TV
    Directus TV
    Video

    Directus TV

    Go down the rabbit hole with hours of original video content from our team.

  • Developers
  • Enterprise
  • Pricing
Chat With UsGet Started Free
GitHub logo30,606
Back
product
Tuesday, April 29, 2025

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 teams 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 team 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 teams 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 Libary 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!

Posted By

Christina Harker

Christina Harker

Director, Product Marketing

Share

LinkedIn LogoTwitter LogoReddit LogoDev.to Logo

Sign up for updates 🐇

Get insights, releases, and exciting news delivered directly to your inbox once a month. No spam - we promise. 🙂

Related

Introducing Policies: A New Approach To Permissions

Aug 7, 2024

1000+ Employees, 1 Data Platform

Jan 31, 2025

Developers vs. Content Teams: Why There's Always Tension

Feb 7, 2025

  • Directus LogoDirectus Logo

    A composable backend to build your Headless CMS, BaaS, and more. 

  • Solutions
    • Headless CMS
    • Backend-as-a-Service
    • Product Information
    • 100+ Things to Build
  • Resources
    • Documentation
    • Guides
    • Community
    • Release Notes
  • Support
    • Issue Tracker
    • Feature Requests
    • Community Chat
    • Cloud Dashboard
  • Organization
    • About
    • Careers
    • Brand Assets
    • Contact
©2025 Monospace Inc
  • Cloud Policies
  • License
  • Terms
  • Privacy