Understanding visualization values and data sources
Visualization values
Visualization values are essential for previewing how components will look and behave in the Design studio before they’re used in live pages.
Components are often built from templates that include fields like text, images, or dates. Some of these fields have default values, but many are left empty until configured in the Page builder. Without values, these empty fields would render as blank, making it hard to visualize the component’s layout or styling.
Visualization values solve this by acting as temporary placeholders: they’re not saved with the component and won’t appear in the final page, but they allow users to:
-
See realistic previews of components in the Design studio.
-
Experiment with styling and layout without needing live content.
-
Ensure brand consistency by customizing visualization values to match your organization’s look and feel.
Admins can configure the visualization values via the Visualization Settings pane, making it easy to tailor previews for different teams or sites.
Visualization data sources
Some components require a datasource to render properly. These visualization data sources:
-
Are stored in a dedicated folder in the backend.
-
Are updated when you modify the visualization values.
-
Can be edited manually using the Content Editor.
-
Allow full visualization of components that would otherwise appear broken or incomplete.