Content
Visual Editor
The Directus visual editor module allows you to visually edit the content of your website directly in-place.
Making use of the visual editor requires some effort on the part of web developers through two separate but related aspects. These are the Frontend Library, and the Studio Module built into Directus.
The library sets up the connection between your website and your Directus instance. The studio module is then used to render your website within the Directus Studio, make changes in place, and then render those changes as they are made.
The visual editor behaves similarly to Live Preview in that it renders content in an iFrame, but with a few important differences.
| Live Preview | Visual Editor | |
|---|---|---|
| Entry Point | Item Form | Website rendered in Visual Editor module |
| Motivation | Users want to view unpublished data | Users want to edit elements on their website directly in place and see changes immediately |
| Scope | Limited to editing/viewing a single item of a collection at a time | Users can navigate through the website freely and edit any linked item on a page without navigating to the applicable collection |
| Setup | Web developers need to implement a preview on their website to ensure that unpublished can be safely viewed | Web developers need to use the Visual Editing library to connect to the visual editor and set the data-directus attribute on the elements they want to be editable |
Get once-a-month release notes & real‑world code tips...no fluff. 🐰