solidjs-email by henrychea

SolidJS Email

Build emails with SolidJS components.
A port of react-email for the SolidJS ecosystem.

Note: This project is vibecoded. Expect rough edges, missing features, and the occasional existential crisis in the codebase.

Introduction

A collection of unstyled components for creating emails using SolidJS and TypeScript. Inspired by react-email, but for SolidJS.

Build responsive emails with Tailwind CSS support without fighting email client inconsistencies.

Installation

# Install the main package (recommended)
npm install @solidjs-email/main solid-js

# Or with pnpm
pnpm add @solidjs-email/main solid-js

# Or with yarn
yarn add @solidjs-email/main solid-js

Individual Packages

You can also install individual packages if you prefer:

npm install @solidjs-email/render @solidjs-email/button @solidjs-email/container solid-js

Quick Start

import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  render,
  Section,
  Tailwind,
  Text,
} from '@solidjs-email/main';

const WelcomeEmail = (props: { name: string }) => (
  <Html>
    <Head />
    <Tailwind>
      <Body class="bg-white font-sans">
        <Preview>Welcome to our platform!</Preview>
        <Container class="mx-auto max-w-[560px] px-4 py-8">
          <Heading class="text-2xl font-bold text-gray-900">
            Hello, {props.name}!
          </Heading>
          <Text class="text-gray-600">
            Welcome to our platform. We're excited to have you!
          </Text>
          <Section class="text-center my-8">
            <Button
              class="bg-blue-600 text-white px-6 py-3 rounded-md"
              href="https://example.com/get-started"
            >
              Get Started
            </Button>
          </Section>
        </Container>
      </Body>
    </Tailwind>
  </Html>
);

// Render to HTML string
const html = await render(() => <WelcomeEmail name="John" />);

Rendering Options

import { render } from '@solidjs-email/main';

// Basic render
const html = await render(() => <MyEmail />);

// Pretty print HTML
const prettyHtml = await render(() => <MyEmail />, { pretty: true });

// Render to plain text
const plainText = await render(() => <MyEmail />, { plainText: true });

// With Tailwind configuration
const htmlWithTailwind = await render(() => <MyEmail />, {
  tailwind: {
    config: { theme: { extend: {} } },
  },
});

Sending Emails

With Resend

import { Resend } from 'resend';
import { render } from 'solidjs-email';
import { WelcomeEmail } from './emails/welcome';

const resend = new Resend('re_123456789');

const html = await render(() => <WelcomeEmail name="John" />);

await resend.emails.send({
  from: 'hello@example.com',
  to: 'john@example.com',
  subject: 'Welcome!',
  html,
});

With Nodemailer

import nodemailer from 'nodemailer';
import { render } from 'solidjs-email';
import { WelcomeEmail } from './emails/welcome';

const transporter = nodemailer.createTransport({ /* config */ });

const html = await render(() => <WelcomeEmail name="John" />);

await transporter.sendMail({
  from: 'hello@example.com',
  to: 'john@example.com',
  subject: 'Welcome!',
  html,
});

Components

Component	Description	Package
`Html`	Root HTML wrapper	`@solidjs-email/html`
`Head`	Email head with meta tags	`@solidjs-email/head`
`Body`	Body with table layout	`@solidjs-email/body`
`Container`	Centered container	`@solidjs-email/container`
`Section`	Table section wrapper	`@solidjs-email/section`
`Row`	Table row	`@solidjs-email/row`
`Column`	Table column	`@solidjs-email/column`
`Button`	CTA button link	`@solidjs-email/button`
`Text`	Paragraph text	`@solidjs-email/text`
`Heading`	h1-h6 headings	`@solidjs-email/heading`
`Link`	Anchor link	`@solidjs-email/link`
`Img`	Image	`@solidjs-email/img`
`Hr`	Horizontal rule	`@solidjs-email/hr`
`Preview`	Preview text (hidden)	`@solidjs-email/preview`
`Font`	Custom web fonts	`@solidjs-email/font`
`Markdown`	Markdown to HTML	`@solidjs-email/markdown`
`CodeBlock`	Syntax highlighted code	`@solidjs-email/code-block`
`CodeInline`	Inline code snippet	`@solidjs-email/code-inline`
`Tailwind`	Tailwind CSS support	`@solidjs-email/tailwind`

Utility Packages

Package	Description
`render`	HTML rendering utilities
`@solidjs-email/main`	Main package (all components + render)
`components`	All components bundle

Tailwind CSS Support

The Tailwind component automatically converts Tailwind classes to inline styles for email compatibility:

import { Tailwind, Text } from '@solidjs-email/main';

<Tailwind>
  <Text class="text-lg font-bold text-blue-600">
    Styled with Tailwind!
  </Text>
</Tailwind>

Custom Fonts

import { Font, Head, Html } from '@solidjs-email/main';

<Html>
  <Head>
    <Font
      fontFamily="Roboto"
      fallbackFontFamily="Arial"
      webFont={{
        url: 'https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Me5Q.ttf',
        format: 'truetype',
      }}
    />
  </Head>
  {/* ... */}
</Html>

Markdown Support

import { Markdown } from '@solidjs-email/main';

<Markdown>
  # Hello World

  This is **bold** and this is *italic*.

  - List item 1
  - List item 2
</Markdown>

Code Blocks

import { CodeBlock, CodeInline } from '@solidjs-email/main';

// Syntax highlighted code block
<CodeBlock language="typescript" theme="dracula">
  {`const greeting = "Hello, World!";
console.log(greeting);`}
</CodeBlock>

// Inline code
<Text>
  Use <CodeInline>npm install @solidjs-email/main</CodeInline> to install.
</Text>

TypeScript

All packages include TypeScript definitions:

import type { 
  ButtonProps, 
  TextProps,
  ContainerProps 
} from '@solidjs-email/main';

Why SolidJS?

Fine-grained reactivity (not that it matters for static email rendering)
Smaller bundle size
No virtual DOM overhead
Because we can

License

MIT

--- slopscore: 2 spec: https://slopscore.org/spec ai_generated: entirely human_touch: light content_rating: everyone contains: [] category: [cli] status: works-on-my-machine slopbucket: [cli] # optional: pick a bucket or invent one ---

muse-code	1 · avg 2.0
v0	1 · avg 2.0
claude	55 · avg 1.0
claude-code	109 · avg 1.0
aider	1 · avg 1.0

listed slop	1161
in the trough	0
slopsmiths	14
votes	1739
comments	1

solidjs-email

I'm not calling your project slop! Geeze, it's a joke... Do you own this repo?

Disclosures, inferred by the Cap'm

The Cap'm's log