Visual Editor

<div style="padding:56.33% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1068823628?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Directus-Visual-Editor-Preview"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

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.

:::collapsible{ name="differences" class="mt-2"}

	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
:::