Skip to main content

Layout Components

Below is a list of layout components available to help you compose your editor interface.

Row​

A component that arranges its child components in a horizontal row layout.

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    layout: {
      default: {
        type: 'column',
        style: { height: '100%' },
        children: [
          {
            type: 'row',
            className: 'custom-classname-row',
            style: { color: 'white', padding: 3, height: 30, gap: 10 },
            children: [
              { type: 'text', style: { backgroundColor: 'green' }, content: 'Text 1' },
              { type: 'text', style: { backgroundColor: 'green' }, content: 'Text 2' },
              'Text 3'
            ]
          },
          { type: 'canvas' },
          { type: 'row', children: 'Footer text' }
        ]
      },
    }
  }}
/>

You can easily customize the component, as with all layout components, by applying className and style properties.

Row properties​

Show properties
PropertyTypeDescription
type*
row

Type of the layout component.

alignItems
string

The alignment of inner components along the cross axis.

Example
"start" | "end" | "center" | "baseline" | "stretch"
as
string

The HTML tag to use for the layout component.

Example
"div"
children
Layout component

The children layout components.

Example
[
  {
    "type": "text",
    "content": "Hello, World!"
  }
]
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
full
boolean

If true, the component will take up the full available space.

Default
false
gap
number

The gap between inner components.

Example
10
grow
boolean

If true, the component will grow to fill available space.

Default
false
height
string, number

The height of the component.

Example
100
htmlAttrs
object

The HTML attributes for the component.

Example
{
  "data-test-id": "component-123"
}
id
string

The unique identifier for the component.

Example
"component-123"
justifyContent
string

The alignment of inner components along the main axis.

Example
"start" | "end" | "center" | "between" | "around" | "evenly"
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}
width
string, number

The width of the component.

Example
100

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioRow } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioRow />
</StudioEditor>

Column​

Similar to the row, the column component arranges its children in a vertical layout.

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          {
            type: 'column',
            style: { width: '200px' },
            children: ['Text 1', 'Text 2']
          },
          { type: 'canvas' },
          {
            type: 'column',
            style: { width: '200px' },
            children: 'Text 1'
          }
        ]
      },
    }
  }}
/>

Column properties​

Show properties
PropertyTypeDescription
type*
column

Type of the layout component.

alignItems
string

The alignment of inner components along the cross axis.

Example
"start" | "end" | "center" | "baseline" | "stretch"
as
string

The HTML tag to use for the layout component.

Example
"div"
children
Layout component

The children layout components.

Example
[
  {
    "type": "text",
    "content": "Hello, World!"
  }
]
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
full
boolean

If true, the component will take up the full available space.

Default
false
gap
number

The gap between inner components.

Example
10
grow
boolean

If true, the component will grow to fill available space.

Default
false
height
string, number

The height of the component.

Example
100
htmlAttrs
object

The HTML attributes for the component.

Example
{
  "data-test-id": "component-123"
}
id
string

The unique identifier for the component.

Example
"component-123"
justifyContent
string

The alignment of inner components along the main axis.

Example
"start" | "end" | "center" | "between" | "around" | "evenly"
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}
width
string, number

The width of the component.

Example
100

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioColumn } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioColumn />
</StudioEditor>

Text​

A basic text element that can be added to components accepting children. Text can be included either directly as a string or as an object { type: 'text', content: '...' }. For usage examples, see the configurations above.

Text properties​

Show properties
PropertyTypeDescription
type*
text

Type of the layout component.

content*
string

Content of the text.

Example
"Hello, World!"
as
string

The HTML tag to use for the layout component.

Example
"div"
children
Layout component

The children layout components.

Example
[
  {
    "type": "text",
    "content": "Hello, World!"
  }
]
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
htmlAttrs
object

The HTML attributes for the component.

Example
{
  "data-test-id": "component-123"
}
id
string

The unique identifier for the component.

Example
"component-123"
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}

Icon​

An icon component that renders one of the built-in Studio icons or a custom SVG path.

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          {
            type: 'row',
            style: { alignItems: 'center', gap: 10, padding: 10 },
            children: [
              { type: 'icon', icon: 'layers', size: '20px' },
              { type: 'text', content: 'Layers' },
              { type: 'icon', icon: '<svg viewBox="0 0 24 24"><path d="M12 3L4 9L12 15L20 9L12 3Z" /></svg>', size: 18 }
            ]
          },
          { type: 'canvas' }
        ]
      },
    }
  }}
/>

Icon properties​

Show properties
PropertyTypeDescription
type*
icon

Type of the layout component.

as
string

The HTML tag to use for the layout component.

Example
"div"
children
Layout component

The children layout components.

Example
[
  {
    "type": "text",
    "content": "Hello, World!"
  }
]
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
horizontal
boolean

Whether to flip the icon horizontally.

htmlAttrs
object

The HTML attributes for the component.

Example
{
  "data-test-id": "component-123"
}
icon
string

The icon to display. Can be an IconNames enum value or an SVG path string.

Example
"chevronDown"
id
string

The unique identifier for the component.

Example
"component-123"
rotate
number

Rotation angle in degrees.

Example
90
size
string, number

The size of the icon.

Example
"16px"
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}
vertical
boolean

Whether to flip the icon vertically.

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioIcon } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioIcon icon="layers" size="20px" />
</StudioEditor>

Tabs​

A component that organizes content into a tabbed layout, enabling users to switch between different sections.

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    project: {
      default: {
        pages: [{ name: 'Home', component: '<h1>Add dynamic tab by selecting the heading component</h1><div>Some content</div>'}]
      }
    },
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          { type: 'canvas' },
          {
            type: 'column',
            style: { width: 300 },
            children: {
              type: 'tabs',
              value: 'tab2', // default selected tab
              tabs: [ // tab id and label are required
                { id: 'tab1', label: 'Tab 1', children: ['Content Tab 1'] },
                { id: 'tab2', label: 'Tab 2', children: 'Content Tab 2' }
              ],
              editorEvents: { // Update tabs state based on editor events
                'component:selected': ({ editor, state, setState }) => {
                  const customTabId = 'tabHeading';
                  const initialTabs = state.tabs?.filter(tab => tab.id !== customTabId) || [];
    
                  if (editor.getSelected()?.get('type') === 'heading') {
                    setState({
                      value: customTabId,
                      tabs: [...initialTabs, { id: 'tabHeading', label: 'Heading', children: ['Selected heading'] }]
                    });
                  } else {
                    setState({ tabs: initialTabs });
                  }
                }
              }
            }
          }
        ]
      },
    
    }
  }}
/>

Each tab within the tabs property must include an id and label property. Additionally, the value property can be set to specify the default selected tab.

Tabs properties​

Show properties
PropertyTypeDescription
type*
tabs

Type of the layout component.

tabs*
array

Tabs configuration.

Example
[
  {
    "id": "tab1",
    "label": "Tab 1",
    "children": [
      "Content Tab 1"
    ]
  }
]
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
editorEvents
object

Update layout component state based on editor events.

Example
{ 'component:selected': ({ setState, editor }) => setState({ className: 'custom-cls-' + editor.getSelected().getId() }) }
id
string

The unique identifier for the component.

Example
"component-123"
onChange
function

The function to call when the field value changes.

Example
({ value, setState }) => setState({ value });
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}
value
string

