Uniform Canvas has a standard nomenclature that is 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 in order to control a digital experience.
A component has the following properties:
Uniform supports the following types of components:
|Component||This is a general-purpose (or "regular") type of component that can be added to a slot in another component.|
|Composition component||This 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. In most cases 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. In many cases 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.
A slug is a text string that can be assigned to a composition to give it an easier-to-remember identifier. In many cases the slug will be used to construct a URL route by the consumer of the Canvas API, but this is not necessarily always the case.
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 is not based on a specific parameter; for example you might wish to augment component data with customer information from an internal API.
A reusable component instance that can be referenced on one or more compositions.