About Studio React SDK

Use Contentstack’s Studio to power composable experiences in your React projects.

The Studio React SDK lets you fetch, render, and edit compositions directly within your React application. It includes pre-built components such as StudioComponent, PreviewRenderer, and StudioCanvas, as well as supporting hooks and utilities to streamline integration.

Note: Initialize the Studio React SDK with a Contentstack Delivery SDK instance with Live Preview enabled. Without Live Preview, editing capabilities won’t work.

Here are some of the key features of the Studio React SDK:

• Composable content rendering: Fetch compositions from Contentstack Studio inside React applications. Render them using the useCompositionData hook and the <ComposableComponent> component.
• Custom component registration: Register custom React components in Studio by defining props, data bindings, and conditions in a structured, schema-based configuration. This allows developers to build modular and reusable UI elements within Studio.
• Design tokens and theming: Define reusable design tokens for color, spacing, and typography as CSS variables. Use these tokens when configuring component-level styles through sections such as size, layout, background, and shadow for consistent theming.
• Responsive breakpoints: Register custom viewport breakpoints to define and manage device-specific layouts within Studio.
• Studio-aware utilities and hooks: Make components adapt to Studio state using built-in hooks. These hooks detect selection, visibility, and environment state to enable conditional rendering and interaction logic.
• Server-side rendering support: Render Studio compositions in server-side frameworks such as Next.js and inline CSS during the rendering to improve performance and SEO.

To integrate your React application with the Studio React SDK, follow the steps in the Get Started document.