Studio React

A React library for building and rendering studio components with Contentstack's Visual Builder. This package provides React components, hooks, and utilities for creating dynamic, editable content experiences.

Prerequisites

Contentstack Delivery SDK. You can follow the instructions to setup the SDK.

Installation

npm install @contentstack/studio-react

Peer Dependencies

This package requires React 16.0.0 or higher:

{
  "peerDependencies": {
    "react": ">=16.0.0",
    "react-dom": ">=16.0.0"
  }
}

Quick Start

Basic Usage

import { StudioComponent, useCompositionData } from "@contentstack/studio-react";


// Initialize the SDK
studioSdk.init({
  stackSdk: Stack, // Contentstack Delivery SDK
  cslp: {
    appendTags: true,
  },
});

function MyApp() {
  const { specOptions, isLoading, error } = useCompositionData({
    composableUid: 'your-composition-uid',
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <StudioComponent specOptions={specOptions} />;
}

Registering Components

To register components, use the registerComponent function:

import { registerComponent } from "@contentstack/studio-react";

function MovingBanner({ children, ...rest }) {
  return <marquee {...rest}>{children}</marquee>;
}

registerComponents([
  {
    name: "moving-banner",
    displayName: "Moving Banner",
    component: MovingBanner,
    props: {
      children: {
        type: "slot",
        displayName: "Content",
      }
    }
  },
])