Utilities

Contentstack’s SDK provides utilities that help developers detect page and component states, such as loading or selection. These utilities determine how components render and behave, ensuring consistent and predictable interactions across the application.

clientRendererModeUtil

The clientRendererModeUtilutility determines the renderer mode and environment. It provides methods to check the current rendering context and adjust component behavior accordingly.

import { clientRendererModeUtil } from '@contentstack/studio-react';

// Check environment
const isInStudio = clientRendererModeUtil.isInsideStudioFrame();
const isInVisualBuilder = clientRendererModeUtil.isInsideVisualBuilderFrame();
const isInIframe = clientRendererModeUtil.isInsideIframe();

// Check specific composition state
const isEditing = clientRendererModeUtil.isEditingCurrentComposition('my-composition-uid');

// Get current renderer mode
const mode = clientRendererModeUtil.getMode('my-composition-uid');

isInsideStudioFrame

The isInsideStudioFrame() method checks whether the app is running inside Studio to adapt its behavior specifically for the Studio environment.

Note Use this method to enable Studio-specific behavior only when the application runs inside Studio.

isInsideIframe

The isInsideIframe() method checks whether the app is running inside an iframe, which can affect rendering and communication with parent contexts.

Note Implement cross-frame communication or adjust the UI when running inside an iframe.

isInsideVisualBuilderFrame()

The isInsideVisualBuilderFrame() method checks whether the app is running inside the Visual Builder frame, which provides additional editing capabilities.

Note Enable enhanced editing features when in the Visual Builder environment.

isEditingCurrentComposition

The isEditingCurrentComposition() method verifies whether a specific composition, identified by its UID, is currently being edited. This ensures that interactive or editable features activate only when the targeted composition is in edit mode.

Use this method when multiple compositions are displayed on a single page and you need to identify which one is currently active for editing.

Parameters:

Name	Type	Description
compositionUidcompositionUid	string	The UID of the composition used to check if it is currently in edit mode.

import { isCompositionBeingEdited } from '@contentstack/studio-react';
const isEdited = isCompositionBeingEdited();

getMode

The getMode() method determines the current renderer mode for a given composition, identified by its UID. It allows components to conditionally render UI elements based on whether the composition is in edit, edit-button, or preview mode.

edit	The composition is currently being edited.
show_edit_button	The environment should display an Edit button (inside Visual Builder or when the composition is inactive in Studio).
preview	The composition is in default preview mode.

Parameters:

Name	Type	Description
compositionUid	string	The UID of the composition used to check its current renderer mode.

// Use mode to conditionally render components

if (mode === "edit") {

  // Show editing interface

} else if (mode === "show_edit_button") {

  // Show edit button

} else {

  // Show preview mode
}

// Check if in editing mode for specific composition

if (clientRendererModeUtil.isEditingCurrentComposition('my-composition-uid')) {
  // Enable editing features

}

// Adapt behavior based on environment

if (clientRendererModeUtil.isInsideVisualBuilderFrame()) {

  // Show enhanced editing capabilities
}