Vue Email Builder

This template should help get you started developing with Vue 3 in Vite.

Plugin Stripo Email

This plugin allows you to integrate Stripo's email design capabilities into your Vue application. Plugin Docs

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

bun install

Compile and Hot-Reload for Development

bun dev

Type-Check, Compile and Minify for Production

bun run build

Example Usage

Initialization Settings

import { StripoEmailBuilder } from "rev-email-builder";
<StripoEmailBuilder
  pluginId="PLUGIN_KEY"
  secretKey="SECRET_KEY"
  :metadata="{
    emailId: '',
    userId: '',
    username: '',
    avatarUrl: '',
    email: ''
  }"
  :config="" // If you want a custom config, please see the https://plugin.stripo.email/editor-configuration/initialization-settings or scroll below, look for the config type
  css='' // Add your created CSS here
  html='' // Add your created HTML here
  @get-template-data="(data) => console.log(data)"
  @event="(event) => console.log(event)"
  @dataChanged="() => console.log('data change')"
/>

or

import StripoEmailBuilder from "rev-email-builder";

app.use(StripoEmailBuilder);

List of Events

defineEmits<{
  (e: "templateLoaded"): void;
  (e: "notificationError", message: string, id: string, params: unknown): void;
  (e: "notificationSuccess", message: string, id: string, params: unknown): void;
  (e: "notificationInfo", message: string, id: string, params: unknown): void;
  (e: "notificationWarn", message: string, id: string, params: unknown): void;
  (e: "notificationLoader", message: string, id: string, params: unknown): void;
  (e: "notificationHide", id: string): void;
  (e: "event", type: string, params: unknown): void;
  (e: "dataChanged"): void;
  (
    e: "userListChange",
    userList: { name: string; avatar: string; color: string; isCurrentUser: boolean }[]
  ): void;
  (e: "saveError", error: Error): void;
  (e: "save"): void;
  (
    e: "getTemplateData",
    data: {
      html: string;
      css: string;
      width: number;
      height: number;
      utmParams: UtmParameter;
      syncModulesIds: number[];
    }
  ): void;
  (e: "saveStarted"): void;
  (e: "saveCompleted", error?: Error): void;
  (e: "versionHistoryVisibilityChanged", value: boolean): void;
  (e: "historyStateChanged", value: HistoryState): void;
  (
    e: "updateDisplayConditionsForViewOptions",
    value: { id: string; name: string; visibility?: boolean }[]
  ): void;
  (e: "viewOptionsReset", entity: unknown, entityId: string): void;
  (e: "settingsPanelBlockSorting", names: string[] | Record<string, unknown>[]): void;
  (e: "preheaderChanged", preHeader: string): void;
  (e: "rtlSet", value: boolean): void;
  (e: "titleChanged"): void;
  (e: "codeEditorVisibilityChanged", value: boolean): void;
  (
    e: "disabledBlockClicked",
    localizedTitle: string,
    type:
      | "BLOCK_IMAGE"
      | "BLOCK_TEXT"
      | "BLOCK_BUTTON"
      | "BLOCK_SPACER"
      | "BLOCK_VIDEO"
      | "BLOCK_SOCIAL"
      | "BLOCK_BANNER"
      | "BLOCK_TIMER"
      | "BLOCK_MENU"
      | "BLOCK_MENU_ITEM"
      | "BLOCK_HTML"
      | "BLOCK_AMP_CAROUSEL"
      | "BLOCK_AMP_ACCORDION"
      | "BLOCK_AMP_FORM"
  ): void;
  (e: "settingsPanelPositionChanged", value: "left" | "right"): void;
  (e: "versionHistoryReadAccessChanged", enable: boolean): void;
  (e: "editorVisualModeChanged", visualMode: "mobile" | "desktop"): void;
}>();

Slots

  <template 
    #controls="{ 
      isLoadedTemplate, 
      showHistory, 
      loadingSave, 
      undoButtonId, 
      enableUndo, 
      redoButtonId, 
      mobileViewButtonId, 
      desktopViewButtonId, 
      clickSave, 
      clickGetTemplateData, 
      clickUndo, 
      clickRedo, 
      clickHistoryMobileView, 
      clickHistoryDesktopView, 
      clickCodeEditor, 
      clickHistory
    }
  ">
  </template>