Tab id value to select on initial render.

Example
"tab1"
variant
string

Variant of the tabs.

Example
"pills"

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioTabs } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioTabs
    tabs={[
      { id: 'tab1', label: 'Tab 1', children: <div>Content Tab 1</div> },
      { id: 'tab2', label: 'Tab 2', children: <div>Content Tab 2</div> }
    ]}
  />
</StudioEditor>

Button​

A button component that can be used to trigger actions.

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          {
            type: 'column',
            style: { width: 100, justifyContent: 'center', alignItems: 'center', gap: 5 },
            children: [
              {
                type: 'button',
                label: 'Button',
                variant: 'outline',
                onClick: () => alert('Button clicked')
              },
              {
                type: 'button',
                label: 'Button',
                icon: 'close',
                size: 's',
                tooltip: 'Button tooltip',
                style: { padding: 5, backgroundColor: 'red', color: 'white' },
                onClick: ({ editor }) => alert('Num of pages: ' + editor.Pages.getAll().length)
              },
              {
                type: 'button',
                icon: '<svg viewBox="0 0 24 24"><path d="M12 2C11.5 2 11 2.19 10.59 2.59L2.59 10.59C1.8 11.37 1.8 12.63 2.59 13.41L10.59 21.41C11.37 22.2 12.63 22.2 13.41 21.41L21.41 13.41C22.2 12.63 22.2 11.37 21.41 10.59L13.41 2.59C13 2.19 12.5 2 12 2M11 7H13V13H11V7M11 15H13V17H11V15Z" style="fill: currentcolor;"></path></svg>',
                variant: 'primary',
                onClick: () => alert('Icon only button')
              },
              {
                type: 'button',
                icon: 'check',
                active: true,
                onClick: ({ state, setState }) => {
                  const newActive = !state.active;
                  alert('Is to activate?: ' + newActive);
                  setState({ active: newActive });
                }
              }
            ]
          },
          { type: 'canvas' }
        ]
      },
    }
  }}
/>

The component accepts a label property for the button text, an icon that can be an SVG string or a default icon name and additional properties to customize the button layout (eg. variant, size).

Inside the onClick property, you have access to the GrapesJS editor instance, as well as the state and setState, which allow you to interact with the editor or modify the current button's state.

In the Layout Commands section, you'll find more examples of button usage for managing editor layouts.

Button properties​

Show properties
PropertyTypeDescription
type*
button

Type of the layout component.

active
boolean

Indicates if the button is active.

Default
false
as
string

The HTML tag to use for the layout component.

Example
"div"
buttonType
string

HTML button type attribute.

Example
"button" | "submit" | "reset"
children
Layout component

The children layout components.

Example
[
  {
    "type": "text",
    "content": "Hello, World!"
  }
]
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
classNameBtn
string

Class name for the inner button element.

Example
"btn-class"
disabled
boolean

Indicates whether the component is disabled.

Default
false
editorEvents
object

Events to be handled by the editor.

Example
{ 'component:add': ({ editor }) => { console.log('Component added'); } }
icon
string

Icon to be displayed in the button.

Example
"close"
id
string

The unique identifier for the component.

Example
"component-123"
label
string

Label for the button, can be a ReactNode or a function returning a ReactNode.

Example
"Button"
onClick
function

Click event handler for the button.

Example
({ event }) => { alert('Button clicked!'); }
size
string

Size of the button.

Example
"x2s" | "xs" | "s" | "m" | "lg"
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}
tooltip
string

Tooltip text for the button.

Example
"Click to submit"
variant
string

Variant of the button style.

Example
"primary" | "outline" | "shallow"

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioButton } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioButton />
</StudioEditor>

ButtonMenu​

A button component with a dropdown menu, useful for creating toolbar actions with options or custom popover content.

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          {
            type: 'column',
            style: { width: 200, justifyContent: 'center', alignItems: 'center', gap: 10 },
            children: [
              // ButtonMenu with options - label auto-generated from selected option
              {
                type: 'buttonMenu',
                size: 's',
                value: 'left',
                options: [
                  { id: 'left', icon: '<svg viewBox="0 0 24 24"><path d="M3,3H21V5H3V3M3,7H15V9H3V7M3,11H21V13H3V11M3,15H15V17H3V15M3,19H21V21H3V19Z" /></svg>' },
                  { id: 'center', icon: '<svg viewBox="0 0 24 24"><path d="M3,3H21V5H3V3M7,7H17V9H7V7M3,11H21V13H3V11M7,15H17V17H7V15M3,19H21V21H3V19Z" /></svg>' },
                  { id: 'right', icon: '<svg viewBox="0 0 24 24"><path d="M3,3H21V5H3V3M9,7H21V9H9V7M3,11H21V13H3V11M9,15H21V17H9V15M3,19H21V21H3V19Z" /></svg>' }
                ],
                onOptionSelect: ({ option, setState }) => {
                  setState({ value: option.id });
                  alert('Selected: ' + option.id);
                },
                onClick: ({ state }) => alert('Current value: ' + state.value)
              },
              // ButtonMenu with options using labels
              {
                type: 'buttonMenu',
                size: 's',
                value: 'h1',
                options: [
                  { id: 'h1', label: 'Heading 1' },
                  { id: 'h2', label: 'Heading 2' },
                  { id: 'h3', label: 'Heading 3' }
                ],
                onOptionSelect: ({ option, setState }) => {
                  setState({ value: option.id });
                }
              },
              // ButtonMenu with custom label function
              {
                type: 'buttonMenu',
                size: 's',
                value: '#ff0000',
                label: ({ state }) => ({
                  type: 'column',
                  style: { alignItems: 'center' },
                  children: [
                    { type: 'icon', icon: '<svg viewBox="0 0 24 24"><path d="M9.62,12L12,5.67L14.37,12M11,3L5.5,17H7.75L8.87,14H15.12L16.25,17H18.5L13,3H11Z" /></svg>', size: 16 },
                    { type: 'row', style: { width: 16, height: 2, backgroundColor: state.value || 'currentColor', borderRadius: 1 } }
                  ]
                }),
                children: ({ state, setState }) => ({
                  type: 'colorPicker',
                  value: state.value || '',
                  onChange: ({ value, setState: setStateColorPicker }) => {
                    setState({ value });
                    setStateColorPicker({ value });
                  }
                }),
                onClick: ({ state }) => alert('Apply color: ' + state.value)
              }
            ]
          },
          { type: 'canvas' }
        ]
      },
    }
  }}
/>

The buttonMenu component provides two ways to define the dropdown content:

  1. Using options: Define an array of options with id, label, and/or icon.

  2. Using children: For custom popover content, provide a function that returns any layout component configuration. This is useful for more complex interactions (eg. color picker).

The onClick callback is triggered when clicking the main button area (not the dropdown arrow), allowing you to apply the current value directly.

ButtonMenu properties​

Show properties
PropertyTypeDescription
type*
buttonMenu

Type of the layout component.

active
boolean

Indicates if the button is active.

Default
false
as
string

The HTML tag to use for the layout component.

Example
"div"
buttonType
string

HTML button type attribute.

Example
"button" | "submit" | "reset"
children
Layout component

Children layout to render inside the popover menu. This is a function that receives state and returns a layout configuration.

className
string

