Getting Started with Email-Builder-js

The recommend way to install Email-Builder-js library is using NPM. Please use the following command for a smooth installation.

npm install --save @usewaypoint/email-builder
 

Create Component-Based Email Template Design

In the core of open source Email-Builder-js library lies its focus on components. With this approach, software developers can craft reusable parts such as headers, footers, content sections, and buttons. These components can be mixed and matched effortlessly to form a complete template. By breaking down the design in this way, not only is the code better organized, but it also becomes simpler to update and manage your templates. In the following example, each component is created individually, allowing for flexible composition and future updates without changing the entire structure.

 
const EmailBuilder = require('email-builder-js');

const email = new EmailBuilder();

// Create reusable components
const header = email.createComponent({
  tag: 'header',
  content: '
Welcome to Our Platform!
',
  style: { color: '#333', textAlign: 'center', padding: '10px' },
});

const mainContent = email.createComponent({
  tag: 'div',
  content: '
We’re excited to have you on board. Enjoy our features!
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

const footer = email.createComponent({
  tag: 'footer',
  content: '
Best Regards,
Team
',
  style: { color: '#999', textAlign: 'center', padding: '10px' },
});

// Combine components into a template
const template = email.buildTemplate({
  components: [header, mainContent, footer],
});

// Output the complete HTML template
console.log(template);
 

Apply Custom Styling & Branding to Templates

To ensure that email templates align with an application’s branding, the Email-Builder-js library allows for extensive customization through the style attribute for each component. This includes adjusting colors, fonts, sizes, and layouts of the templates. Software developers can use inline styling, which is critical for ensuring email clients render designs as intended. The following code snippet creates a button with a background color, padding, and rounded corners, styled to resemble a typical call-to-action button that aligns with brand colors.

 
const button = email.createComponent({
  tag: 'a',
  content: 'Click Here to Get Started',
  attributes: { href: 'https://example.com/get-started' },
  style: {
    display: 'inline-block',
    padding: '10px 20px',
    backgroundColor: '#007bff',
    color: '#fff',
    textDecoration: 'none',
    borderRadius: '5px',
    textAlign: 'center'
  },
});

const template = email.buildTemplate({
  components: [button],
});

console.log(template);
 

Dynamic Content Injection to Emails in Node.js

For applications that send personalized emails, such as order confirmations or user-specific notifications, the open source Email-Builder-js library supports dynamic content injection. Software Developers can programmatically insert user-specific information (like names, address or purchase details) into templates, enabling the creation of more engaging, relevant emails. By using template literals, developers can easily replace placeholders with dynamic content. This approach is highly effective for transactional emails and any situation where personalization is key as shown in the following example.

 
const userName = 'John Doe';
const product = 'Premium Subscription';

const personalizedContent = email.createComponent({
  tag: 'div',
  content: `
Hi ${userName},
Thank you for purchasing our ${product}!
`,
  style: { color: '#333', fontSize: '16px' },
});

const template = email.buildTemplate({
  components: [personalizedContent],
});

console.log(template);