Skip to navigation
Experiences SDK

Experiences SDK

Experiences SDK is currently available in alpha. It is published to npm. APIs are unstable and subject to change.

What it does

The Experiences SDK renders Experience Orchestration content in your application, with your own components. You register your design system’s components, and the SDK fetches an experience from the Experience Delivery API (XDA) and renders it with them.

The following features are included:

  • Fetch and resolve: fetchExperience fetches an experience and resolves it into serializable data, with design tokens resolved and your resolveData functions run.
  • Server or client rendering: ServerExperienceRenderer renders on the server, including in React Server Components. ClientExperienceRenderer renders in the browser.
  • Bring your own components: Register your existing components by the IDs authored in Contentful. They receive content and design values as ordinary props.
  • Draft content and live preview: Fetch unpublished changes, or show unsaved canvas edits as they happen.
  • Framework adapters: React, Svelte, and Angular adapters, plus building blocks for other frameworks.

How it works

  1. Register your components in a configuration object, keyed by the component IDs authored in Contentful.
  2. Fetch the experience with fetchExperience. It returns the resolved experience as plain data you can pass from the server to the client.
  3. Render the experience with a renderer, which renders each node with your registered component and its merged props.

Packages

Install the adapter for your framework. It exports everything you need: the delivery client, the resolver, the renderers, the types, and the design utilities.

PackageUse
@contentful/experiences-reactReact, Next.js, and other React-based frameworks
@contentful/experiences-svelteSvelte 5 and SvelteKit
@contentful/experiences-angularAngular 20 or later, including @angular/ssr
@contentful/experiences-nodeFetching on a server without a framework adapter
@contentful/experiences-webFetching in the browser without a framework adapter
@contentful/experiences-live-previewLive preview without a framework adapter
npm install @contentful/experiences-react

Next steps