API Reference

Import

import { EmailBuilder } from "@siamf/email-builder";

Types

export type DesignData = {
  html: string;
  json: JSON;
  image: string;
  name: string;
};

export type BuilderLogo = {
  url: string;
  width?: string | number | undefined;
  height?: string | number | undefined;
  alt?: string;
  className?: string;
};

Props

`token: string` (required)

Access token (subscription/license).

<EmailBuilder token="..." />

`logo?: BuilderLogo`

Brand logo displayed in the builder UI.

<EmailBuilder logo={{ url: "/logo.svg", width: 138, alt: "Brand" }} />

`onSave?: (data: DesignData) => void`

Called when user saves/exports.

<EmailBuilder onSave={(data) => console.log(data.html)} />

`onUpload?: (file: File) => Promise<string>`

Upload an asset and return a public URL.

<EmailBuilder onUpload={async (file) => {
  const url = await uploadSomewhere(file);
  return url;
}} />

`loadJSON?: JSON`

Load a previously saved design JSON.

<EmailBuilder loadJSON={savedJson} />

`showBtnLoading?: boolean`

Toggle button loading UI for internal actions.

`enableImgOnSave?: boolean`

If enabled, data.image is included in the save payload.

`onBack?: () => void`

Called when the user clicks the back action in the builder.

<EmailBuilder onBack={() => window.location.assign("/my-page")} />

`primaryColor?: string`

Overrides the builder primary theme color.

<EmailBuilder primaryColor="#2563EB" />

Layout

height?: string | number (default "100vh")
className?: string
style?: React.CSSProperties

API Reference

On this page