Repository files navigation

EmailBuilder.js is a free and open-source email template builder for developers. Build emails faster than ever with clean JSON or HTML output that render well across clients and devices.

Use our playground or learn more about how toget started using EmailBuilder.js.

Use a no-code builder that is flexible enough to create a wide variety of template designs – from simple welcome emails to complex reports.

Sample templates available in the playground:

• Welcome email
• One-time passcode (OTP)
• Reset password
• E-commerce receipt
• SaaS subscription receipt
• Reservation reminder
• Post metrics
• Respond to inquiry

It's finally time to stop using 90's style HTML and CSS to build product emails. EmailBuilder.js takes inspiration fromeditor.js and email component libraries and puts them into an easy to use no-code builder to that allow the entire team to build emails.

Since the builder is completely free and open source, teams can self-host the builder and extend as needed.

Each block is it's own npm package that can be included in the builder. These are the ones that are built-in:

• Avatar
• Button
• Columns
• Container
• Divider
• Heading
• HTML
• Image
• Spacer
• Container

All blocks aretested and supported by modern email clients (on both desktop and mobile) including: Gmail, Apple Mail, Outlook, Yahoo! Mail, HEY and Superhuman.

The email builder can output to a clean JSON or raw HTML. You can see this from the playground by simply clicking on the HTML or JSON tabs in the builder.

Install the package in your project:

npm install --save @usewaypoint/email-builder

Given an EmailBuilder.js configuration (the JSON output of the builder):

import{TReaderDocument}from'@usewaypoint/email-builder';constCONFIGURATION:TReaderDocument={root:{type:'EmailLayout',data:{backdropColor:'#F8F8F8',canvasColor:'#FFFFFF',textColor:'#242424',fontFamily:'MODERN_SANS',childrenIds:['block-1709578146127'],},},'block-1709578146127':{type:'Text',data:{style:{fontWeight:'normal',padding:{top:16,bottom:16,right:24,left:24,},},props:{text:'Hello world',},},},};

You can render the EmailBuilder.js configuration to an HTML email string:

import{renderToStaticMarkup}from'@usewaypoint/email-builder';conststring=renderToStaticMarkup(CONFIGURATION,{rootBlockId:'root'});

Or you can render the EmailBuilder.js configuration by using the<Reader /> React component:

import{Reader}from'@usewaypoint/email-builder';<Readerdocument={CONFIGURATION}rootBlockId="root"/>;

In most cases, you'll want to take the EmailBuilder.js configuration, render it to HTML, and then send it as an email. Here are a couple of examples on how you can do this using the same configuration from the examples above.

import{renderToStaticMarkup}from'@usewaypoint/email-builder';importnodemailerfrom"nodemailer";// Replace this with your transport configurationconsttransportConfig={}consttransporter=nodemailer.createTransport(transportConfig);// Replace this with the JSON for your Reader documentconstCONFIGURATION:TReaderDocument={}awaittransporter.sendMail({from:'no-reply@example.com'to:'friend@example.com',subject:'Hello',html:renderToStaticMarkup(CONFIGURATION,{rootBlockId:'root'}),});

We'll useWaypoint for this example, however, you can use any email API like Amazon SES, SendGrid, or MailGun.

importaxiosfrom'axios';import{renderToStaticMarkup}from'@usewaypoint/email-builder';// Replace this with the JSON for your Reader documentconstCONFIGURATION:TReaderDocument={}awaitaxios({method:'post',url:'https://live.waypointapi.com/v1/email_messages',headers:{'Content-Type':'application/json',},auth:{username:API_KEY_USERNAME,password:API_KEY_PASSWORD,},data:{from:'no-reply@example.com'to:'friend@example.com',subject:'Hello',bodyHtml:renderToStaticMarkup(CONFIGURATION,{rootBlockId:'root'}),},});

Fork this repository and usepackages/editor-sample as an example for self-hosting.

Quick start:

1. Fork this repository.
2. Open up directory in terminal.
3. Go to the editor-sample package:cd packages/editor-sample
4. Install packages:npm install
5. Run the server:npx vite
6. Open in browser:http://localhost:5173/email-builder-js/

Feel free to report any bug on the issues page. If possible, please add steps, information, screenshots, or videos to help us reproduce them.

If you are looking to provide code contribututions to EmailBuilder.js, please fork the repository and create a new pull request. We will check your code closely and provide feedback.

EmailBuilder.js is the community version of our much-loved no-code template builder on Waypoint. If you are looking for a better collaboration experience for your team, check outWaypoint's email API with a hosted template builder with dynamic LiquidJS variables, drag and drop, reusable layouts, loops, and additional blocks.

Need special consultation, a one-off feature, integration, or something else for your business? We can help or put you in touch with someone that can – contact us atsupport@usewaypoint.com and share your details.