The CSS class name(s) for the component.

Example
"my-component-class"
classNameBtn
string

Class name for the inner button element.

Example
"btn-class"
disabled
boolean

Indicates whether the component is disabled.

Default
false
editorEvents
object

Events to be handled by the editor.

Example
{ 'component:add': ({ editor }) => { console.log('Component added'); } }
icon
string

Icon to be displayed in the button.

Example
"close"
iconMenu
string

Icon to display for the dropdown menu trigger.

Default
chevronDown
id
string

The unique identifier for the component.

Example
"component-123"
label
function

Label for the button. Can be a string or a function that receives state and returns label config.

Example
// Simple string
"Button"
// Function returning a layout component
(props) => ({ type: 'text', content: `Value: ${props.value}` })
onClick
function

Click event handler for the button.

Example
({ event }) => { alert('Button clicked!'); }
onClickMenu
function

Callback function triggered when the menu icon is clicked. If provided, the default behavior will be skipped.

onOptionChange
function

Callback function triggered when an option is selected (when using options).

options
array

Optional predefined options for the menu. When provided, spawns a popover with menu items.

size
string

Size of the button.

Example
"x2s" | "xs" | "s" | "m" | "lg"
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}
tooltip
string

Tooltip text for the button.

Example
"Click to submit"
value
string

Current value stored in the button menu state.

variant
string

Variant of the button style.

Example
"primary" | "outline" | "shallow"

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioButtonMenu } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioButtonMenu />
</StudioEditor>

Devices​

Displays the available devices that users can switch between in the editor canvas for responsive style editing. The component is connected to the GrapesJS Devices API.

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    layout: {
      default: {
        type: 'column',
        style: { height: '100%' },
        children: [
          {
            type: 'row',
            style: { justifyContent: 'center', alignItems: 'center', gap: 5 },
            children: [
              {
                type: 'button',
                label: 'Add Random Device',
                onClick: ({ editor }) => {
                  const width = `${Math.floor(Math.random() * (1000 - 500 + 1) + 500)}px`;
                  const name = `Random ${width}`;
                  editor.Devices.add({ id: `random-${width}`, name, width });
                  alert(`Created "${name}"`);
                }
              },
              { type: 'devices', style: { width: '100px' } }
            ]
          },
          { type: 'canvas' }
        ]
      },
    }
  }}
/>

Devices properties​

Show properties
PropertyTypeDescription
type*
devices

Type of the layout component.

as
string

The HTML tag to use for the layout component.

Example
"div"
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
id
string

The unique identifier for the component.

Example
"component-123"
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioDevices } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioDevices />
</StudioEditor>

PanelPages​

Displays the pages of the project. The component is connected to the GrapesJS Pages API and the Pages configuration.

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    project: {
      default: {
        pages: [{ name: 'Home', component: '<h1>Home page</h1>'}]
      }
    },
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          {
            type: 'column',
            children: {
              type: 'panelPages',
              style: { width: 300 },
              header: { label: 'My pages', collapsible: false }
            }
          },
          { type: 'canvas' }
        ]
      },
    }
  }}
/>

PanelPages properties​

Show properties
PropertyTypeDescription
type*
panelPages

Type of the layout component.

as
string

The HTML tag to use for the layout component.

Example
"div"
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
header
object

Header of the panel.

Example
{
  "label": "My label",
  "collapsible": false
}
htmlAttrs
object

The HTML attributes for the component.

Example
{
  "data-test-id": "component-123"
}
id
string

The unique identifier for the component.

Example
"component-123"
resizable
object

Resizable configuration of the panel.

Example
{
  "width": 100,
  "height": 300
}
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioPanelPages } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioPanelPages />
</StudioEditor>

PanelPageSettings​

Displays the Page Settings panel, allowing users to configure settings for individual pages.

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    project: {
      default: {
        pages: [{ name: 'Home', component: '<h1>Home page</h1>'}]
      }
    },
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          {
            type: 'column',
            style: { width: 300 },
            children: { type: 'panelPageSettings' }
          },
          { type: 'canvas' }
        ]
      },
    }
  }}
/>

PanelPageSettings properties​

Show properties
PropertyTypeDescription
type*
panelPageSettings

Type of the layout component.

as
string

The HTML tag to use for the layout component.

Example
"div"
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
header
object

Header of the panel.

Example
{
  "label": "My label",
  "collapsible": false
}
htmlAttrs
object

The HTML attributes for the component.

Example
{
  "data-test-id": "component-123"
}
id
string

The unique identifier for the component.

Example
"component-123"
page
Page

The page to display settings for.

Example
editor.Pages.getSelected();
resizable
object

Resizable configuration of the panel.

Example
{
  "width": 100,
  "height": 300
}
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioPanelPageSettings } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioPanelPageSettings />
</StudioEditor>

PanelLayers​

Displays the layers of the currently selected page. The component is connected to the GrapesJS Layers API. enabling users to manage and organize their design layers efficiently.

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    project: {
      default: {
        pages: [{ name: 'Home', component: '<h1>Home page</h1>'}]
      }
    },
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          {
            type: 'column',
            style: { width: 300 },
            children: {
              type: 'panelLayers',
              header: {
                label: 'Layers label',
                icon: '<svg viewBox="0 0 24 24"><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"/></svg>'
              }
            }
          },
          { type: 'canvas' }
        ]
      },
    }
  }}
/>

PanelLayers properties​

Show properties
PropertyTypeDescription
type*
panelLayers

Type of the layout component.

as
string

The HTML tag to use for the layout component.

Example
"div"
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
header
object

Header of the panel.

Example
{
  "label": "My label",
  "collapsible": false
}
htmlAttrs
object

The HTML attributes for the component.

Example
{
  "data-test-id": "component-123"
}
id
string

The unique identifier for the component.

Example
"component-123"
resizable
object

Resizable configuration of the panel.

Example
{
  "width": 100,
  "height": 300
}
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioPanelLayers } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioPanelLayers />
</StudioEditor>

PanelPagesLayers​

Displays a combined panel that includes both the PanelPages and PanelLayers. This component provides a comprehensive view for managing project pages and their respective layers in a unified interface.

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    project: {
      default: {
        pages: [{ name: 'Home', component: '<h1>Home page</h1>'}]
      }
    },
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          {
            type: 'column',
            children: {
              type: 'panelPagesLayers',
              resizable: { right: true, width: 300, height: '100%', minWidth: 200, maxWidth: 300 },
              panelPagesProps: { header: { label: 'My Pages' } },
              panelLayersProps: { header: { label: 'My Layers' } }
            }
          },
          { type: 'canvas' }
        ]
      },
    }
  }}
/>

PanelPagesLayers properties​

Show properties
PropertyTypeDescription
type*
panelPagesLayers

Type of the layout component.

as
string

The HTML tag to use for the layout component.

Example
"div"
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
header
object

Header of the panel.

Example
{
  "label": "My label",
  "collapsible": false
}
htmlAttrs
object

The HTML attributes for the component.

Example
{
  "data-test-id": "component-123"
}
id
string

The unique identifier for the component.

Example
"component-123"
panelLayersProps
PanelLayersProps

Properties for the panel layers.

Example
{
  "header": {
    "label": "My Layers"
  }
}
panelPagesProps
PanelPagesProps

Properties for the panel pages.

Example
{
  "header": {
    "label": "My Pages"
  }
}
resizable
object

Resizable configuration of the panel.

Example
{
  "width": 100,
  "height": 300
}
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioPanelPagesLayers } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioPanelPagesLayers />
</StudioEditor>

PanelBlocks​

Displays the blocks panel, which is connected to the GrapesJS Blocks API.

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          {
            type: 'column',
            style: { width: 300 },
            children: [
              {
                type: 'button',
                label: 'Add Random Block',
                style: { margin: '10px auto' },
                variant: 'outline',
                onClick: ({ editor }) => {
                  const id = Math.random().toString(36).substring(5);
                  const name = `Block ${id}`;
                  editor.Blocks.add(`block-${id}`, {
                    label: name,
                    category: 'Random',
                    media: '<svg viewBox="0 0 24 24"><path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" /></svg>',
                    content: `<div>HTML from ${name}</div>`
                  });
                  alert(`Created "${name}"`);
                }
              },
              {
                type: 'panelBlocks',
                header: { label: 'My blocks' }
              }
            ]
          },
          { type: 'canvas' }
        ]
      },
    }
  }}
/>

PanelBlocks properties​

Show properties
PropertyTypeDescription
type*
panelBlocks

Type of the layout component.

as
string

The HTML tag to use for the layout component.

Example
"div"
blocks
function

Filter blocks.

className
string

The CSS class name(s) for the component.

Example
"my-component-class"
header
object

Header of the panel.

Example
{
  "label": "My label",
  "collapsible": false
}
hideCategories
boolean

Whether to hide categories.

Default
false
htmlAttrs
object

The HTML attributes for the component.

Example
{
  "data-test-id": "component-123"
}
id
string

The unique identifier for the component.

Example
"component-123"
itemLayout
function

Custom layout for rendering single blocks.

Example
itemLayout: ({ block, attributes }) => ({
 type: 'column',
 children: [
   { type: 'custom', render: () => block.getMedia() },
   { type: 'text', content: block.getLabel() }
 ]
})
resizable
object

Resizable configuration of the panel.

Example
{
  "width": 100,
  "height": 300
}
search
boolean

Whether to show search.

Default
true
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}
symbols
boolean

Whether to show symbols.

Default
true
variant
compact

Variant of the blocks panel. compact - Show a list of blocks instead of a grid.

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioPanelBlocks } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioPanelBlocks />
</StudioEditor>

PanelGlobalStyles​

Displays Global Styles panel. The component is connected to the Global Styles configuration.

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    project: {
      default: {
        pages: [{ name: 'Home', component: '<h1>Home page</h1>'}]
      }
    },
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          {
            type: 'column',
            style: { width: 300 },
            children: [
              {
                type: 'panelGlobalStyles',
                header: { label: 'Global Styles' }
              }
            ]
          },
          { type: 'canvas' }
        ]
      },
    },
    globalStyles: {
      default: [
        {
          id: 'h1Color',
          property: 'color',
          field: 'color',
          defaultValue: 'red',
          selector: 'h1',
          label: 'H1 color'
        },
      ]
    }
  }}
/>

PanelGlobalStyles properties​

Show properties
PropertyTypeDescription
type*
panelGlobalStyles

Type of the layout component.

as
string

The HTML tag to use for the layout component.

Example
"div"
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
header
object

Header of the panel.

Example
{
  "label": "My label",
  "collapsible": false
}
htmlAttrs
object

The HTML attributes for the component.

Example
{
  "data-test-id": "component-123"
}
id
string

The unique identifier for the component.

Example
"component-123"
resizable
object

Resizable configuration of the panel.

Example
{
  "width": 100,
  "height": 300
}
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioPanelGlobalStyles } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioPanelGlobalStyles />
</StudioEditor>

PanelSelectors​

Displays component selectors, providing users with the ability to choose the styling target. The component is connected to the GrapesJS Selectors API.

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    project: {
      default: {
        pages: [{ name: 'Home', component: '<h1>Home page</h1>'}]
      }
    },
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          { type: 'canvas' },
          {
            type: 'column',
            style: { width: 300 },
            children: {
              type: 'panelSelectors',
              style: { padding: 5 }
            }
          }
        ]
      },
    }
  }}
/>

PanelSelectors properties​

Show properties
PropertyTypeDescription
type*
panelSelectors

Type of the layout component.

as
string

The HTML tag to use for the layout component.

Example
"div"
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
header
object

Header of the panel.

Example
{
  "label": "My label",
  "collapsible": false
}
htmlAttrs
object

The HTML attributes for the component.

Example
{
  "data-test-id": "component-123"
}
id
string

The unique identifier for the component.

Example
"component-123"
resizable
object

Resizable configuration of the panel.

Example
{
  "width": 100,
  "height": 300
}
stateSelector
boolean

Enable the state selector.

Default
false
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}
styleCatalog
boolean

Enable the style catalog.

Default
false

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioPanelSelectors } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioPanelSelectors />
</StudioEditor>

PanelStyles​

Displays the styles of the currently selected component, allowing users to easily view and edit styles directly within the editor. The component is connected to the GrapesJS Style Manager API.

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    project: {
      default: {
        pages: [{ name: 'Home', component: '<div>Select me</div>'}]
      }
    },
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          { type: 'canvas' },
          {
            type: 'column',
            style: { width: 300 },
            children: { type: 'panelStyles' }
          }
        ]
      },
    }
  }}
/>

PanelStyles properties​

Show properties
PropertyTypeDescription
type*
panelStyles

Type of the layout component.

as
string

The HTML tag to use for the layout component.

Example
"div"
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
header
object

Header of the panel.

Example
{
  "label": "My label",
  "collapsible": false
}
htmlAttrs
object

The HTML attributes for the component.

Example
{
  "data-test-id": "component-123"
}
id
string

The unique identifier for the component.

Example
"component-123"
resizable
object

Resizable configuration of the panel.

Example
{
  "width": 100,
  "height": 300
}
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioPanelStyles } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioPanelStyles />
</StudioEditor>

PanelProperties​

Displays the properties of the currently selected component. The component is connected to the GrapesJS Traits API.

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    project: {
      default: {
        pages: [{ name: 'Home', component: '<h1>Select me</h1>'}]
      }
    },
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          { type: 'canvas' },
          {
            type: 'column',
            style: { width: 300 },
            children: {
              type: 'panelProperties',
              style: { padding: 10 },
            }
          }
        ]
      },
    }
  }}
/>

PanelProperties properties​

Show properties
PropertyTypeDescription
type*
panelProperties

Type of the layout component.

as
string

The HTML tag to use for the layout component.

Example
"div"
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
header
object

Header of the panel.

Example
{
  "label": "My label",
  "collapsible": false
}
htmlAttrs
object

The HTML attributes for the component.

Example
{
  "data-test-id": "component-123"
}
id
string

The unique identifier for the component.

Example
"component-123"
resizable
object

Resizable configuration of the panel.

Example
{
  "width": 100,
  "height": 300
}
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioPanelProperties } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioPanelProperties />
</StudioEditor>

PanelSidebarTabs​

Displays combined tab views for PanelSelectors, PanelStyles and PanelProperties, allowing users to easily switch between different panel functionalities within the sidebar.

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    project: {
      default: {
        pages: [{ name: 'Home', component: '<h1>Select me</h1>'}]
      }
    },
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          { type: 'canvas' },
          {
            type: 'column',
            style: { width: 300 },
            children: {
              type: 'panelSidebarTabs'
            }
          }
        ]
      },
    }
  }}
/>

PanelSidebarTabs properties​

Show properties
PropertyTypeDescription
type*
panelSidebarTabs

Type of the layout component.

as
string

The HTML tag to use for the layout component.

Example
"div"
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
header
object

Header of the panel.

Example
{
  "label": "My label",
  "collapsible": false
}
hideSelectors
boolean

Hide selector manager section in the styles tab. Overrides app editor store value when defined.

Default
false
hideTabs
boolean

Hide tabs navigation. Overrides app editor store/design panel defaults when defined.

htmlAttrs
object

The HTML attributes for the component.

Example
{
  "data-test-id": "component-123"
}
id
string

The unique identifier for the component.

Example
"component-123"
propsInStyles
boolean

Move properties tab content into the styles tab. Overrides app editor store/design panel defaults when defined.

resizable
object

Resizable configuration of the panel.

Example
{
  "width": 100,
  "height": 300
}
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}
tabsProps
object

Additional props passed to the internal Tabs component. tabs, value, and onChange are controlled internally.

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioPanelSidebarTabs } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioPanelSidebarTabs />
</StudioEditor>

PanelAssets​

Displays project assets, providing users with access to various media and resources. The component is connected to the GrapesJS Assets API.

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    gjsOptions: {
      storageManager: false,
      assetManager: {
        assets: Array(20).fill(0).map((_, i) => `https://picsum.photos/seed/${i}/300/300`)
      }
    },
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          {
            type: 'column',
            style: { width: 400 },
            children: [
              {
                type: 'panelAssets',
                header: { label: 'My Assets' },
                content: {
                  itemsPerRow: 2,
                  header: { upload: false }
                },
                onSelect: ({ asset, editor }) => {
                  const root = editor.getWrapper();
                  let imgCmp = root.findFirstType('image');
                  if (!imgCmp) imgCmp = root.append({ type: 'image' }, { at: 0 })[0];
                  imgCmp.set({ src: asset.getSrc() });
                }
              }
            ]
          },
          { type: 'canvas' }
        ]
      },
    }
  }}
/>

PanelAssets properties​

Show properties
PropertyTypeDescription
type*
panelAssets

Type of the layout component.

as
string

The HTML tag to use for the layout component.

Example
"div"
assets
array

A custom array of assets. Overrides any other configured onLoad or providers.

Example
assets: [
 {
   type: 'image',
   url: 'https://example.com/image.jpg',
 }
]
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
close
function

Define how to close your AssetManager. For the main AssetManager, it closes the dialog.

Example
() => AssetManager.close()
content
object

Content configuration for the AssetManager.

Example
{
 itemsPerRow: 4,
 header: {
  search: true,
},
header
object

Header of the panel.

Example
{
  "label": "My label",
  "collapsible": false
}
htmlAttrs
object

The HTML attributes for the component.

Example
{
  "data-test-id": "component-123"
}
id
string

The unique identifier for the component.

Example
"component-123"
onSelect
function

Callback when an asset is selected.

Example
onSelect: ({ asset, editor }) => {
   editor.AssetManager.add(asset);
}
optionalProvider
boolean

When true, adds { id: undefined, label: 'Project assets' } as an extra option for the asset provider filter at the beginning.

Default
true
optionalType
boolean

When true, adds { id: undefined, label: 'All' } as an extra option for the asset type filter at the beginning.

Default
false
projectAssetsOption
boolean

When true, adds { id: undefined, label: 'Project assets' } as an extra option for the asset provider filter at the beginning.

Default
true
providerId
string

Initial state of the asset provider filter.

Example
"unsplash"
providers
array

The ids of providers that will be available in this assets panel layout. These providers need to exist in {@link AssetsConfig.providers } first. Defaults to the all providers specified in {@link AssetsConfig } . Set to an empty array to hide the asset provider filter.

Example
[
  "unsplash"
]
resizable
object

Resizable configuration of the panel.

Example
{
  "width": 100,
  "height": 300
}
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}
typeId
string

Initial state of the asset type filter.

Default
image
types
array

Options that show up in the asset type filter. The selected type filters providers in the asset provider filter by assetProvider.type. This filter is required by default. To make it optional set assetManagerProps.optionalType = true. Set to an empty array to hide the asset type filter.

Default
[{ id: AssetType.image, label: 'Images'}]

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioPanelAssets } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioPanelAssets />
</StudioEditor>

PanelEditCode​

Displays editable code for the selected page. By default it renders the code fields plus an Update action below them.

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          {
            type: 'canvasSidebarTop',
            sidebarTop: {
              leftContainer: { buttons: [] },
              rightContainer: {
                buttons: [
                  {
                    id: 'openEditCode',
                    icon: 'codeBraces',
                    onClick: ({ editor }) => {
                      editor.runCommand('studio:layoutToggle', {
                        id: 'editCodeDialog',
                        header: false,
                        placer: { type: 'dialog', title: 'Edit code', size: 'l' },
                        layout: { type: 'panelEditCode' }
                      });
                    }
                  }
                ]
              }
            }
          }
        ]
      }
    },
    // ...
    
  }}
/>

PanelEditCode properties​

Show properties
PropertyTypeDescription
type*
panelEditCode

Type of the layout component.

as
string

The HTML tag to use for the layout component.

Example
"div"
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
htmlAttrs
object

The HTML attributes for the component.

Example
{
  "data-test-id": "component-123"
}
id
string

The unique identifier for the component.

Example
"component-123"
layoutAfter
function

Custom layout rendered after the code fields. When provided, the default footer is disabled. Receives editor, state, setState, and update.

Example
layoutAfter: ({ setState }) => ({
 type: 'button',
 label: 'Set custom code',
 onClick: () => setState({ code: '<div>Custom</div>' })
})
layoutBefore
function

Custom layout rendered before the code fields. Receives editor, state, setState, and update.

Example
layoutBefore: ({ state, update }) => ({
 type: 'button',
 label: 'Update',
 disabled: !state.hasChanges,
 onClick: () => update()
})
state
function

Override the initial editable state of the component.

Example
state: ({ editor }) => ({
 page: editor.Pages.getSelected()
})
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioPanelEditCode } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioPanelEditCode />
</StudioEditor>

PanelTemplates​

