@kleb/templating (0.2.0)

Published 2026-07-07 09:04:38 +02:00 by kleb

Setup this registry in your project .npmrc file:

@kleb:registry=

To install the package using npm, run the following command:

npm install @kleb/templating@0.2.0

or add it to the package.json file:

"@kleb/templating": "0.2.0"

For more information on the npm registry, see the documentation.

@kleb/templating

Email-focused React template rendering.

import { Body, Head, Html, Tailwind, Text } from "@react-email/components";
import { createEmailTailwindConfig, renderEmailTemplate } from "@kleb/templating";

const theme = createEmailTailwindConfig({
  colors: {
    background: "#ffffff",
    foreground: "#111827",
    primary: "#2563eb",
    primaryForeground: "#ffffff",
  },
});

const WelcomeEmail = ({ name }: { name: string }) => (
  <Html>
    <Tailwind config={theme}>
      <Head />
      <Body className="bg-background text-foreground">
        <Text>Hello {name}</Text>
      </Body>
    </Tailwind>
  </Html>
);

const rendered = await renderEmailTemplate(WelcomeEmail, { name: "Ada" });

Theme values should be resolved colors. Do not pass CSS variables directly to email templates. React Email's pixel-based Tailwind preset is included by default; pass { pixelBasedPreset: false } to disable it.

Use placeholder rendering for subjects, text bodies, or small snippets:

import { renderHtmlTemplateString, renderTemplateString } from "@kleb/templating";

const subject = renderTemplateString("Welcome, {{user.name}}", {
  user: { name: "Ada" },
});

const html = renderHtmlTemplateString("<p>Hello {{user.name}}</p>", {
  user: { name: "<Ada>" },
});

Missing placeholders throw by default. Pass { missing: "keep" } or { missing: "empty" } when that behavior is explicitly desired.

Use a registry for reusable email templates:

import { createEmailTemplateRegistry, defineEmailTemplate } from "@kleb/templating";

const registry = createEmailTemplateRegistry([
  defineEmailTemplate({
    id: "welcome",
    component: WelcomeEmail,
    subject: "Welcome {{name}}",
    preview: ({ name }) => `Hello ${name}`,
    sampleProps: { name: "Ada" },
  }),
]);

const rendered = await registry.render("welcome", { name: "Ada" });

render/get are prop-unchecked: Props is a caller-supplied type parameter with no link from a template id to its props type, and get's internal cast is not verified at runtime. Passing the wrong Props for a given id compiles and only fails (or silently misbehaves) at render time; use validateProps on the definition if you need a runtime guarantee.

Markdown content can be wrapped as an email template with createMarkdownEmailTemplate.

Use the config integration when email theme tokens should be loaded through @kleb/config:

import { kConfig } from "@kleb/config/server";
import { emailThemeConfig } from "@kleb/templating/config";

const loaded = kConfig("app.json").section("emailTheme", emailThemeConfig()).load();

Dependencies

ID	Version
@react-email/components	^1.0.12
@react-email/render	^2.0.10

Development dependencies

ID	Version
@types/react	19.2.17
@types/react-dom	19.2.3
react	19.2.7
react-dom	19.2.7

Peer dependencies

ID	Version
@kleb/config	^0.5.0
react	^18.0 \|\| ^19.0 \|\| ^19.0.0-rc
react-dom	^18.0 \|\| ^19.0 \|\| ^19.0.0-rc

Details

npm

2026-07-07 09:04:38 +02:00

UNLICENSED

5.3 KiB

Assets (1)

templating-0.2.0.tgz 5.3 KiB

Versions (4) View all

0.4.0

2026-07-20

0.3.0

2026-07-14

0.2.0

2026-07-07

0.1.1

2026-07-04

@kleb/templating (0.2.0)

Installation

About this package

@kleb/templating

Dependencies