Composition glossary

Uniform Canvas has a standard nomenclature that's used throughout. Here is what some of these terms mean.

A component is a basic building block of a digital experience. It represents an abstract notion of some part of a digital experience. This description is, purposefully, quite vague because components can represent almost anything you see a digital experience or anything used to control what you see.

Examples of components include:

  • Hero on a landing page
  • Product information in a commerce app
  • Registration form
  • Calendar of events
  • Screen in a mobile app
  • Page in a website
  • Email message
  • Settings for a menu or popup message

A practitioner such as a marketer or a merchandiser is able to configure values on a component to control a digital experience.

A component has the following properties:

Uniform supports the following types of components:

TypeDescription
ComponentThis is a general-purpose (or "regular") type of component that can be added to a slot in another component.
Composition componentThis type of component that can be used to create a composition. In all other ways, a composition component is identical to a "regular" component.

The component library is where you define your components. Usually, a component definition in the library has a 1:1 mapping with a component in your frontend framework.

For example a "Promo" component in the Canvas component library would define the data structure that a Promo component React would expect to receive as props.

Parameters define the data that a component definition needs, which might be data in some external system or local parameters to influence how the external data appears when rendered. For example a Promo component might have two parameters: content, which is a link to some content in a headless CMS, and alignment, which could be a dropdown list of options for authors. These are the basic building block of what will end up as component props when rendering a Canvas composition.

A slot is a named part of a component which can have child components added to it. These are similar to the idea of slots in web components or scoped slots in Vue. You can control the types of components that are allowed in a slot, enabling you to give no-code flexibility in layout, while retaining design control over structure.

A variant can be added to a component definition to define named variations that are possible for the component. These named variants can be used to create visual differences in a component for A/B testing, or to give authors flexibility to select different visual treatments. All variants receive the same component data.

A composition is a set of components that define a unit of layout. Often this could be considered an analog of a web page, if Canvas were being used to construct a website. Structurally a composition is a tree, with a root component instance selected from the component library. The branches of the tree from the root are created with slots.

Composition state is used to support a basic workflow process. This allows you to make multiple changes to a composition without affecting the "live" version of it. This means a composition may exist in multiple states.

The following is an example of how composition state is set when working in Canvas:

StepActionStates
1Create new composition. This creates the "preview" version.preview
2Change & save composition. This updates the "preview" version.preview
3Publish composition. This creates the "published" version.preview, published
4Change & save composition. This updates the "preview" version.preview, published
5Publish composition. This updates the "published" version.preview, published
6Unpublish composition. This removes the "published" version.preview
7Delete composition. This removes the "preview" version.

A slug is a text string that can be assigned to a composition or content entry to give it an easier-to-remember identifier. In some cases, the slug will be used to represent an URL segment by the consumer of the Canvas API, but this isn't necessarily always the case.

A reusable component instance that can be referenced on one or more compositions. Patterns can be configured to allow partial overriding of their parameter and data resource values to support partially-reused data.

A data connection is the mappings between a property of an API response (a data element) and the value of a dynamic token which is placed inside a parameter of a component in Canvas. These connections to your UI components are made in the Canvas editor and don't require any code changes.

A data instance, such as a CMS or API base URL, that stores secure authentication as needed. For example, the Yelp API.

Represents the API query definition for the type of content or data that can be retrieved from a data source, such as a review from Yelp.

The specific instance of the data type which represents the JSON response of an API call, such as a review of a particular coffee shop from Yelp.

Individual pieces of data that make up the data resource, like the title of a particular coffee shop review from Yelp.

Dynamic inputs represent dynamic path segments or query strings in project map nodes to define dynamic routes. Dynamic inputs can connect to dynamic tokens in data resources and Canvas components for use cases that require data fetching and routing logic which is dependent on external data.

A dynamic token is a placeholder for text which stores a data connection. The text of the dynamic token gets replaced with the resolved content or data of its data connection.

Uniform-managed fetching, caching, and merging of external data sources into your composition parameters. Edgehancers run at the CDN edge, so they're always close to your visitors for maximum cache efficiency even for regional API data.

To be able to fetch external data on the CDN edge you need to provide the connection and query details by configuring your data sources and data types.

An enhancer is a function that provides a way to fetch external data referenced in a Canvas composition. For example if a composition contains a component instance with a parameter that refers to content from a CMS, an enhancer will pick that parameter up and fetch the actual CMS data.

There are two types of enhancers: parameter enhancers and data enhancers. A parameter enhancer alters the value of parameters on a component instance, for example to change a CMS content ID into the API response for that CMS' content API. Data enhancers are used to add data to a component that's not based on a specific parameter; for example you might wish to augment component data with customer information from an internal API.