EmailDSL

A framework-agnostic TypeScript DSL for building email-safe HTML.

Features

- Email-safe: Framework generates tables and inline styles automatically.
- Themable: Global theme support with component overrides.
- Responsive: Fluid layouts that work on mobile (with stacking support).
- TypeScript: Full type safety for all primitives.
- Zero dependencies: Lightweight and fast.

Installation

$3

``bash
pnpm add emaildsl


or


npm install emaildsl
`

$3

For local development or to contribute, clone the repository:

`bash
git clone https://github.com/veri5ied/emaildsl.git
cd emaildsl
pnpm install
pnpm build
`

Usage

$3

`typescript
import { email, section, text, button } from "emaildsl";

const myEmail = email({
title: "Hello",
body: [
section([
text("Hello World"),
button("Click Me", { href: "https://example.com" }),
]),
],
});

const html = myEmail.render();
`

$3

`tsx
import { EmailPreview } from "emaildsl/react";
import { email, section, text } from "emaildsl";

const myEmail = email({
body: [section([text("Hello")])],
});

function App() {
return ;
}
`

$3

`vue



`

Primitives

$3

- section(children, options) - Creates a layout section (renders as table row)
- column(children, options) - Creates a column within a section (renders as table cell)

$3

- text(content, options) - Creates a text element with optional styling
- button(label, options) - Creates a clickable button with href
- image(src, options) - Creates an image element with alt text and dimensions
- divider(options) - Creates a horizontal divider line
- spacer(height) - Creates vertical spacing (accepts px or em)

API Reference

$3

`typescript
email({
title: string; // Email title (appears in