> This page is for Experience Orchestration.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://contentful.com/developers/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://contentful.com/developers/docs/_mcp/server.

# Other frameworks

> Render experiences in frameworks without a first-party Experiences SDK adapter.

> **Info**
>
> Experiences SDK is currently available in alpha. APIs are unstable and subject to change.

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

| The app uses                                                                  | Use                                                                                                                      |
| ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| React, Next.js, React Router, TanStack Start, or Vite with React              | `@contentful/experiences-react`. See [Get started](/developers/docs/experience-orchestration/experiences-sdk/get-started).               |
| Svelte or SvelteKit                                                           | `@contentful/experiences-svelte`                                                                                         |
| Angular                                                                       | `@contentful/experiences-angular`                                                                                        |
| A React-based framework that needs its own render walk, such as Astro islands | The React adapter's custom renderer. See [Render experiences in Astro](/developers/docs/experience-orchestration/experiences-sdk/astro). |
| Any other framework, such as Vue, Nuxt, Solid, Lit, or Qwik                   | A renderer you build on the Node or Web SDK, with the adapter skill below                                                |

## 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](/developers/docs/experience-orchestration/experiences-sdk/astro) for a step-by-step guide, and the [Astro example](https://github.com/contentful/experiences/tree/main/examples/astro).

## Build an adapter for another framework

Fetching and resolving are framework-neutral: [`@contentful/experiences-node`](https://github.com/contentful/experiences/tree/main/packages/node) on the server and [`@contentful/experiences-web`](https://github.com/contentful/experiences/tree/main/packages/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](https://github.com/contentful/experiences/blob/main/skills/implement-framework-adapter/SKILL.md) 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.