Skip to main content

​
1. Create directory

Create a new folder called emailux-email-starter and initialize a new npm project: 
mkdir emailux-email-starter
cd emailux-email-starter
npm init

​
2. Install dependencies

Install the EmailUX Email package locally and a few components. 
npm install @emailux/components

​
3. Write an email template

Create a new folder called emails, create a file inside called my-email.tsx, and add the following code:
emails/email-template.tsx
import { Button, Html, Body, Head } from "@emailux/components";
import * as React from "react";

export default function EmailTemplate({ name }) {
  return (
    <Html>
      <Head></Head>
      <Body previewText='here are some details.'>
        <Text>Hello, {name}</Text>
        <Button href="https://example.com">Click here</Button>
      </Body>
    </Html>
  );
}

​
4. Use the template to convert and send email

parser.tsx
import EmailTemplate from 'emails/email-template';
import { getHtml } from "@emailux/components";

export default function hanlder(req, resp){
  try{
    // convert template to Html

    const name = 'John';
    const { html, error } = getHtml(<EmailTemplate name={name} />);
    if(!error){
      // handle error
    }

    // handle html
    // send email `sendEmail(html)` using your provider like sendGrid or EmailUX
    // ....
    

  } catch (error){

  }
}