> This page is for Studio.

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

# Installation

> Learn how to install the Experiences SDK.

Before you start setting up the Experiences SDK, ensure that you have accomplished the setup in the Contentful web app: [enable in a space(s)](https://www.contentful.com/help/enable-spaces-for-experiences) and [configured Experiences](https://www.contentful.com/help/configure-experiences). To learn more about the Experiences setup steps, refer to [What are Experiences?](/experiences/overview).

### System requirements

* React v18+
* [Contentful Javascript client library v10.6.0+](/sdks/javascript/tutorials/using-js-cda-sdk)
* Web application must support being rendered in an iframe. If required by your CSP, add [https://app.contentful.com](https://app.contentful.com) into the list of allowed domains.

> **Info**
>
> Studio is supported for React and some meta-frameworks that support React (such as Next.js).

### Supported browsers

The Experiences SDK supports all modern desktop browsers.

* Google Chrome
* Mozilla Firefox
* Opera
* Apple Safari
* Microsoft Edge

## Install the SDK

Within your project folder, install the Experiences SDK and Contentful Javascript client library by running the following command:

```shell
npm install @contentful/experiences-sdk-react contentful
```

Next, follow the guide for your particular application to get started:

* [React](/set-up-experiences-sdk-with-react) for React applications that render on the client, like Create React App, Vite, or other single-page applications
* [Next.js](/set-up-experiences-sdk-with-nextjs) for apps built with Next.js