Visual editor setup glossary
Learn the key terms for working with the visual editor, especially for setting up the visual editor.
# Annotations
Annotations are HTML data attributes that are added to elements in your site’s code so that the visual editor can map content in the preview to the correct document and field in the content source. This allows for two-way content synchronization, ensuring changes made in the editor are saved back to the content source and updates in the source are reflected in the editor.
Note that the data-sb-object-id attribute is used to uniquely identify a document, while the data-sb-field-path attribute specifies the field within that document to be edited.
Learn more in our Annotations reference docs.
# Automatic Content Reload
Automatic Content Reload is the mechanism that updates the site preview so that a user sees content changes made by anyone in real-time, without requiring a full page reload. This ensures all users are always working with the latest content.
# Content Source Interface (CSI)
CSI is the engine that enables the Visual Editor to connect to your content source, allowing for two-way content synchronization. It is the mechanism that allows the Visual Editor to read content from and write changes back to the content source. CSI supports any structured content source with read and write abilities via an API.
Learn more about the Content Source Interface in our reference docs.
# Custom Actions
Custom actions are like integrations that allow users to perform site and content tasks directly within the Visual Editor. This can include triggering workflows, sending content for translation, or generating AI content for fields. Custom actions can be triggered at various points in the UI, including global actions for the site, bulk actions on multiple documents, model actions on an individual document, and field actions on a specific field.
Learn more about the Custom actions in our reference docs.
# Custom Fields
Custom fields are tailored controls for users when editing fields in the page and content editors. These allow developers to provide a better user experience when editing particular kinds of content by extending the default set of field types and controls. Custom fields can be editable inline or in a modal.
# Document
A document is a structured data object from a content source that represents content for a page or component. Documents are grouped together in the content source using a model. Learn more in the model definition or in the Document reference docs.
# Document Hooks
Document hooks are methods that allow a developer to make programmatic adjustments to content based on a user’s actions, before the change is stored in the content source. This allows for specific behaviors and content transformations based on what a user does.
# Editorial Permissions
Editorial permissions define the level of access a user has within Visual Editor for each site. They control what a user can change and can be customized. You can customize these permissions or use default roles like Reviewer, Content Editor, Publisher, and Developer.
# Field Groups
Field Groups are used to organize form fields into tabbed groups, which simplifies the editing interface for a user editing content when a model has many fields. This helps a user focus on specific areas of content.
# Inline Editor
The Inline Editor enables users to make changes directly within the site preview by clicking on elements. This makes content editing more intuitive for users. It is enabled through annotations, which map the content to the correct source and field.
# Model
A content schema that defines the structure of content in a content source. There are three types: page, data, and object.
- Page models represents the shape of a web page and is tied to a URL.
- Data models represents content meant to stand alone or be referenced from a page.
- Object models represents repeatable content embedded in another model.
For example, a web page can apply visual editor models in this way:
For more details, check out our structured content docs or the content modeling reference docs.
# Page Editor
The Page Editor is an editing panel that changes context based on the active page in the preview. It is enabled when the Visual Editor knows that a document is associated with a URL path. The page editor allows content editors to edit fields within the context of the page they are viewing.
# Visual Editor configuration file
The visual editor configuration file is a stackbit.config.ts or stackbit.config.js file stored in the root of your site repository.
Did you find this doc useful?
Your feedback helps us improve our docs.