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>
);
}Jsx email builder uses i18next for translations so all the power of i18next is at your disposal.
-
Node.js 16 or higher
make sure you have the latest version of Node.js installed. You can check your version by running
node -vin your terminal. -
NPM 8 or higher
make sure you have the latest version of NPM installed. You can check your version by running
npm -vin your terminal.
If you don't have a project yet, you can create one by running the following command:
npx jsx-email-builder@latest init my-projectOr optionally, you can specify the project directory and the templates directory:
npx jsx-email-builder@latest init my-project --projectDir ../projects --templatesDir templatesaliases: 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 installor
yarn installnpm run startOr using yarn:
yarn startThis 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.
npm run buildOr using yarn:
yarn buildThis will compile all of your JSX email templates into HTML files.