Skip to main content
Integrating Novu Framework with Svelte email for your Svelte application can be done in three steps. If you don’t have an app, you can clone our Svelte example.
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,
            }
        });
    }
);