expose

  clickHistoryMobileView()
  clickHistoryDesktopView()
  clickUndo()
  clickRedo()
  clickViewHistory()
  isLoadedTemplate.value
  showHistory.value
  showEditor.value,
  loadingSave.value

Example Actions Api, Email Metadata API, Version History API, Code Editor API, UI API, View Options API, and Dev Tools API

Javascript API.

import { actionsApi, emailMetaDataApi, codeEditorApi, versionHistoryApi, uiApi, viewOptionsApi, devToolsApi } from "rev-email-builder"
actionsApi().setName("");
emailMetaDataApi().setTitle("")
codeEditorApi().getCodeEditorState()
versionHistoryApi().closeVersionHistory();
codeEditorApi().openCodeEditor();
uiApi().setSettingsPanelVisible(true);
viewOptionsApi().setViewOptions(options)
devToolsApi().dump()

Config type as props

type config = {
  containerId?: string;
  brandColorPalette?: StripoInitBrandColorPalette[];
  metadata: StripoInitMetadata;
  locale?: string;
  onTokenRefreshRequest: (callback: (token: string) => void) => void;
  name?: string;
  utm?: UtmParameter;
  forceRecreate?: boolean;
  ignoreClickOutsideSelectors?: string[]
  panelPosition?: string;
  notifications?: {
    info?: (message: string, id: string, params: unknown) => void;
    error?: (message: string, id: string, params: unknown) => void;
    success?: (message: string, id: string, params: unknown) => void;
    warn?: (message: string, id: string, params: unknown) => void;
    loader?: (message: string, id: string, params: unknown) => void;
    hide?: (id: string) => void;
  };
  textEditorAllowedPasteContent?: StripoInitTextEditorAllowedPasteContent;
  bankImagesDefaultSearchString?: string;
  codeEditor?: StripoInitCodeEditor;
  codeEditorButtonSelector?: string;
  mergeTags?: StripoInitMergeTag[];
  socialNetworks?: StripoInitSocialNetwork[];
  specialLinks?: StripoInitSpecialLink[];
  viewOptions?: StripoInitViewOption;
  editorFonts?: StripoInitEditorFonts;
  conditionsEnabled?: boolean;
  undoButtonSelector?: string;
  redoButtonSelector?: string;
  mobileViewButtonSelector?: string;
  desktopViewButtonSelector?: string;
  versionHistoryButtonSelector?: string;
  localePatch?: StripoInitLocalPatch;
  defaultMenuItems?: StripoInitDefaultMenuItem[];
  syncModulesEnabled?: boolean;
  disableAdaptDesign?: boolean;
  moveBlockAvailability?: boolean;
  enableNativeSpellChecker?: boolean;
  enableTextEmojis?: boolean;
  enableXSSSecurity?: boolean;
  allowedScriptSourceDomains?: string[];
  supportOutlookButtonsByDefault?: boolean;
  youtubeApiKey?: string;
  modulesDisabled?: boolean;
  selectBlockAfterDropFromSettingsPanel?: boolean;
  modulesExcludedCategories?: number[];
  messageSettingsEnabled?: boolean;
  previewIframeAttributes?: Record<string, unknown>;
  customViewStyles?: string;
  hideDeleteImageAction?: boolean;
  baseBlocks?: StripoInitBaseBlocks;
  shouldBeSavedToLibrary?: () => boolean;
  shouldHideImagePath?: (url: string) => boolean;
  onUpdateDisplayConditionsForViewOptions?: (displayConditions: { id: string, name: string, visibility?: boolean }[]) => void;
  onViewOptionsReset?: (entity: unknown, entityId: string) => void;
  onSettingsPanelBlockSorting?: (names: string[] | Record<string, unknown>[]) => void;
  onPreheaderChanged?: (preHeader: string) => void;
  onRtlSet?: (value: boolean) => void;
  onTemplateLoaded?: () => void;
  onTitleChanged?: () => void;
  onCodeEditorVisibilityChanged?: (isOpen: boolean) => void;
  onDisabledBlockClicked?: (
    localizedTitle: string,
    type: 'BLOCK_IMAGE' | 'BLOCK_TEXT' | 'BLOCK_BUTTON' | "BLOCK_SPACER" | 'BLOCK_VIDEO' | 'BLOCK_SOCIAL' | 'BLOCK_BANNER' | 'BLOCK_TIMER' | "BLOCK_MENU" | "BLOCK_MENU_ITEM" | "BLOCK_HTML" | "BLOCK_AMP_CAROUSEL" | "BLOCK_AMP_ACCORDION" | "BLOCK_AMP_FORM"
  ) => void;
  onSettingsPanelPositionChanged?: (position: "right" | "left") => void;
  onVersionHistoryVisibilityChanged?: (isOpen: boolean) => void;
  onVersionHistoryReadAccessChanged?: (enable: boolean) => void;
  onSaveStarted?: () => void;
  onSaveCompleted?: (error: Error | undefined) => void;
  onEditorVisualModeChanged?: (visualMode: 'mobile' | 'desktop') => void;
  onUserListChange?: (userList: { name: string; avatar: string; color: string; isCurrentUser: boolean }[]) => void;
  onEvent?: (
    type: "editor_view_mode_changed" | "modules_panel_opened" | "module_dropped" | "module_saved" | "module_updated" | "module_deleted" | "module_removed" | "structure_dropped" | "structure_deleted" | "structure_copied" | "block_added" | "block_dropped" | "block_copied" | "block_deleted" | "block_moved",
    params: unknown
  ) => void;
  onDataChanged?: () => void;
}



