Svelte E-mail

1

Install Svelte email components

Install the required Svelte email components.

  npm i svelte-email

2

Create email templates folder

Create an emails folder in the src/lib directory of your Svelte app.

3

Write your email

Create a new sample-email.svelte file for your email template.

<script lang="ts">
    import { Button, Container, Head, Hr, Html, Img, Preview, Section, Text } from 'svelte-email';

    export let firstName = 'John';

    const fontFamily =
        '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';

    const main = {
        backgroundColor: '#ffffff'
    };

    const container = {
        margin: '0 auto',
        padding: '20px 0 48px'
    };

    const logo = {
        margin: '0 auto'
    };

    const paragraph = {
        fontFamily,
        fontSize: '16px',
        lineHeight: '26px'
    };

    const btnContainer = {
        textAlign: 'center' as const
    };

    const button = {
        fontFamily,
        backgroundColor: '#5F51E8',
        borderRadius: '3px',
        color: '#fff',
        fontSize: '16px',
        textDecoration: 'none',
        textAlign: 'center' as const,
        display: 'block'
    };

    const hr = {
        borderColor: '#cccccc',
        margin: '20px 0'
    };

    const footer = {
        fontFamily,
        color: '#8898aa',
        fontSize: '12px'
    };
</script>

<Html lang="en">
    <Head />
    <Preview preview="Welcome to svelte-email" />
    <Section style={main}>
        <Container style={container}>
            <Img
                src="https://svelte.dev/svelte-logo-horizontal.svg"
                alt="Svelte logo"
                style={logo}
                width="200"
                height="50"
            />
            <Text style={paragraph}>{firstName}, welcome to svelte-email</Text>
            <Text style={paragraph}>A Svelte component library for building responsive emails</Text>
            <Section style={btnContainer}>
                <Button pX={12} pY={12} style={button} href="https://github.com/carstenlebek/svelte-email">
                    View on GitHub
                </Button>
            </Section>
            <Text style={paragraph}>Happy coding!</Text>
            <Hr style={hr} />
            <Text style={footer}>Carsten Lebek</Text>
        </Container>
    </Section>
</Html>

4

Write your workflow

Define your Workflow using the above template

import WelcomeEmail from '$lib/emails/sample-email.svelte';
import { render } from 'svelte-email';
import { workflow } from '@novu/framework';

workflow('new-signup', async ({ step, payload }) => {
    await step.email(
        'send-email',
        async (inputs) => {
            const html = render({
                template: WelcomeEmail,
                props: {
                    firstName: 'John',
                },
            });
            return {
                subject: `Welcome to Svelte E-mail`,
                body: html,
            }
        });
    }
);

Getting Started

Concepts

Steps

SDK

Deployment

For Non-Developers

Integrations

Recipes

Svelte E-mail