TypeScript Errors

This page covers type-related build errors when using the Dragble SDK with TypeScript.

Using the SDK with TypeScript

The Dragble SDK is loaded via CDN, so you need to add type declarations for the global dragble object.

Adding type declarations

Create a type declaration file in your project:

src/dragble.d.ts

declare global {
  interface Window {
    dragble: DragbleSDK;
  }
}

interface DragbleConfig {
  containerId: string;
  editorKey?: string;
  editorMode?: "email" | "web";
  user?: { id: string; name: string; email: string };
  appearance?: { theme?: "light" | "dark"; accentColor?: string };
  mergeTags?: { customMergeTags?: Array<{ label: string; value: string }> };
  specialLinks?: Array<{ name: string; href: string; target?: string }>;
  customFonts?: Array<{ label: string; value: string; url: string }>;
  ai?: Record<string, unknown>;
  onReady?: () => void;
  onImageUpload?: (
    file: File,
    done: (result: { progress: number; url?: string }) => void,
  ) => void;
  onGenerateText?: (
    request: Record<string, unknown>,
    done: (result: Record<string, unknown>) => void,
  ) => void;
  onGenerateImage?: (
    request: Record<string, unknown>,
    done: (result: Record<string, unknown>) => void,
  ) => void;
}

interface DragbleEditorInstance {
  loadDesign(json: Record<string, unknown>): void;
  getDesign(): Record<string, unknown>;
  exportJson(callback: (json: Record<string, unknown>) => void): void;
  exportHtml(): Promise<{ html: string }>;
  exportImage(
    callback: (data: { url: string }) => void,
    options?: { timeout?: number },
  ): void;
  exportPdf(
    callback: (data: { url: string }) => void,
    options?: { timeout?: number },
  ): void;
  undo(): void;
  redo(): void;
  setAppearance(appearance: Record<string, unknown>): void;
  showPreview(mode?: "desktop" | "tablet" | "mobile"): void;
  hidePreview(): void;
  setViewMode(mode: "desktop" | "tablet" | "mobile"): void;
  setTheme(theme: "light" | "dark"): void;
  addEventListener(event: string, handler: Function): void;
  removeEventListener(event: string, handler: Function): void;
  destroy(): void;
}

interface DragbleSDK {
  createEditor(config: DragbleConfig): Promise<DragbleEditorInstance>;
  init(config: DragbleConfig): void;
  exportHtml(callback: (data: { html: string }) => void): void;
  saveDesign(callback: (design: Record<string, unknown>) => void): void;
  loadDesign(design: Record<string, unknown>): void;
  addEventListener(event: string, handler: Function): void;
  removeEventListener(event: string, handler: Function): void;
}

export {};

Strict null checks on editor methods

What you see:

error TS18047: 'editorRef.current' is possibly 'null'.

Why it happens: Your editor instance might be null when accessed before initialization.

Fix: Use optional chaining:

// Correct
editorRef.current?.exportHtml().then((data) => {
  /* ... */
});

// Also correct
if (editorRef.current) {
  editorRef.current.loadDesign(design);
}

---

Quick checklist

Check	How to verify
Types declared	declare const dragble: DragbleSDK; in your code
tsconfig.json includes declaration file	"include": ["src/**/*"] covers the .d.ts file
Optional chaining on editor methods	editor?.exportHtml()
Container element exists	document.getElementById(containerId) is not null