Experiences

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.

Experience editor

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 vs entry-level localization.

  • 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.

NOTE: You can set up your custom breakpoints with custom sizes, names, and icons. To learn more, refer to Register custom breakpoints.

  • 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:

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