type StripoInitBrandColorPalette = {
  name?: string;
  value: string;
}

type StripoInitMetadata = {
  emailId: string;
  userId?: string;
  username?: string;
  avatarUrl?: string;
  email?: string;
}

interface UtmParameter  {
  utmSource: string;
  utmMedium: string,
  utmCampaign: string,
  utmContent: string,
  utmTerm: string,
  customUtms: Record<string, string>[]
}

type StripoInitTextEditorAllowedPasteContent = {
  tags: string[];
  attributes: string[];
}

type StripoInitCodeEditor = {
  isOpen: boolean;
  isDefaultCSSOpen: boolean;
  isCustomCSSOpen: boolean;
  containerHeight: number;
  defaultCSSPanelWidth: number;
  customCSSPanelWidth: number;
}

type StripoInitMergeTag = {
  category: string;
  entries: {
    label: string;
    value: string;
    hint?: string;
    hidden?: boolean;
  }[];
}

type StripoInitSocialNetwork = {
  name: string;
  href: string;
}

type StripoInitSpecialLink = {
  category: string;
  entries: {
    label: string;
    value: string;
    hidden?: boolean;
  }[]
}

type StripoInitViewOption = {
  showHiddenElements: boolean;
  mimeType: 'both' | 'html' | 'ampHtml'
  mergeTags: 'raw' | 'label' | 'value';
  displayConditions: {
    id: string;
    name: string;
    visibility: boolean;
  }[]
}

type StripoInitEditorFonts = {
  showDefaultStandardFonts: boolean;
  showDefaultNotStandardFonts: boolean;
  customFonts: {
    name: string;
    fontFamily: string;
    url: string;
  }[];
  favouriteFonts?: {
    label: string;
    name: string;
    fontFamily: string;
    url: string;
  }[];
}

type StripoInitLocalPatch = {
  [key: string]: {
    "settingsPanel.accordion.structures": string;
    "settingsPanel.block.timer": string;
  }
}

type StripoInitDefaultMenuItem = {
  name: string;
  href: string;
}

type StripoInitBaseBlocks = {
  ampAccordionEnabled?: boolean;
  ampCarouselEnabled?: boolean;
  ampFormControlsEnabled?: boolean;
  bannerEnabled?: boolean;
  buttonEnabled?: boolean;
  htmlEnabled?: boolean;
  imageEnabled?: boolean;
  menuEnabled?: boolean;
  socialNetEnabled?: boolean;
  spacerEnabled?: boolean;
  textEnabled?: boolean;
  timerEnabled?: boolean;
  videoEnabled?: boolean;
}