Plugin Docs

Appearance

Extension ​

Main container class that bundles all extension components for the Stripo Email Editor.

typescript
class Extension

Description ​

The Extension class is the central container that holds all the components of your Stripo extension. It packages together blocks, controls, UI elements, external integrations, localization, and styles into a single deployable unit that can be loaded into the Stripo Email Editor.

Extensions are typically created using the ExtensionBuilder class which provides a fluent API for configuration. Once built, the extension is registered with the editor to make its functionality available to users.

Import ​

typescript
import { Extension } from '@stripoinc/ui-editor-extensions';

Constructor ​

The Extension class constructor accepts an options object with all extension components. However it's recommended to use ExtensionBuilder for creating extensions.

typescript
constructor(options: ExtensionOptions)

ExtensionOptions ​

typescript
interface ExtensionOptions {
  i18n: Record<string, Record<string, string>> | undefined;
  styles: string | undefined;
  previewStyles?: string;
  uiElements: ConstructorOfType<UIElement>[];
  generalPanelTabs: ConstructorOfType<GeneralPanelTab>[];
  modulesPanelTabs: ConstructorOfType<ModulesPanelTab>[];
  controls: ConstructorOfType<Control | BuiltInControl>[];
  contextActions: ConstructorOfType<ContextAction>[];
  blocks: ConstructorOfType<Block>[];
  uiElementTagRegistry: ConstructorOfType<UIElementTagRegistry> | undefined;
  settingsPanelRegistry: ConstructorOfType<SettingsPanelRegistry> | undefined;
  externalSmartElementsLibrary?: ConstructorOfType<ExternalSmartElementsLibrary>;
  externalImageLibrary?: ConstructorOfType<ExternalImageLibrary>;
  externalAiAssistant?: ConstructorOfType<ExternalAiAssistant>;
  externalDisplayConditionsLibrary?: ConstructorOfType<ExternalDisplayConditionsLibrary>;
  externalVideoLibrary?: ConstructorOfType<ExternalVideosLibrary>;
  blocksPanel?: ConstructorOfType<BlocksPanel>;
  iconsRegistry?: ConstructorOfType<IconsRegistry>;
  externalImageLibraryTab?: ConstructorOfType<ExternalImageLibraryTab>;
}

Methods ​

getI18n() ​

Returns the internationalization configuration for the extension.

typescript
public getI18n(): Record<string, Record<string, string>> | undefined

Returns ​

Record<string, Record<string, string>> | undefined - Localization strings organized by language code

getStyles() ​

Returns the CSS styles that will be injected into the editor.

typescript
public getStyles(): string | undefined

Returns ​

string | undefined - CSS styles as a string

getPreviewStyles() ​

Returns the CSS styles specific to the email preview mode.

typescript
public getPreviewStyles(): string | undefined

Returns ​

string | undefined - Preview-specific CSS styles

getUiElements() ​

Returns all custom UI elements registered with the extension.

typescript
public getUiElements(): ConstructorOfType<UIElement>[]

Returns ​

ConstructorOfType<UIElement>[] - Array of UI element constructors

getUiElementTagRegistry() ​

Returns the registry for custom UI element tags.

typescript
public getUiElementTagRegistry(): ConstructorOfType<UIElementTagRegistry> | undefined

Returns ​

ConstructorOfType<UIElementTagRegistry> | undefined - UI element tag registry constructor

getControls() ​

Returns all controls (custom and built-in) registered with the extension.

typescript
public getControls(): ConstructorOfType<Control | BuiltInControl>[]

Returns ​

ConstructorOfType<Control | BuiltInControl>[] - Array of control constructors

getSettingsPanelRegistry() ​

Returns the registry for custom settings panels.

typescript
public getSettingsPanelRegistry(): ConstructorOfType<SettingsPanelRegistry> | undefined

Returns ​

ConstructorOfType<SettingsPanelRegistry> | undefined - Settings panel registry constructor

getContextActions() ​

Returns all context actions registered with the extension.

typescript
public getContextActions(): ConstructorOfType<ContextAction>[]

Returns ​

ConstructorOfType<ContextAction>[] - Array of context action constructors

getBlocks() ​

