Svelte Email

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.

Install Svelte email components

  npm install svelte-email

Create email templates folder

Create a new folder called emails in your src folder.

Write your email

Create a new file called test-email.svelte in your emails folder.

<script lang="ts">

    export let name: string;
</script>

<Html>
    <Head />
    <Preview>Welcome to Svelte Email</Preview>
    <Body>
        <Container>
            <h1>Welcome, {name}!</h1>
            <p>Thanks for trying Svelte Email. We're thrilled to have you on board.</p>
        </Container>
    </Body>
</Html>

Create a new file called test-email.ts in your emails folder.

export function renderEmail(name: string) {
    return render({
        template: TestEmail,
        props: {
            name,
        },
    });
}

Write your workflow

Define your workflow using the above template

export const testWorkflow = workflow('test-workflow', async ({ step, payload }) => {
    await step.email('send-email', async (controls) => {
        return {
            subject: controls.subject,
            body: renderEmail(payload.userName),
        };
    },
    {
        controlSchema: z.object({
            subject: z.string().default('A Successful Test on Novu from {{userName}}'),
        }),
    });
}, {
    payloadSchema: z.object({
        userName: z.string().default('John Doe'),
    }),
});

Remix & React Email

Vue Email

⌘I

Getting Started

Core Concepts

Channels

Content

Advanced Features

API Reference

Deployment

Svelte Email