Complete public surface of @contentstack/studio-react. All signatures are taken verbatim from dist/index.d.ts.

Fetches a composition spec and the data required to render it. Supports lookup by compositionUid, url, or both.

declare function useCompositionData(
  compositionQuery: CompositionQueryInput,
  options?: CompositionQueryOptions,
): CompositionDataResult;

CompositionDataResult is a discriminated union of LoadingState | ErrorState | SuccessState, each exposing specOptions, isLoading, error, refetchSpec, and refetchData.

const { specOptions, isLoading, error } = useCompositionData({ url: "/about" });

Render N compositions in one pass with shared component loading and per-composition deduplication. Use this when a page is composed of multiple regions, each backed by its own composition (dashboards, landings with mixed-source regions, etc.). Avoids per-component duplicate fetches.

declare function useMultipleCompositions(
  options: UseMultipleCompositionsOptions,
): UseMultipleCompositionsResult;

UseMultipleCompositionsOptions takes an array of composition queries; the result is keyed back to each query so you can fan-out the specOptions to multiple <StudioComponent /> instances in render.

From @contentstack/studio-react-components/hooks:

• useHiddenElementNotification: surfaces a notification when an authored element is hidden in the current breakpoint.
• useSelected: returns whether the current node is selected in the builder.

Main renderer with full editing capabilities. Mounts on template preview routes; picks the right inner rendering path automatically based on mode (edit, show-edit-button, plain preview).

declare function StudioComponent(props: {
  specOptions: StudioComponentSpecOptions;       // required — what to render
  data?: ComposableStudioData["component_props"]; // optional — runtime Component Default Data, bindable from the canvas
}): JSX.Element;

<StudioComponent specOptions={specOptions} data={componentData} />

The data prop is the canonical hook for injecting external data into a composition: anything not in Contentstack (live pricing, geolocation, A/B variant, feature flags, weather, etc.). Whatever object you pass here becomes bindable inside the canvas through the Data Picker root "Component Default Data". See Component Default Data → runtime data injection for the full pattern with worked examples.

Internal-use renderer that accepts a raw StudioSpec. You should not need this: <StudioComponent specOptions={...} /> is the single user-facing renderer for both visitor and in-Studio routes. PreviewRenderer is exported by the SDK for advanced cases (custom batch-loading flows building their own spec pipeline). All canonical patterns in this doc set use StudioComponent.

declare function PreviewRenderer(props: {
  spec: Omit<StudioSpec, "compositionEntry"> & { compositionEntry?: StudioSpec["compositionEntry"] };
  data?: ComposableStudioData["component_props"];
}): JSX.Element;

Zero-config canvas. Place on a wildcard route; it discovers the composition being edited and fetches data automatically.

declare const StudioCanvas: () => JSX.Element | null;

<Route path="*" element={<StudioCanvas />} />

Render-props button shown on 404 routes inside the Visual Builder to create a new linked composition.

declare function VisualEditorCreateCompositionButton(
  props: VisualEditorCreateCompositionButtonProps,
): React.ReactElement | null;

Render-props receive { isInsideVB, shouldShow, handleCreateComposition, isLoading }.

Register a single component.

declare function registerComponent(
  componentConfig: Parameters<ComponentRegistry["registerComponents"]>[0][0],
): void;

Register a component whose implementation is lazily loaded.

declare function registerLazyComponent(
  config: Omit<Parameters<ComponentRegistry["registerComponents"]>[0][0], "component">,
  loader: () => Promise<(props?: any) => React.ReactNode>,
): void;

Bulk-register components. registerComponents is the public alias.

declare const registerComponents: typeof registerPublicComponents;

Register responsive breakpoints. The first entry must be the default breakpoint and carries no media query.

declare const registerBreakpoints: (breakpoints: BreakpointInput) => void;

Register colour / typography / spacing tokens. Returns a fully-typed DesignTokens object merged with defaults (unless allowDefaultDesignTokens: false).

declare function registerDesignTokens<T, O extends Partial<DesignTokensOptionsInput>>(
  designTokens: T,
  options?: O,
): DesignTokens<...>;

Register named design classes. Use as const satisfies DesignClassesInput[] for best type inference.

declare function registerDesignClasses<C>(designClasses: C): DesignClassesNames<C>;

declare function getDesignTokens(): DesignTokens;
declare const getDefaultDesignTokens: () => any;

Returns the actual --token-… CSS variable map for the registered token set, the source of truth for runtime variable names (which use _ separators and are not derivable by hand). Useful when you need to mirror Studio's tokens into your own design system's --brand-* variables at app shell.

declare function getDesignTokenCssVariables(): CssVariablesToValue;
// CssVariablesToValue ≈ Record<`--token-${string}`, string>

Example:

const map = getDesignTokenCssVariables();
// e.g. { "--token-background_style_solid_blue": "#1e3a8a", ... }

// Mirror into your own design-system variables on :root
for (const [tokenVar, value] of Object.entries(map)) {
  // pick the tokens you want to expose, alias them
  if (tokenVar === "--token-background_style_solid_blue") {
    document.documentElement.style.setProperty("--brand-primary", value);
  }
}

See Design tokens for why hand-writing var(--token-…) references is discouraged.

• BUILT_IN_COMPONENTS, DesignTokens, DesignTokensInput, RegisterComponentOptionsInput: from @contentstack/studio-registry.
• extractStyles, studioSdk: from @contentstack/studio-core.
• registerJSONRTE: from @contentstack/studio-client.

Exported type-only:

• Cslptag: { "data-cslp": string } | undefined. Attribute used for live preview tagging.
• StudioAttributes: { studioAttributes?: BuilderNodeInternalAttributes }. Attributes passed to a component when wrap: false; only populated inside the builder.
• PreviewRendererProps
• VisualEditorCreateCompositionButtonProps, VisualEditorCreateCompositionButtonRenderProps

Re-exported types: CompositionQueryForSSR, LightConfig, SearchQueryInput, StudioComponentFetchOptions, StudioComponentSpecOptions, StudioSpec, UserConfig, Node, CompositionQuery.

• Composition overview: what useCompositionData returns and how to render it.
• Canvas URL: pairing StudioCanvas with a wildcard route.
• Registering components: using registerComponent and registerComponents.
• Design tokens: registerDesignTokens and registerDesignClasses in context.
• Component default data: populating the data prop on StudioComponent.
• Optimizing load: when to prefer registerLazyComponent.