Other frameworks

The Experiences SDK has first-party adapters for React, Svelte, and Angular. For other frameworks, choose by what the framework renders with:

Build a custom renderer on React

@contentful/experiences-react/custom-renderer exports the building blocks the React renderers are made of: resolveNodeProps, ExperienceNode, and createExperienceNode. Use them when your framework renders React components but has to walk the experience itself, for example to hydrate only interactive components as islands. The renderers use the same building blocks, so a node renders the same either way.

See Render experiences in Astro for a step-by-step guide, and the Astro example.

Build an adapter for another framework

Fetching and resolving are framework-neutral: @contentful/experiences-node on the server and @contentful/experiences-web in the browser return the same resolved experience. An adapter is the render layer on top: it walks the experience’s nodes, renders each one with your registered component and its merged props, and handles slots, fallbacks, and diagnostics the way the first-party adapters do.

The implement-framework-adapter skill walks you, or an AI coding assistant, through building one:

• What every adapter implements, in the order you build it
• How React, Svelte, and Angular concepts map to Vue, Solid, and other frameworks
• How to handle the server/client split
• The tests an adapter should pass, with a sample resolved experience

To use it with an AI coding assistant, point the assistant at the file, or copy the skills/implement-framework-adapter/ folder into your project’s skills directory.