Visual editing

Uniform provides the layer in a composable stack where users build experiences. As part of Canvas, users can leverage data from integrated systems to create compositions. Authors create, edit, and publish compositions from the visual editor, while seeing what the user will see.

With the visual editor you can:

  • Preview content at different screen sizes (for example, desktop and mobile)
  • Understand the effects of changes made to the experience
  • Preview variants when adding personalization, localization, or A/B testing to an experience

Note that visual editing differs from in-line editing. With the preview seen in Uniform, editors can decide which system to update. Updates to core content should be made in the system of record. Changes to variable content (personalized, localized, or test variants) should be made in a system like Uniform to prevent pollution of the content model.

The updates to content made in Uniform don't affect core content managed in different systems.

tip

Looking for developer information? This page focuses on what contextual editing is and how to use the interface. Technical folks may be more interested in:

Editing compositions within Canvas is done in four main areas:

  • Header: Contains the composition name, slug or node information, management controls, and status information
  • Side rail: Allows you to open different panels to explore details and resources related to the currently opened composition.
  • Preview panel: Holds the preview of the page and some display controls
  • Property panel: Contains controls for component parameters and personalization
The general layout of the contextual-editing window

Main attributes of the composition are managed within the header. This includes:

  1. Composition name: edit the name by typing in the text field provided.
  2. Slug or node information ("attached to"):
    • If the composition is attached to a node in a project map, the name of the node will be displayed. Clicking on the name will open an editing panel where you can either add a new node, select an existing node from the tree, or detach the node. Clicking the copy icon will copy the full URL of the node.
    • If there is no project map node associated with the composition, the composition slug is displayed. The slug can be updated by typing in the text field provided.
  3. Management controls: Editing a composition will active the Save button. Next to the button are three dots •••. Clicking the dots opens a menu of management options:
    • Manage data resources: This option opens a panel where data resources can be added, edited, or removed.
    • View source: This shows the API result that would come back for the composition in real time, including unsaved changes.
    • Copy preview URL: This copies the preview URL configured in Settings > Canvas settings onto your clipboard.
    • Properties: Selecting this option displays the slug and the composition ID. Both can be used when manipulating the composition in a front-end application.
    • Duplicate: Click this to create a duplicate composition that will appear in your project.
    • Edit component definition: This link will take you to the component definition in your component library.
    • Delete: This deletes the composition.

The side rail sits to the left of the screen and allows you to view details and resources connected to the current composition.

It contains five elements:

ElementIcon
Structure
structure
The structure icon in the side rail
Data resources
data-resources
The data resources icon in the side rail
Source
source
The source icon in the side rail
Composition history
history
The history icon in the side rail
Properties
properties
The properties icon in the side rail

In the structure section shows the hierarchy of slots and components.

You can:

  • Reorder components by dragging and dropping elements, depending on the configuration of the composition or the roles and permissions applied.
  • Expand or collapse hierarchical sections, such as if you have slots within a component, making it easier to focus on specific sections.
example-structure
An example view of the structure element.

The data resources section provides features to manage your data sources and data types from within your composition.

example-data-resource
An example view of the data resource element.

The source element shows you the references of your composition as JSON data. You can see composition data:

  • As it will be saved as JSON.
  • As it would be returned for use in a consuming application, with data resources, patterns, and pattern overrides applied.
  • The comparison of current edits with the last published version.
example-source
An example view of the source element.

Here you can see drafts and published versions of your composition. If you make several changes within the same day, those updates will be collected together as the number of versions created on the day. Selecting a revision will load the composition as "read only" with the references as they were at that point in time. You can:

  • See what was changed, when, and by whom.
  • Restore this version (which will create a new version with the associated references).
  • Go back to the current version.

Data is saved for the last 30 days.

This is useful when there are multiple people collaborating on a single composition, or previous version data needs to be reviewed. You should note that this isn't a full audit feature. Uniform does track the references that are saved as JSON. It doesn't save the data coming from external sources. If you're reviewing a pattern, only the references will be saved.

example-history
An example view of the history element.

note

Only structures and component definitions are saved at a given point in time. If you restore an old composition, and its components have been updated, there could be conflicts or broken references.

Within the properties section of the structure panel you will see some basic information about your composition, including the:

  • Composition slug
  • Composition ID
  • Created, modified, and last published dates
example-properties
An example view of properties element.

The preview panel sits in the middle of the screen (in larger view ports). Authors can:

  • Toggle between full-width or mobile views.
  • Refresh the view to show the most recent updates from source systems.
  • Open the preview in its own browser tab or window.

The preview panel can also be closed by clicking on the "X." If closed, the two side panels fill the window. Clicking the “|O|” icon will re-open the preview.

The property panel is to the right (in larger view ports) or below the composition structure (in smaller view ports).

There are two tabs in the panel. The content tab orients the author showing which component is currently being edited. Clicking the “•••” on the active component opens a menu where authors can:

  • Convert the component to a pattern (if it's not already)
  • Edit pattern or copy pattern (if it's already)
  • Duplicate the component
  • Remove the component

Variants

Variants can also be managed in the property panel. If there are multiple variants for the component, they can be selected and previewed. Clicking the “•••” to manage display variants or the “+” to add a display variant will take authors to the component library to edit the component variations.

Parameters

Authors can also manage parameters associated with the component from the property panel. Parameters will be specific to the integrations, data source, data type, and elements associated with the composition.

Click the + in either the structure or the preview panel to add a component to a composition. This will open the insert component dialog.

insert-component
The dialog for inserting a component.

Authors can browse available components by:

  • Searching by keyword by typing into the search box
  • Choosing from the "quick insert" list, which contains:
    • Built-in components: Uniform components that are part of every project and are available on all compositions.
    • Recently used components: Up to three most recent components used in a slot with the same slot ID.
    • New: The most recently used components.
  • Viewing all, which shows all components available in the current slot.
  • Filtering by category. Components can be categorized by editing the component. Categories are managed by editing components as well.

Learn more about how to work with the visual editor: