Skip to main content

Studio SDK 1.2.1

  • Updated the latest GrapesJS 0.23.X and aligned typed command support, improving compatibility and editor behavior for custom SDK integrations.
  • Added a new useStudioEditorEvent React hook to subscribe to editor events.
import { useStudioEditorEvent } from '@grapesjs/studio-sdk/react';

function SomeComponent() {
  useStudioEditorEvent((on, editor) => [
    on('component:selected', ({ component }) => {
      console.log('Selected component:', component.getId());
      console.log('Current selection:', editor.getSelected()?.getId());
    })
  ]);

  return null;
}
  • Customize the page settings panel with StudioPanelPageSettings, so page settings can be embedded in custom SDK layouts.
import {
  StudioPanelPageSettings,
  StudioPageSettingsField
} from '@grapesjs/studio-sdk/react';

<StudioPanelPageSettings page={editor.Pages.getSelected()}>
  {({ fields, submit, state }) => (
    <>
      {fields.map(field => (
        <StudioPageSettingsField key={field.id} field={field} />
      ))}

      <button disabled={!state.isDirty} onClick={() => submit()}>
        {state.submitLabel}
      </button>
    </>
  )}
</StudioPanelPageSettings>
  • Extended StudioPanelAssets component to allow rendering custom asset components in SDK layouts.
import { StudioPanelAssets } from '@grapesjs/studio-sdk/react';

<StudioPanelAssets>
  {({ filteredAssetProps, onSelect, loadAssets, hasNextPage }) => (
    <>
      <button onClick={() => loadAssets({ clearExisting: true })}>Refresh assets</button>

      {filteredAssetProps.map(asset => (
        <button key={asset.id} onClick={() => onSelect(asset)}>
          {asset.name || asset.src}
        </button>
      ))}
    </>
  )}
</StudioPanelAssets>
  • Extended more core provider-backed UI pieces more composable, including StudioDevices, StudioPanelBlocks, StudioPanelPages, StudioPanelLayers, StudioPanelProperties, StudioPanelSelectors, StudioPanelGlobalStyles, and StudioPanelStyles.
  • Added more stable class hooks across toast, page, and layer UI to make SDK-driven theming and CSS overrides easier.
  • Expanded the @grapesjs/studio-sdk export map to expose bundled assets and dist subpath exports through supported package entry points.
  • Fixed some locking issues in email components like Navbar and Section
  • Fixed React 19 ref warnings
  • Fix imports of plugins in ESM environment