Skip to content

Document visual-editor customization vars for editable-element redesign #676

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
formfcw merged 2 commits into from
May 15, 2026
Merged

Document visual-editor customization vars for editable-element redesign #676

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
229cd90
document visual-editor customization vars for editable-element redesign
formfcw May 15, 2026
cee03db
drop obsolete visual-editor caveat from accessibility doc
formfcw May 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions content/getting-started/10.accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,6 @@ Read more: https://www.tiny.cloud/docs/tinymce/6/tinymce-and-screenreaders/

### Things to keep in mind

- Visual Editor is only accessible on the Directus side — not your website. So we always need to click an edit button first, then the
overlays are accessible.
- Manual Sorting is currently not supported/accessible.
- Once focused, the code interface (Codemirror) cannot be exited using the tab key.
- The Markdown interface also doesn’t allow you to exit the field. This is because it supports tabs inside the editor’s
Expand Down
29 changes: 22 additions & 7 deletions content/guides/02.content/8.visual-editor/3.customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@ The library ships with a number of built in CSS Selectors already applied to its
.directus-visual-editing-edit-button {
/* the edit button */
}
.directus-visual-editing-actions-flipped {
/* a modifier on the rect that flips the action buttons below it, applied automatically when the rect is near the top of the viewport */
}
```

## CSS Variables
Expand All @@ -48,21 +51,33 @@ The library also ships with a number of predefined CSS variables. These can be o
```css
:root {
--directus-visual-editing--overlay--z-index: 999999999;
--directus-visual-editing--rect--border-spacing: 9px;
--directus-visual-editing--rect--border-width: 2px;
--directus-visual-editing--rect--border-spacing: 8px;
--directus-visual-editing--rect--border-width: 1px;
--directus-visual-editing--rect--border-color: #6644ff;
--directus-visual-editing--rect--border-radius: 6px;
--directus-visual-editing--rect-hover--opacity: 0.333;
--directus-visual-editing--rect-highlight--opacity: 0.333;
--directus-visual-editing--edit-btn--width: 28px;
--directus-visual-editing--edit-btn--height: 28px;
--directus-visual-editing--edit-btn--radius: 50%;
--directus-visual-editing--rect-hover--opacity: 0.4;
--directus-visual-editing--rect-highlight--opacity: 0.4;
--directus-visual-editing--actions--offset: 4px;
--directus-visual-editing--actions--focus-ring-color: #6644ff;
--directus-visual-editing--actions--focus-ring-width: 2px;
--directus-visual-editing--actions--focus-ring-offset: 2px;
--directus-visual-editing--edit-btn--width: 24px;
--directus-visual-editing--edit-btn--height: 24px;
--directus-visual-editing--edit-btn--radius: 6px;
--directus-visual-editing--edit-btn--bg-color: #6644ff;
--directus-visual-editing--edit-btn-hover--bg-color: color-mix(in srgb, #6644ff, #2e3C43 25%);
--directus-visual-editing--edit-btn--icon-bg-image: url('data:image/svg+xml,<svg>…</svg>');
--directus-visual-editing--edit-btn--icon-bg-size: 66.6%;
--directus-visual-editing--ai-btn--bg-color: #6644ff;
--directus-visual-editing--ai-btn-hover--bg-color: color-mix(in srgb, #6644ff, #2e3C43 25%);
}
```

::callout{icon="material-symbols:info-outline"}
**Defaults inside the Directus Studio**
When the visual editor runs inside the Directus Studio iframe, defaults for several variables are sourced from the active Studio theme (primary color, border radius, button size, focus-ring width/offset) rather than the compiled-in fallbacks shown above. Your own `:root` or `customClass` overrides still take precedence.
::

## Custom Classes

Finally, custom classes can be added to all or a subset of elements defined by the library’s [apply method](/guides/content/visual-editor/frontend-library#api) using the `customClass` property. This class will be applied to the `div.directus-visual-editing-overlay` element within the `div#directus-visual-editing` container.
Expand Down