SDK Methods

Complete reference for all methods available on the Dragble editor instance. These methods are available across all framework wrappers and the vanilla JS SDK.

Design

Method	Signature	Return	Description
loadDesign	(design: DesignJson) => void	void	Replace the current design with the provided JSON.
loadBlank	(options?) => void	void	Load a blank (empty) design.
getDesign	() => DesignJson	DesignJson	Return the current design as JSON.
setBodyValues	(values: Partial<BodyValues>) => void	void	Update body-level values (background color, width, font family, etc.).
getBodyValues	() => BodyValues	BodyValues	Get current body-level values.
triggerSave	() => void	void	Trigger the save event (equivalent to Ctrl+S / Cmd+S).

Export

Method	Signature	Return	Description
exportHtml	(title?: string) => string	string	Export the design as responsive HTML.
exportJson	() => string	string	Export the design as a JSON string.
exportPlainText	() => string	string	Export the design as plain text (no HTML tags).
exportImage	(options?: ExportImageOptions) => Promise<ExportImageData>	Promise<ExportImageData>	Export the design as a PNG/JPEG image.
exportPdf	(options?: ExportPdfOptions) => Promise<ExportPdfData>	Promise<ExportPdfData>	Export the design as a PDF.
exportZip	(options?: ExportZipOptions) => Promise<ExportZipData>	Promise<ExportZipData>	Export the design as a ZIP file with images.

Merge Tags

Method	Signature	Return	Description
setMergeTags	(config: MergeTagConfig) => void	void	Replace the merge tags available in the editor.
getMergeTags	() => MergeTagsResult	MergeTagsResult	Get current merge tags (custom, default, combined).

Special Links

Method	Signature	Return	Description
setSpecialLinks	(links: SpecialLink[], excludeDefaults?: boolean) => void	void	Replace the special links available in the link picker.
getSpecialLinks	() => SpecialLink[]	SpecialLink[]	Get current special links.

Modules

Method	Signature	Return	Description
setModules	(modules: Module[]) => void	void	Replace all modules in the modules panel.
getModules	() => Module[]	Module[]	Get current modules.
addModule	(module: Module) => void	void	Add a single module.
removeModule	(moduleId: string) => void	void	Remove a module by ID.
updateModule	(payload: { moduleId: string; updates: Partial<Module> }) => void	void	Update an existing module.
getSyncedModulesInDesign	() => string[]	string[]	Get IDs of synced modules currently used in the design.
unlinkSyncedModule	(rowId: string) => void	void	Unlink a synced module from a row.

Fonts

Method	Signature	Return	Description
setFonts	(config: FontsConfig) => void	void	Set custom fonts configuration.
getFonts	() => FontsConfig	FontsConfig	Get current fonts configuration.

Display Conditions

Method	Signature	Return	Description
setDisplayConditions	(config: DisplayConditionsConfig) => void	void	Replace the display conditions available for rows.
getDisplayConditions	() => DisplayConditionsConfig	DisplayConditionsConfig	Get current display conditions configuration.

Configuration

Method	Signature	Return	Description
setLocale	(locale: string, translations?: Record<string, string>) => void	void	Change the editor UI language at runtime. Accepts 29 built-in locale codes. Optional translations object overrides specific keys.
setTextDirection	(dir: 'ltr' | 'rtl') => void	void	Change text direction at runtime.
getTextDirection	() => 'ltr' | 'rtl'	string	Get current text direction.
setEditorMode	(mode: EditorMode) => void	void	Switch between 'email', 'web', and 'popup' editor modes.
setEditorBehaviorConfig	(config: EditorBehaviorConfig) => void	void	Update editor behavior (minRows, maxRows, contentType, etc.).
setLanguage	(language: Language) => void	void	Set the active language for multi-language designs.
getLanguage	() => Language | null	Language | null	Get the active language.

Features