Displays a list of templates that users can select as a starting point for their project. For more details, refer to the Templates page.

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          {
            type: 'column',
            style: { width: 350 },
            children: [
              {
                type: 'panelTemplates',
                classNameAccordion: 'flex-grow h-full',
                classNameAccordionContent: 'flex-grow h-full',
                header: { label: 'Choose a template for your project' },
                content: { itemsPerRow: 1 },
                templates: [
                  {
                    id: 'template1',
                    name: 'Template 1',
                    data: {
                      pages: [
                        {
                          name: 'Home',
                          component: '<h1 class="title">Template 1</h1><style>.title { color: red; font-size: 10rem; text-align: center }</style>'
                        }
                      ]
                    }
                  },
                  {
                    id: 'template2',
                    name: 'Template 2',
                    data: {
                      pages: [
                        { component: '<h1 class="title">Template 2</h1><style>.title { color: blue; font-size: 10rem; text-align: center }</style>' }
                      ]
                    }
                  },
                  {
                    id: 'template3',
                    name: 'Template 3',
                    data: {
                      pages: [
                        { component: '<h1 class="title">Template 3</h1><style>.title { color: green; font-size: 10rem; text-align: center }</style>' }
                      ]
                    }
                  },
                  {
                    id: 'template4',
                    name: 'Template 4',
                    data: {
                      pages: [
                        { component: '<h1 class="title">Template 4</h1><style>.title { color: violet; font-size: 10rem; text-align: center }</style>' }
                      ]
                    }
                  },
                ]
              }
            ]
          },
          { type: 'canvas' }
        ]
      }
    }
    
  }}
/>

PanelTemplates properties​

Show properties
PropertyTypeDescription
type*
panelTemplates

Type of the layout component.

as
string

The HTML tag to use for the layout component.

Example
"div"
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
content
object

Extra props to customize this layout panel.

Example
{
  "itemsPerRow": 3
}
header

Header of the panel.

Example
{
  "label": "My label",
  "collapsible": false
}
htmlAttrs
object

The HTML attributes for the component.

Example
{
  "data-test-id": "component-123"
}
id
string

The unique identifier for the component.

Example
"component-123"
onSelect
function

Provide a custom handler for the select button.

Example
({ loadTemplate, template }) => {
  // loads the selected template to the current project
  loadTemplate(template);
}
resizable

Resizable configuration of the panel.

Example
{
  "width": 100,
  "height": 300
}
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}
templates
array

Custom array of templates to show in this panel.

Example
templates: [{
  id: 'template1',
  name: 'Template 1',
  data: {
    pages: [
      {
        name: 'Home',
        component: '<h1 class="title">Template 1</h1><style>.title { color: red; font-size: 10rem; text-align: center }</style>'
      }
    ]
  }
}]

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioPanelTemplates } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioPanelTemplates />
</StudioEditor>

Custom​

Provide a custom React component via component or any other custom element via render option.

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          {
            type: 'sidebarLeft',
            children: [
              { // React component
                type: 'custom',
                component: ({ editor }) => <button onClick={() => alert(editor.getHtml())}>Get HTML!!!</button>
              },
              { // HTML string
                type: 'custom',
                render: () => 'HTML as <b>string</b>'
              },
              { // HTML element
                type: 'custom',
                render: () => {
                  const el = document.createElement('div');
                  el.innerHTML = 'HTML as <b>element</b>';
                  return el;
                }
              },
              // Custom element, with cleanup
              {
                type: 'custom',
                render: ({ editor, addEl, removeEl }) => {
                  const buttonEl = document.createElement('button');
                  buttonEl.innerHTML = 'Button with <b>cleanup</b>';
                  buttonEl.style.cssText = 'border: 1px solid; padding: 5px;';
                  const onClick = () => alert('Button clicked: ' + editor?.getHtml());
                  buttonEl.addEventListener('click', onClick);
                  addEl(buttonEl);
                  return () => {
                    // Remember to cleanup to avoid memory leaks
                    buttonEl.removeEventListener('click', onClick);
                    removeEl(buttonEl);
                  };
                }
              }
            ]
          },
          { type: 'canvasSidebarTop' },
          { type: 'sidebarRight' }
        ]
      },
    }
  }}
/>

Custom properties​

Show properties
PropertyTypeDescription
type*
custom

Type of the layout component.

className
string

The CSS class name(s) for the component.

Example
"my-component-class"
component
React Component

Component to be rendered in the custom layout.

Example
({ editor }) => <button onClick={() => alert(editor.getHtml())}>Get HTML!!!</button>
id
string

The unique identifier for the component.

Example
"component-123"
noWrapper
boolean

Indicates if the custom layout should not be wrapped (only works for React Components as the custom render needs a wrapper)

Default
false
render
function

Function to render the custom layout.

Example
({ editor, addEl, removeEl }) => '<div>Custom layout</div>'
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}

WithEditor​

A utility component that exposes the editor instance to a render function, so you can render content based on the current editor state.

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    layout: {
      default: {
        type: 'column',
        style: { height: '100%' },
        children: [
          {
            type: 'sidebarTop',
            children: {
              type: 'withEditor',
              children: ({ editor }) => 'Render something once the editor is ready'
            }
          },
          { type: 'canvas' }
        ]
      },
    }
  }}
/>

WithEditor properties​

Show properties
PropertyTypeDescription
type*
withEditor

Type of the layout component.

children
Function

Function that receives the editor instance and returns layout components.

Example
({ editor }) => ({ type: 'text', content: editor.getHtml() })

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioWithEditor } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioWithEditor>
  {({ editor }) => <div>Render something once the editor is ready</div>}
  </StudioWithEditor>
</StudioEditor>

VirtualList​

A virtual list component that renders only the visible items, improving performance when dealing with a large number of items.

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          {
            type: 'virtualList',
            itemsPerRow: 4,
            style: { width: 700 },
            items: Array(100).fill(0).map((_, i) => ({ id: i, name: 'Item ' + i })),
            itemLayout: ({ item, editor }) => ({
              type: 'column',
              gap: 5,
              children: [
                {
                  type: 'custom',
                  render: () => `<img height="100" src="https://picsum.photos/seed/image-${item.id}/100/100"/>`
                },
                {
                  type: 'button',
                  label: `Add ${item.name}`,
                  variant: 'primary',
                  style: { width: '100%' },
                  onClick() {
                    editor.getWrapper().append(`<div style="padding: 10px"><img src="https://picsum.photos/seed/image-${item.id}/100/100"/><p>Item from the list: ${item.name}</p></div>`);
                  }
                }
              ]
            })
          },
          { type: 'canvas' }
        ]
      }
    }
  }}
/>

VirtualList properties​

Show properties
PropertyTypeDescription
type*
virtualList

Type of the layout component.

items*
array

The items to be displayed in the virtual list.

Example
[
  {
    "id": "1",
    "name": "Item 1"
  },
  {
    "id": "2",
    "name": "Item 2"
  }
]
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
footerLayout
function

The layout component rendered as footer in the virtual list.

htmlAttrs
object

The HTML attributes for the component.

Example
{
  "data-test-id": "component-123"
}
id
string

The unique identifier for the component.

Example
"component-123"
itemLayout
function

The layout component for the items in the virtual list.

Example
({ item, index, editor }) => ({ type: 'row', children: `${index + 1}. ${item.name}` })
itemsPerRow
number

The number of items per row.

Default
12
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioVirtualList } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioVirtualList />
</StudioEditor>

