Experiences overview

Experiences by Contentful Studio are the interactive UI inside the web app that allows users to assemble web experiences with their own self-built components and reusable patterns.

NOTE: Experiences require a preliminary setup. After the setup, you can access Experiences from the Experiences tab in the Contentful web app.

The experience editor includes the following elements:

• Components — A component is a building block in an experience with its individual set of variables. There are the following categories of components:

  • Basics - Basic components in the experience editor that are provided by Contentful out-of-the-box.

  • Structure - Components that help you shape your experience layout, like container, section, and column.

  • Design system - Components that a user can import to Experiences using the Experiences SDK. These can be your existing design components that you would like to be able to use in Experiences.

  • Patterns - Component combinations that you can create directly in an experience and save to reuse further in other experiences.

• Canvas — A workspace where you can place your components and preview the experience. Drag and drop a component on a canvas, and it is immediately rendered there.

• Layers tab — View the hierarchy of your experience. Drag and drop components to adjust their hierarchy and nesting.

• Settings tab — You can update your experience name and slug and change the preview platform.

• Locale selector - Switch between the locales to display the localized content of your entries. The available locales are defined by the environment locale settings.

  The localization in the Experiences is field-level.

• Breakpoint switcher - You can create responsive layouts by adjusting component variables per breakpoint. To individually change component variables in a layout, select the desired breakpoint and make the desired adjustments to the components.

• Design tab — Adjust styling and visual representation of a component within the page.

• Content tab — Add content or media to your components according to the following options:

  • Manual - Manually enter text with Rich text formatting options or a link to an asset.

  • Content binding - Link a new or existing entry or asset to your component.

NOTE: Once the component is dropped on the canvas, unless it was dropped into an existing container component, it is wrapped into a “Section” component by default.

Related articles

To learn how to set up Experiences by Contentful Studio, refer to the following articles:

• Enable Experiences in spaces

• Configure Experiences

• Set up Experiences SDK

• Register custom components

• Design tokens

To learn how to create and manage experiences, refer to the following articles:

• Create an experience

• Create a pattern

• Bind content

• Publish an experience