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 install svelte-email
2

Create email templates folder

Create a new folder called emails in your src folder.
3

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,
        },
    });
}
4

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'),
    }),
});