🚀 svelte-emails 1.0.0 — New era of writing E-mails

[Refzlund]

🚀 svelte-emails 1.0.0

Just released v1.0.0 of svelte-emails — a library that lets you build HTML emails the way you wish you could: with Svelte components and Tailwind-like styling.

The Problem

HTML email is stuck in the 1990s. Tables for layout. Inline styles everywhere. Outlook breaking everything. We've all been there.

The Solution

<script lang="ts">
  import { Email, Div, Text, Button } from 'svelte-emails'
</script>

<Email preview="Welcome to our platform!">
  <Div p-8 bg-[#f3f4f6]>
    <Text.H1 content="Welcome, **[[first_name]]**! 👋" />
    <Text content="We're thrilled to have you on board." />
    <Button href="https://example.com" bg-[#3b82f6] text-[#fff] rounded px-6 py-3 content="Get Started →" />
  </Div>
</Email>

That's it. No <table> nightmares. No inline style="" spaghetti.

What makes it special

• Bulletproof output — Compiles to nested tables, VML (Outlook), and inline styles
• Magic emulation — margin, opacity, and rem units just work (we emulate them!)
• Grid workflow — <Div cols> and <Div rows> instead of table hell
• Responsive — Just add responsive, mobile-only, or desktop-only
• Extended markdown — Bold, italic, links, lists, checkboxes in content props
• Placeholders — [[variable]] syntax for runtime personalization

The Studio

Run bunx svelte-emails and get:

• 🔥 Hot reload
• 📱 Resizable preview
• 🛠️ HTML/Text/Headers inspector
• 📚 Built-in documentation
• 📦 Static builds for sharing

Links

• 📚 Documentation (built with the library itself!)
• 📦 npm
• 🐙 GitHub

Would love to hear your feedback! 🧡