Method	Signature	Return	Description
setFeatures	(features: FeaturesConfig) => void	void	Update feature flags at runtime.
getFeatures	() => FeaturesConfig	FeaturesConfig	Get current feature flags.

Tools

Method	Signature	Return	Description
setToolsConfig	(config: ToolsConfig) => void	void	Show/hide or configure content tools at runtime.
registerCustomTool	(tool: CustomTool) => void	void	Register a custom tool at runtime.
unregisterCustomTool	(toolId: string) => void	void	Remove a previously registered custom tool.

Appearance

Method	Signature	Return	Description
setAppearance	(config: AppearanceConfig) => void	void	Update appearance at runtime (theme, accent color, panels, etc.).
setSidePanelConfig	(config: SidePanelConfig) => void	void	Update side panel configuration at runtime.

Branding

Method	Signature	Return	Description
setBrandingColors	(config: BrandingColorsConfig) => void	void	Replace brand color palette at runtime.
setLinkTypes	(types: LinkTypeDefinition[]) => void	void	Set custom link types.
registerColumns	(columns: RegisteredColumnLayout[]) => void	void	Register custom column layouts.

Preview

Method	Signature	Return	Description
showPreview	(device?: 'desktop' | 'tablet' | 'mobile') => void	void	Open the design preview modal. Optionally specify device view.
hidePreview	() => void	void	Close the design preview modal.

Undo / Redo

Method	Signature	Return	Description
undo	() => void	void	Undo the last action.
redo	() => void	void	Redo the last undone action.
isUndoRedoEnabled	() => boolean	boolean	Whether undo/redo is currently available.

Element Control

Method	Signature	Return	Description
selectElement	(target: { type: string; id: string }) => void	void	Programmatically select a content element.
highlightElement	(target: { type: string; id: string } | null) => void	void	Highlight an element (pass null to clear).
scrollToElement	(target: { type: string; id: string }) => void	void	Scroll the canvas to bring an element into view.
execCommand	(command: { action: string; target: { type: string; id: string } }) => void	void	Execute an element command (highlight, scroll, focus, select).

Validation & Audit

Method	Signature	Return	Description
setValidator	(source: string | null) => void	void	Set a global validator function (as a stringified function).
setToolValidator	(tool: string, source: string | null) => void	void	Set a tool-specific validator.
clearValidators	(tool?: string) => void	void	Clear validators (optionally for a specific tool).
runAudit	(options?: { includeHtml?: boolean }) => Promise<AuditResult>	Promise<AuditResult>	Run content quality audit and return results.

Asset Storage

Method	Signature	Return	Description
setAssetStorageMode	(mode: 'dragble' | 'external') => void	void	Switch between Dragble-managed and external storage at runtime.
getAssetStorageMode	() => 'dragble' | 'external'	string	Get current asset storage mode.

AI

Method	Signature	Return	Description
setAIConfig	(config: AIConfig | undefined) => void	void	Update AI configuration at runtime. Pass undefined to disable.
getAIConfig	() => AIConfig | undefined	AIConfig | undefined	Get current AI configuration.

Custom CSS / JS

Method	Signature	Return	Description
setCustomCSS	(css: string[]) => void	void	Load custom CSS files into the editor.
setCustomJS	(js: string[]) => void	void	Load custom JS files into the editor.

Collaboration

Method	Signature	Return	Description
addComment	(payload: { threadId: string; targetId: string; text: string; type?: string }) => void	void	Add a collaboration comment.
resolveThread	(payload: { threadId: string }) => void	void	Resolve a comment thread.

Lifecycle

Method	Signature	Return	Description
isReady	() => boolean	boolean	Whether the editor is fully initialized.
destroy	() => void	void	Destroy the editor and clean up resources.

info

All Promise-returning methods reject with an EditorError if the operation fails. Wrap calls in try/catch for proper error handling.

warning

Calling methods before isReady() returns true (or before the ready event fires) will throw an error. Always wait for initialization to complete.