@lacspace/email-templates 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +105 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
|
|
3
|
+
# @lacspace/email-templates
|
|
4
|
+
|
|
5
|
+
**Compose bulletproof, responsive HTML emails from simple blocks — no more `<table>` soup.**
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/@lacspace/email-templates)
|
|
8
|
+
[](https://packagephobia.com/result?p=@lacspace/email-templates)
|
|
9
|
+
[](https://bundlephobia.com/package/@lacspace/email-templates)
|
|
10
|
+
[](https://www.npmjs.com/package/@lacspace/email-templates)
|
|
11
|
+
[](https://github.com/lacspace/npm-packages/blob/main/LICENSE)
|
|
12
|
+
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
> Components return email-client-safe HTML with inline styles; `render()` wraps them in a responsive, dark-mode-aware layout that survives Outlook. Includes ready-made **OTP / welcome / alert / invoice** templates. A tiny, dependency-free alternative to MJML.
|
|
16
|
+
|
|
17
|
+
- 🧱 Blocks: `heading` · `text` · `button` (bulletproof) · `code` (OTP) · `divider` · `image` · `list` · `keyValue`
|
|
18
|
+
- 📱 Responsive `render()` + `@media (prefers-color-scheme: dark)`
|
|
19
|
+
- 🎨 Themeable (brand color, fonts, radius) · logo/brand header · preheader text
|
|
20
|
+
- 🛡️ Auto-escapes untrusted text
|
|
21
|
+
- ⚡ Zero dependencies · 🌍 isomorphic · 📦 ESM + CJS · fully typed
|
|
22
|
+
|
|
23
|
+
## Install
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm install @lacspace/email-templates # or pnpm add / yarn add / bun add
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Ready-made templates
|
|
30
|
+
|
|
31
|
+
```ts
|
|
32
|
+
import { otpEmail, welcomeEmail, alertEmail, invoiceEmail } from "@lacspace/email-templates";
|
|
33
|
+
|
|
34
|
+
const html = otpEmail({
|
|
35
|
+
code: "482913",
|
|
36
|
+
brandName: "Lacspace",
|
|
37
|
+
expiresMinutes: 10,
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
welcomeEmail({ name: "Aayush", ctaLabel: "Open dashboard", ctaHref: "https://one.lacspace.com" });
|
|
41
|
+
alertEmail({ title: "Server is back up", message: "api.lacspace.com recovered at 14:32." });
|
|
42
|
+
invoiceEmail({
|
|
43
|
+
heading: "Payment receipt",
|
|
44
|
+
rows: [["Plan", "Pro"], ["Period", "Aug 2026"]],
|
|
45
|
+
total: ["Total", "₹1,499.00"],
|
|
46
|
+
ctaHref: "https://one.lacspace.com/invoices/123",
|
|
47
|
+
});
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Compose your own
|
|
51
|
+
|
|
52
|
+
```ts
|
|
53
|
+
import { render, heading, text, button, divider } from "@lacspace/email-templates";
|
|
54
|
+
|
|
55
|
+
const html = render(
|
|
56
|
+
{ title: "Reset your password", preheader: "Link expires in 30 minutes", brandName: "Lacspace" },
|
|
57
|
+
[
|
|
58
|
+
heading("Reset your password"),
|
|
59
|
+
text("Click the button below to choose a new password."),
|
|
60
|
+
button("Reset password", "https://lacspace.com/reset?token=abc"),
|
|
61
|
+
divider(),
|
|
62
|
+
text("If you didn't request this, you can safely ignore this email.", { muted: true }),
|
|
63
|
+
],
|
|
64
|
+
);
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Theme it
|
|
68
|
+
|
|
69
|
+
```ts
|
|
70
|
+
render(
|
|
71
|
+
{ title: "Hi", theme: { brandColor: "#7c3aed", borderRadius: "16px" } },
|
|
72
|
+
[heading("On brand"), button("Go", "https://x.com", { theme: { brandColor: "#7c3aed" } })],
|
|
73
|
+
);
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## Send it
|
|
77
|
+
|
|
78
|
+
```ts
|
|
79
|
+
import { createMailer, presets } from "@lacspace/mailer";
|
|
80
|
+
const mail = createMailer(presets.hostinger({ user, pass }));
|
|
81
|
+
await mail.send({ to, subject: "Your code", html: otpEmail({ code: "482913" }) });
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
## Blocks
|
|
85
|
+
|
|
86
|
+
| Block | Renders |
|
|
87
|
+
| --- | --- |
|
|
88
|
+
| `heading(text, { level })` | h1/h2/h3 |
|
|
89
|
+
| `text(content, { muted })` | paragraph |
|
|
90
|
+
| `button(label, href)` | bulletproof table CTA |
|
|
91
|
+
| `code(value)` | large letter-spaced code (OTP) |
|
|
92
|
+
| `keyValue(rows)` | 2-column table (receipts) |
|
|
93
|
+
| `list(items)` · `divider()` · `spacer(h)` · `image(src)` | misc |
|
|
94
|
+
| `render(opts, blocks)` | full responsive document |
|
|
95
|
+
|
|
96
|
+
## The Lacspace MailKit
|
|
97
|
+
|
|
98
|
+
| Package | For |
|
|
99
|
+
| --- | --- |
|
|
100
|
+
| [`@lacspace/mailer`](https://www.npmjs.com/package/@lacspace/mailer) | Send email over SMTP |
|
|
101
|
+
| **`@lacspace/email-templates`** | Build responsive HTML emails (this package) |
|
|
102
|
+
| [`@lacspace/email-validate`](https://www.npmjs.com/package/@lacspace/email-validate) | Validate & normalize addresses |
|
|
103
|
+
| [`@lacspace/email-verify`](https://www.npmjs.com/package/@lacspace/email-verify) | MX + SMTP deliverability checks |
|
|
104
|
+
|
|
105
|
+
<div align="center"><sub>Built with care by <a href="https://lacspace.com">Lacspace</a> · MIT licensed · <a href="https://github.com/lacspace/npm-packages">source</a></sub></div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lacspace/email-templates",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Compose bulletproof, responsive, dark-mode-aware HTML emails from simple blocks — buttons, OTP codes, invoices — with ready-made OTP/welcome/alert/invoice templates. Zero-dependency, isomorphic.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|