Skip to main content

TypeScript Types

Key types exported from @pexelize/editor-types. Install the package for full IntelliSense:

npm install @pexelize/editor-types

DesignJson​

The serializable design document. This is what you save to your database and load back into the editor.

interface DesignJson {
  body: {
    id: string;
    rows: Row[];
    headers?: Row[];
    footers?: Row[];
    values: BodyValues;
  };
  counters?: Record<string, number>;
  schemaVersion: number;
  _meta?: DesignMeta;
}

BodyValues​

Body-level styling and layout values.

interface BodyValues {
  backgroundColor?: string;
  contentWidth?: string;            // e.g. '600px'
  contentAlignment?: 'center' | 'left';
  fontFamily?: string;
  fontSize?: string;
  textColor?: string;
  linkColor?: string;
  preheaderText?: string;
  padding?: string;                 // e.g. '20px 0'
  borderRadius?: string;
  _meta?: Record<string, any>;
}

EditorMode​

type EditorMode = 'email' | 'web';

ThemeMode​

type ThemeMode = 'light' | 'dark';

AccentColor​

type AccentColor = string; // CSS hex color, e.g. '#4f46e5'

ViewMode​

type ViewMode = 'desktop' | 'tablet' | 'mobile';

ExportHtmlData​

Returned by exportHtml().

interface ExportHtmlData {
  html: string;       // fully rendered responsive HTML
  design: DesignJson; // the design at export time
}

ExportImageData​

Returned by exportImage().

interface ExportImageData {
  url: string;     // data URL or blob URL of the image
  width: number;
  height: number;
}

interface ExportImageOptions {
  format?: 'png' | 'jpeg';
  quality?: number;       // 0–1, JPEG only
  scale?: number;         // pixel density multiplier (default: 1)
}

ExportPdfData​

Returned by exportPdf().

interface ExportPdfData {
  url: string;      // blob URL of the PDF
  pages: number;    // number of pages
}

interface ExportPdfOptions {
  format?: 'a4' | 'letter';
  orientation?: 'portrait' | 'landscape';
  margin?: number;  // margin in mm
}

PexelizeConfig​

Top-level configuration object. See Configuration for details on each property.

interface PexelizeConfig {
  user: UserConfig;
  locale?: string;
  translations?: Record<string, Record<string, string>>;
  textDirection?: 'ltr' | 'rtl';
  mergeTags?: MergeTag[];
  designTags?: Record<string, string>;
  specialLinks?: SpecialLink[];
  modules?: Module[];
  displayConditions?: DisplayCondition[];
  appearance?: AppearanceConfig;
  tools?: ToolsConfig;
  customTools?: CustomTool[];
  fonts?: FontDefinition[];
  bodyValues?: BodyValues;
  header?: DesignJson;
  footer?: DesignJson;
  editor?: EditorConfig;
  features?: FeaturesConfig;
  assetStorage?: AssetStorageConfig;
  ai?: AIConfig;
  callbacks?: PexelizeCallbacks;
}

ToolsConfig​

interface ToolsConfig {
  text?: ToolConfig;
  image?: ToolConfig;
  button?: ToolConfig;
  divider?: ToolConfig;
  spacer?: ToolConfig;
  social?: ToolConfig;
  video?: ToolConfig;
  html?: ToolConfig;
  heading?: ToolConfig;
  menu?: ToolConfig;
  timer?: ToolConfig;
}

interface ToolConfig {
  enabled?: boolean;
  locked?: boolean;
  properties?: Record<string, {
    enabled?: boolean;
    locked?: boolean;
    defaultValue?: any;
  }>;
}

AppearanceConfig​

interface AppearanceConfig {
  theme?: ThemeMode;
  accentColor?: AccentColor;
  layout?: 'full' | 'compact';
  panels?: PanelConfig;
  borderRadius?: 'none' | 'sm' | 'md' | 'lg';
}

AIConfig​

interface AIConfig {
  mode: 'pexelize' | 'external' | 'disabled';
  features?: {
    smartText?: boolean;
    smartHeading?: boolean;
    smartButton?: boolean;
    imageGeneration?: boolean;
    imageSearch?: boolean;
    altText?: boolean;
  };
  callbacks?: AICallbacks;
}

MergeTag​

interface MergeTag {
  name: string;          // display label
  value: string;         // tag syntax, e.g. '{{first_name}}'
  sample?: string;       // sample value for preview
  children?: MergeTag[]; // nested group
}

Module​

interface Module {
  id: string;
  name: string;
  design: DesignJson;
  thumbnail?: string;   // URL or base64
  category?: string;
}

FontDefinition​

interface FontDefinition {
  label: string;
  value: string;          // CSS font-family value
  url?: string;           // URL to @font-face CSS file
  weights?: number[];     // available weights, e.g. [400, 700]
}

Utility Types​

// Editor error object
interface EditorError {
  code: string;
  message: string;
  details?: Record<string, any>;
}

// Validation
interface ValidationResult {
  valid: boolean;
  errors: ValidationError[];
  warnings: ValidationWarning[];
}

interface ValidationError {
  elementId: string;
  field: string;
  message: string;
}

interface ValidationWarning {
  elementId: string;
  field: string;
  message: string;
}
tip

Import types directly — they are type-only exports and add zero bytes to your bundle:

import type { DesignJson, PexelizeConfig } from '@pexelize/editor-types';