Returns all custom blocks registered with the extension.

typescript
public getBlocks(): ConstructorOfType<Block>[]

Returns ​

ConstructorOfType<Block>[] - Array of block constructors

getGeneralPanelTabs() ​

Version Availability

This method is available starting from v3.5.0

Returns all custom general panel tabs registered with the extension.

typescript
public getGeneralPanelTabs(): ConstructorOfType<GeneralPanelTab>[]

Returns ​

ConstructorOfType<GeneralPanelTab>[] - Array of general panel tab constructors

getModulesPanelTabs() ​

Version Availability

This method is available starting from v3.7.0

Returns all custom modules panel tabs registered with the extension.

typescript
public getModulesPanelTabs(): ConstructorOfType<ModulesPanelTab>[]

Returns ​

ConstructorOfType<ModulesPanelTab>[] - Array of modules panel tab constructors

getExternalSmartElementsLibrary() ​

Returns the external smart elements library integration if configured.

typescript
public getExternalSmartElementsLibrary(): ConstructorOfType<ExternalSmartElementsLibrary> | undefined

Returns ​

ConstructorOfType<ExternalSmartElementsLibrary> | undefined - Smart elements library constructor

getExternalImageLibrary() ​

Returns the external image library integration if configured.

typescript
public getExternalImageLibrary(): ConstructorOfType<ExternalImageLibrary> | undefined

Returns ​

ConstructorOfType<ExternalImageLibrary> | undefined - Image library constructor

getExternalImageLibraryTab() ​

Version Availability

This method is available starting from v3.2.0

Returns the external image library tab if configured.

typescript
public getExternalImageLibraryTab(): ConstructorOfType<ExternalImageLibraryTab> | undefined

Returns ​

ConstructorOfType<ExternalImageLibraryTab> | undefined - Image library tab constructor

getExternalAiAssistant() ​

Returns the external AI assistant integration if configured.

typescript
public getExternalAiAssistant(): ConstructorOfType<ExternalAiAssistant> | undefined

Returns ​

ConstructorOfType<ExternalAiAssistant> | undefined - AI assistant constructor

getExternalDisplayConditionsLibrary() ​

Returns the external display conditions library if configured.

typescript
public getExternalDisplayConditionsLibrary(): ConstructorOfType<ExternalDisplayConditionsLibrary> | undefined

Returns ​

ConstructorOfType<ExternalDisplayConditionsLibrary> | undefined - Display conditions library constructor

getExternalVideoLibrary() ​

Returns the external video library integration if configured.

typescript
public getExternalVideoLibrary(): ConstructorOfType<ExternalVideosLibrary> | undefined

Returns ​

ConstructorOfType<ExternalVideosLibrary> | undefined - Video library constructor

getBlocksPanel() ​

Returns the custom blocks panel configuration if provided.

typescript
public getBlocksPanel(): ConstructorOfType<BlocksPanel> | undefined

Returns ​

ConstructorOfType<BlocksPanel> | undefined - Blocks panel constructor

getIconsRegistry() ​

Returns the custom icons registry if configured.

typescript
public getIconsRegistry(): ConstructorOfType<IconsRegistry> | undefined

Returns ​

ConstructorOfType<IconsRegistry> | undefined - Icons registry constructor

Usage Notes ​

  • Allows registration of custom SVG icons for use in controls and UI elements
  • Icons can be referenced by key throughout the extension
  • Useful for maintaining consistent iconography across custom components

Usage Example ​

While you can instantiate Extension directly, it's recommended to use ExtensionBuilder:

typescript
import { ExtensionBuilder } from '@stripoinc/ui-editor-extensions';
import { MyCustomBlock } from './blocks/MyCustomBlock';
import { MyCustomControl } from './controls/MyCustomControl';

const extension = new ExtensionBuilder()
  .addBlock(MyCustomBlock)
  .addControl(MyCustomControl)
  .withLocalization({
    'en': {
      'my.block.title': 'My Custom Block'
    }
  })
  .addStyles(`
    .my-custom-control {
      padding: 20px;
      background: #f0f0f0;
    }
  `)
  .build();

© 2026 Stripо.email — Next Generation Email Editor.