Get Started

pnpm add @siamf/email-builder
# or
npm i @siamf/email-builder
# or
yarn add @siamf/email-builder

"use client";

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

export default function Page() {
  return (
    <EmailBuilder
      token="demo_test_01HZZ3Q8WQ4ZK9K6YJH3V8G0P7"
      logo={{ url: "/logo.svg", width: 138, alt: "My App" }}
      primaryColor="#E11D48"
      onBack={() => window.location.assign("/my-page")}
      onSave={(data: DesignData) => {
        console.log("HTML:", data.html);
        console.log("JSON:", data.json);
        console.log("Image:", data.image);
        console.log("Name:", data.name);
      }}
      onUpload={async (file) => {
        const url = await uploadSomewhere(file);
        return url;
      }}
      height="100vh"
    />
  );
}

async function uploadSomewhere(file: File) {
  const fd = new FormData();
  fd.append("file", file);

  const res = await fetch("/api/upload", { method: "POST", body: fd });
  if (!res.ok) throw new Error("Upload failed");

  const { url } = await res.json();
  return url as string;
}

<EmailBuilder token="..." loadJSON={savedJson} />