Studio includes sidebar components that can be toggled based on specific conditions, such as when the default preview command is triggered.

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          {
            type: 'sidebarLeft',
            style: { alignItems: 'center', justifyContent: 'center' },
            children: [
              {
                type: 'button',
                label: 'Toggle Right Sidebar',
                variant: 'outline',
                onClick: ({ editor }) => editor.runCommand('studio:sidebarRight:toggle')
              }
            ]
          },
          {
            type: 'column',
            style: { flexGrow: 1 },
            children: [
              {
                type: 'sidebarTop',
                style: { alignItems: 'center', justifyContent: 'center', gap: 10 },
                children: [
                  {
                    type: 'button',
                    icon: 'eye',
                    variant: 'outline',
                    onClick: ({ editor }) => editor.runCommand('core:preview')
                  },
                  {
                    type: 'button',
                    label: 'Toggle Bottom Sidebar',
                    variant: 'outline',
                    onClick: ({ editor }) => editor.runCommand('studio:sidebarBottom:toggle')
                  }
                ]
              },
              {
                type: 'row',
                style: { flexGrow: 1, overflow: 'hidden' },
                children: [
                  { type: 'canvas', grow: true },
                  {
                    type: 'sidebarRight',
                    style: { alignItems: 'center', justifyContent: 'center' },
                    children: [
                      {
                        type: 'button',
                        label: 'Toggle Left Sidebar',
                        variant: 'outline',
                        onClick: ({ editor }) => editor.runCommand('studio:sidebarLeft:toggle')
                      }
                    ]
                  }
                ]
              },
              {
                type: 'sidebarBottom',
                style: { alignItems: 'center', justifyContent: 'center' },
                children: [
                  {
                    type: 'button',
                    label: 'Toggle Top Sidebar',
                    variant: 'outline',
                    onClick: ({ editor }) => editor.runCommand('studio:sidebarTop:toggle')
                  }
                ]
              }
            ]
          }
        ]
      },
    }
  }}
/>

SidebarBottom properties​

Show properties
PropertyTypeDescription
type*
sidebarBottom

Type of the layout component.

as
string

The HTML tag to use for the layout component.

Example
"div"
children
Layout component

The children layout components.

Example
[
  {
    "type": "text",
    "content": "Hello, World!"
  }
]
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
htmlAttrs
object

The HTML attributes for the component.

Example
{
  "data-test-id": "component-123"
}
id
string

The unique identifier for the component.

Example
"component-123"
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioSidebarBottom } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioSidebarBottom />
</StudioEditor>

SidebarLeft properties​

Show properties
PropertyTypeDescription
type*
sidebarLeft

Type of the layout component.

as
string

The HTML tag to use for the layout component.

Example
"div"
children
Layout component

The children layout components.

Example
[
  {
    "type": "text",
    "content": "Hello, World!"
  }
]
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
id
string

The unique identifier for the component.

Example
"component-123"
resizable
boolean

Indicates whether the sidebar is resizable.

Default
true
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioSidebarLeft } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioSidebarLeft />
</StudioEditor>

SidebarRight properties​

Show properties
PropertyTypeDescription
type*
sidebarRight

Type of the layout component.

as
string

The HTML tag to use for the layout component.

Example
"div"
children
Layout component

The children layout components.

Example
[
  {
    "type": "text",
    "content": "Hello, World!"
  }
]
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
id
string

The unique identifier for the component.

Example
"component-123"
resizable
boolean

Indicates whether the sidebar is resizable.

Default
true
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioSidebarRight } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioSidebarRight />
</StudioEditor>

SidebarTop properties​

Show properties
PropertyTypeDescription
type*
sidebarTop

Type of the layout component.

as
string

The HTML tag to use for the layout component.

Example
"div"
children
Layout component

The children layout components.

Example
[
  {
    "type": "text",
    "content": "Hello, World!"
  }
]
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
devices
DevicesProps

The properties for the devices section of the top bar.

Example
{
  "style": {
    "width": 200
  }
}
height
number, string

The height of the top bar.

Example
50
id
string

The unique identifier for the component.

Example
"component-123"
leftContainer
object

The properties for the left container of the top bar.

Example
{
  "buttons": [
    {
      "type": "button",
      "icon": "menu",
      "onClick": "toggleSidebar"
    }
  ]
}
rightContainer
object

The properties for the right container of the top bar.

Example
{
  "buttons": [
    {
      "type": "button",
      "icon": "menu",
      "onClick": "toggleSidebar"
    }
  ]
}
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioSidebarTop } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioSidebarTop />
</StudioEditor>

Canvas components​

The layout configuration must include one of the following canvas components:

  • canvas: The basic canvas component
  • canvasSidebarTop - The canvas component combined with sidebarTop.
import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          {
            type: 'sidebarLeft',
            children: [
              { type: 'panelPagesLayers' }
            ]
          },
          {
            type: 'canvasSidebarTop',
          },
          {
            type: 'sidebarRight',
          }
        ]
      },
    }
  }}
/>

Canvas properties​

Show properties
PropertyTypeDescription
type*
canvas

Type of the layout component.

children
Layout component

Children components to render inside the canvas.

className
string

The CSS class name(s) for the component.

Example
"my-component-class"
grow
boolean

If true, the component will grow to fill available space.

Default
false
id
string

The unique identifier for the component.

Example
"component-123"
overlayProps
object

Additional props applied to the internal canvas overlay.

Example
{
  "className": "my-canvas-overlay",
  "style": {
    "backgroundColor": "rgba(0, 0, 0, 0.1)"
  }
}
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioCanvas } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioCanvas />
</StudioEditor>

CanvasSidebarTop properties​

Show properties
PropertyTypeDescription
type*
canvasSidebarTop

Type of the layout component.

as
string

The HTML tag to use for the layout component.

Example
"div"
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
htmlAttrs
object

The HTML attributes for the component.

Example
{
  "data-test-id": "component-123"
}
id
string

The unique identifier for the component.

Example
"component-123"
sidebarTop
SidebarTopProps

The sidebar top.

Example
{
  "style": {
    "alignItems": "center"
  }
}
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}

React component​

This component is also exported for React consumers. See React Layout Components for the complete setup.

import StudioEditor, { StudioCanvasSidebarTop } from '@grapesjs/studio-sdk/react';

<StudioEditor options={{...}} withComponents>
  <StudioCanvasSidebarTop />
</StudioEditor>

Form components​

The layout configuration could include one of the following form components:

  • InputField: The basic input field component.
  • SelectField - The select field component.
  • ButtonGroupField - The button group field component.
  • CodeField - The code field component.
  • ColorField - The color field component.
