JSX Email Builder is a tool for building HTML emails using JSX. It does this by compiling JSX to HTML and then inlining the CSS. No more writing HTML emails by hand!

Your templates will look like this:

// imports come here

function Root() {
  return (
    <EmailTemplate>
      <Header>My Company</Header>
      <Body>
        <SubHeader>Welcome to My Company!</SubHeader>
        <Main>
          <Paragraph>
            We're so excited to have you on board. We hope you enjoy your time
            here.
          </Paragraph>
          <Button href="https://mycompany.com">Visit My Company</Button>
        </Main>
      </Body>
    </EmailTemplate>
  );
}

Features

Translations

Jsx email builder uses i18next for translations so all the power of i18next is at your disposal.

Prerequisites

Node.js 16 or higher

make sure you have the latest version of Node.js installed. You can check your version by running node -v in your terminal.
NPM 8 or higher

make sure you have the latest version of NPM installed. You can check your version by running npm -v in your terminal.

Create a new project

If you don't have a project yet, you can create one by running the following command:

npx jsx-email-builder@latest init my-project

Or optionally, you can specify the project directory and the templates directory:

npx jsx-email-builder@latest init my-project --projectDir ../projects --templatesDir templates

aliases: new, create

This will create a new project in the my-project directory. It will also create a templates directory with some example templates. Feel free to delete or modify these templates.

Now it's time to install the dependencies:

npm install

yarn install

Run your project

npm run start

Or using yarn:

yarn start

This will start a development server that will watch your templates and recompile them when they change. By default, it will run on port 3000, but you can change this by passing the --port flag. To view your templates, go to http://localhost:3000/ in your browser.

Build your project

npm run build

Or using yarn:

yarn build

This will compile all of your JSX email templates into HTML files.

Keywords

jsx email builder

modern email builder

email template builder

react email templates

FAQs

What is jsx-email-builder?

Is jsx-email-builder popular?

Is jsx-email-builder well maintained?

Package last updated on 10 Oct 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

jsx-email-builder