@arcevo/facet-emails

Framework-agnostic email template renderer for the Arcevo ecosystem.

• Zero runtime dependencies in the core. Render plain template trees ({ tag, props, children }) to email-safe HTML and plain text from any host: React, plain JS, a Node backend, even a JSON tree generated by another language.
• Optional React bridge for JSX ergonomics: EmailLayout, EmailButton, EmailText, and friends compile down to template trees.
• Dev preview server (@arcevo/facet-emails/server) with a template index and HTML/text previews.

Framework-agnostic (no React)

import { renderEmail, renderEmailText, emailLayout, emailButton, emailText } from "@arcevo/facet-emails";

const tree = emailLayout(
  { previewText: "Welcome", heading: "Hi!", brandName: "Acme" },
  emailText({ children: "Your account is ready." }),
  emailButton({ href: "https://acme.dev/dashboard", children: "Go to Dashboard" }),
);

const html = renderEmail(tree);       // email-safe HTML string
const text = renderEmailText(tree);   // plain-text version

React usage

import { renderEmailFromReact, EmailLayout, EmailButton, EmailText } from "@arcevo/facet-emails";

const html = renderEmailFromReact(
  <EmailLayout previewText="Welcome" heading="Hi!" brandName="Acme">
    <EmailText>Your account is ready.</EmailText>
    <EmailButton href="https://acme.dev/dashboard">Go to Dashboard</EmailButton>
  </EmailLayout>,
);

Brand tokens

renderEmail(tree, {
  brand: {
    primary: "#6366f1",
    background: "#f6f6f6",
    surface: "#ffffff",
    text: "#1f2937",
    muted: "#6b7280",
    brandName: "Acme",
  },
});

Dev preview server

import { startEmailPreviewServer } from "@arcevo/facet-emails/server";
import { emailLayout, emailButton } from "@arcevo/facet-emails";

startEmailPreviewServer({
  templates: {
    welcome: {
      title: "Welcome",
      tree: emailLayout(
        { previewText: "Welcome", heading: "Hi!" },
        emailButton({ href: "#", children: "Go" }),
      ),
    },
  },
  port: 3888,
});

Open http://127.0.0.1:3888 for the template index, /preview/welcome for a rendered preview with an HTML/text toggle.