import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          {
            type: 'button',
            variant: 'primary',
            label: 'View Form',
            onClick: ({ editor }) => {
              editor.runCommand('studio:layoutToggle', {
                id: 'viewFormComponents',
                header: false,
                placer: { type: 'dialog', size: 'l', title: 'Form components' },
                layout: {
                  type: 'column',
                  as: 'form',
                  style: { height: 500, gap: 20, overflowY: 'auto' },
                  htmlAttrs: {
                    onSubmit: ev => {
                      ev.preventDefault();
                      const fd = new FormData(ev.currentTarget);
                      editor.addComponents({
                        type: 'text',
                        tagName: 'p',
                        content: JSON.stringify({
                          name: fd.get('name'),
                          companySize: fd.get('companySize'),
                          account: fd.get('account'),
                          accentColor: fd.get('accentColor'),
                          html: fd.get('html')
                        }, null, 2)
                      });
                      editor.runCommand('studio:layoutRemove', { id: 'viewFormComponents' });
                    }
                  },
                  children: [
                    {
                      type: 'inputField',
                      name: 'name',
                      label: 'Name',
                      placeholder: 'Insert your name',
                      required: true,
                      value: '',
                      onChange: ({ value, setState }) => setState({ value })
                    },
                    {
                      type: 'codeField',
                      language: 'html',
                      label: 'HTML',
                      name: 'html',
                      value: '<div>Hello</div>',
                      onChange: ({ value, setState }) => setState({ value }),
                      required: true
                    },
                    {
                      type: 'selectField',
                      name: 'companySize',
                      label: 'Company size',
                      emptyState: 'Select',
                      value: '',
                      required: true,
                      options: [
                        { id: '1', label: '1' },
                        { id: '2-10', label: '2-10' },
                        { id: '11-50', label: '11-50' },
                        { id: '51-200', label: '51-200' },
                        { id: '201-500', label: '201-500' },
                        { id: '500+', label: '500+' }
                      ],
                      onChange: ({ value, setState }) => setState({ value })
                    },
                    {
                      type: 'buttonGroupField',
                      id: 'account',
                      name: 'account',
                      label: 'Account',
                      value: '',
                      options: [
                        { id: 'Personal', label: 'Personal' },
                        { id: 'Professional', label: 'Professional' }
                      ],
                      onChange: ({ value, setState }) => setState({ value })
                    },
                    {
                      type: 'colorField',
                      name: 'accentColor',
                      label: 'Accent color',
                      value: 'rgba(255, 0, 0, 1)',
                      onChange: ({ value, setState }) => setState({ value })
                    },
                    {
                      type: 'row',
                      style: { gap: 10 },
                      children: {
                        type: 'button',
                        variant: 'primary',
                        label: 'Submit',
                        buttonType: 'submit'
                      }
                    }
                  ]
                }
              });
            }
          },
          { type: 'canvas' }
        ]
      },
    
    }
  }}
/>

InputField properties​

Show properties
PropertyTypeDescription
type*
inputField

Type of the layout component.

value*
string

The value of the field.

Example
"username"
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
disabled
boolean

Indicates whether the field is disabled.

Default
false
editorEvents
object

Update layout component state based on editor events.

Example
{ 'component:selected': ({ setState, editor }) => setState({ className: 'custom-cls-' + editor.getSelected().getId() }) }
id
string

The unique identifier for the component.

Example
"component-123"
inputType
string

The type of the field.

Example
"text"
label
string

The label for the field.

Example
"Username"
name
string

The name attribute for the field.

Example
"username"
onChange
function

The function to call when the field value changes.

Example
({ value, setState }) => setState({ value });
onInput
function

The function to call when the field value changes on input.

Example
({ value, setState }) => setState({ value });
placeholder
string

The placeholder text for the field.

Example
"Enter your username"
readOnly
boolean

Indicates whether the field is read-only.

Default
false
required
boolean

Indicates whether the field is required.

Default
false
row
boolean

Indicates if the field should be rendered in a row layout.

Default
false
size
string

The size of the field.

Example
"m" | "s"
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}

SelectField properties​

Show properties
PropertyTypeDescription
type*
selectField

Type of the layout component.

options*
array

The options for the field.

Example
[
  {
    "id": "1",
    "label": "Username 1",
    "content": "Username 1"
  },
  {
    "id": "2",
    "label": "Username 2",
    "content": "Username 2"
  }
]
value*
string

The value of the field.

Example
"username"
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
disabled
boolean

Indicates whether the field is disabled.

Default
false
editorEvents
object

Update layout component state based on editor events.

Example
{ 'component:selected': ({ setState, editor }) => setState({ className: 'custom-cls-' + editor.getSelected().getId() }) }
emptyState
string

The empty state for the field.

Example
"Select your username"
id
string

The unique identifier for the component.

Example
"component-123"
label
string

The label for the field.

Example
"Username"
name
string

The name attribute for the field.

Example
"username"
onChange
function

The function to call when the field value changes.

Example
({ value, setState }) => setState({ value });
required
boolean

Indicates whether the field is required.

Default
false
size
string

The size of the field.

Example
"l" | "m" | "s" | "xs" | "x2s"
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}

ButtonGroupField properties​

Show properties
PropertyTypeDescription
type*
buttonGroupField

Type of the layout component.

options*
array

The options for the field.

Example
[
  {
    "id": "1",
    "label": "Username 1",
    "title": "Username 1",
    "icon": "<svg>...</svg>"
  },
  {
    "id": "2",
    "label": "Username 2",
    "title": "Username 2",
    "icon": "<svg>...</svg>"
  }
]
value*
string

The value of the field.

Example
"username"
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
disabled
boolean

Indicates whether the field is disabled.

Default
false
editorEvents
object

Update layout component state based on editor events.

Example
{ 'component:selected': ({ setState, editor }) => setState({ className: 'custom-cls-' + editor.getSelected().getId() }) }
id
string

The unique identifier for the component.

Example
"component-123"
label
string

The label for the field.

Example
"Username"
name
string

The name attribute for the field.

Example
"username"
onChange
function

The function to call when the field value changes.

Example
({ value, setState }) => setState({ value });
required
boolean

Indicates whether the field is required.

Default
false
size
string

The size of the field.

Example
"m" | "s" | "xs"
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}

CodeField properties​

Show properties
PropertyTypeDescription
type*
codeField

Type of the layout component.

language*
string

Indicates the language of the code field.

Example
"json"
value*
string

The value of the field.

Example
"username"
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
disabled
boolean

Indicates whether the field is disabled.

Default
false
editorEvents
object

Update layout component state based on editor events.

Example
{ 'component:selected': ({ setState, editor }) => setState({ className: 'custom-cls-' + editor.getSelected().getId() }) }
id
string

The unique identifier for the component.

Example
"component-123"
label
string

The label for the field.

Example
"Username"
minHeight
string

Indicates the minimum height of the field.

Default
170px
monacoOptions
object

Pass additional options to the Monaco editor. Docs: https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html

Default
{}
name
string

The name attribute for the field.

Example
"username"
onChange
function

The function to call when the field value changes.

Example
({ value, setState }) => setState({ value });
readOnly
boolean

Indicates whether the field is read-only.

Default
false
required
boolean

Indicates whether the field is required.

Default
false
row
boolean

Indicates if the field should be rendered in a row layout.

Default
false
size
string

The size of the field.

Example
"m" | "s"
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}

ColorField properties​

Show properties
PropertyTypeDescription
type*
colorField

Type of the layout component.

value*
string

The value of the field.

Example
"username"
className
string

The CSS class name(s) for the component.

Example
"my-component-class"
colorPickerProps
object

Optional color picker props.

disabled
boolean

Indicates whether the field is disabled.

Default
false
editorEvents
object

Update layout component state based on editor events.

Example
{ 'component:selected': ({ setState, editor }) => setState({ className: 'custom-cls-' + editor.getSelected().getId() }) }
id
string

The unique identifier for the component.

Example
"component-123"
label
string

The label for the field.

Example
"Username"
name
string

The name attribute for the field.

Example
"username"
onChange
function

The function to call when the field value changes.

Example
({ value, setState }) => setState({ value });
placeholder
string

Placeholder text displayed in the input.

Example
"#ff0000"
preventSubmitOnEnter
boolean

Prevent parent form submit on Enter.

Default
false
required
boolean

Indicates whether the field is required.

Default
false
size

The size of the field.

Example
"m" | "s"
style
object

The inline styles for the component.

Example
{
  "color": "red",
  "fontSize": "14px"
}