Free and open-source email template builder

A no-code email template builder that help developers build email templates fast. Output to JSON or HTML.

Open playground

View on GitHub

Brought to you by Waypoint

Preview of an email sent by Waypoint – 1

Preview of an email sent by Waypoint – 2

Preview of an email sent by Waypoint – 3

Preview of an email sent by Waypoint – 4

From simple welcome emails to complex reports

EmailBuilder.js is an open source email builder takes inspiration from editor.js and email component libraries and puts them into an easy to use no-code builder – available as a free and open-source project.

Style editor

Edit styles on each block and match your brand without writing any CSS.

Robust templates

Template building blocks automatically render well across clients and devices.

Extendable

Fork the repository, self-host, and create your own custom blocks for your team.

View examples in playground

Welcome email

One-time passcode (OTP)

Reset password

E-commerce receipt

SaaS subscription receipt

Reservation reminder

Post metrics

Respond to booking inquiry

Open playground

JSON or HTML output

Use HTML output directly or convert the JSON output into HTML from within your codebase (using our open-source reader) before sending.

JSON

HTML

{
  "root": {
    "type": "EmailLayout",
    "data": {
      "backdropColor": "#000000",
      "canvasColor": "#000000",
      "textColor": "#FFFFFF",
      "fontFamily": "BOOK_SERIF",
      "childrenIds": [
        "block_ChPX66qUhF46uynDE8AY11",
        "block_CkNrtQgkqPt2YWLv1hr5eJ",
        "block_BFLBa3q5y8kax9KngyXP65",
        "block_4T7sDFb4rqbSyWjLGJKmov",
        "block_Rvc8ZfTjfhXjpphHquJKvP"
      ]
    }
  },
  "block_ChPX66qUhF46uynDE8AY11": {
    "type": "Image",
    "data": {
      "style": {
        "backgroundColor": null,
        "padding": {
          "top": 48,
          "bottom": 24,
          "left": 24,
          "right": 24
        },
        "textAlign": "center"
      },
      "props": {
        "height": 24,
        "width": null,
        "url": "https://d1iiu589g39o6c.cloudfront.net/live/platforms/platform_A9wwKSL6EV6orh6f/images/wptemplateimage_jc7ZfPvdHJ6rtH1W/&.png",
        "alt": "",
        "linkHref": null,
        "contentAlignment": "middle"
      }
    }
  },
  "block_CkNrtQgkqPt2YWLv1hr5eJ": {
    "type": "Text",
    "data": {
      "style": {
        "color": "#ffffff",
        "backgroundColor": null,
        "fontSize": 16,
        "fontFamily": null,
        "fontWeight": "normal",
        "textAlign": "center",
        "padding": {
          "top": 16,
          "bottom": 16,
          "left": 24,
          "right": 24
        }
      },
      "props": {
        "text": "Here is your one-time passcode:"
      }
    }
  },
  "block_BFLBa3q5y8kax9KngyXP65": {
    "type": "Heading",
    "data": {
      "props": {
        "text": "0123456",
        "level": "h1"
      },
      "style": {
        "color": null,
        "backgroundColor": null,
        "fontFamily": null,
        "fontWeight": "bold",
        "textAlign": "center",
        "padding": {
          "top": 16,
          "bottom": 16,
          "right": 24,
          "left": 24
        }
      }
    }
  },
  "block_4T7sDFb4rqbSyWjLGJKmov": {
    "type": "Text",
    "data": {
      "style": {
        "color": "#868686",
        "backgroundColor": null,
        "fontSize": 16,
        "fontFamily": null,
        "fontWeight": "normal",
        "textAlign": "center",
        "padding": {
          "top": 16,
          "bottom": 16,
          "right": 24,
          "left": 24
        }
      },
      "props": {
        "text": "This code will expire in 30 minutes."
      }
    }
  },
  "block_Rvc8ZfTjfhXjpphHquJKvP": {
    "type": "Text",
    "data": {
      "style": {
        "color": "#868686",
        "backgroundColor": null,
        "fontSize": 14,
        "fontFamily": null,
        "fontWeight": "normal",
        "textAlign": "center",
        "padding": {
          "top": 16,
          "bottom": 16,
          "right": 24,
          "left": 24
        }
      },
      "props": {
        "text": "Problems? Just reply to this email."
      }
    }
  }
}

JSON

HTML

{
  "root": {
    "type": "EmailLayout",
    "data": {
      "backdropColor": "#000000",
      "canvasColor": "#000000",
      "textColor": "#FFFFFF",
      "fontFamily": "BOOK_SERIF",
      "childrenIds": [
        "block_ChPX66qUhF46uynDE8AY11",
        "block_CkNrtQgkqPt2YWLv1hr5eJ",
        "block_BFLBa3q5y8kax9KngyXP65",
        "block_4T7sDFb4rqbSyWjLGJKmov",
        "block_Rvc8ZfTjfhXjpphHquJKvP"
      ]
    }
  },
  "block_ChPX66qUhF46uynDE8AY11": {
    "type": "Image",
    "data": {
      "style": {
        "backgroundColor": null,
        "padding": {
          "top": 48,
          "bottom": 24,
          "left": 24,
          "right": 24
        },
        "textAlign": "center"
      },
      "props": {
        "height": 24,
        "width": null,
        "url": "https://d1iiu589g39o6c.cloudfront.net/live/platforms/platform_A9wwKSL6EV6orh6f/images/wptemplateimage_jc7ZfPvdHJ6rtH1W/&.png",
        "alt": "",
        "linkHref": null,
        "contentAlignment": "middle"
      }
    }
  },
  "block_CkNrtQgkqPt2YWLv1hr5eJ": {
    "type": "Text",
    "data": {
      "style": {
        "color": "#ffffff",
        "backgroundColor": null,
        "fontSize": 16,
        "fontFamily": null,
        "fontWeight": "normal",
        "textAlign": "center",
        "padding": {
          "top": 16,
          "bottom": 16,
          "left": 24,
          "right": 24
        }
      },
      "props": {
        "text": "Here is your one-time passcode:"
      }
    }
  },
  "block_BFLBa3q5y8kax9KngyXP65": {
    "type": "Heading",
    "data": {
      "props": {
        "text": "0123456",
        "level": "h1"
      },
      "style": {
        "color": null,
        "backgroundColor": null,
        "fontFamily": null,
        "fontWeight": "bold",
        "textAlign": "center",
        "padding": {
          "top": 16,
          "bottom": 16,
          "right": 24,
          "left": 24
        }
      }
    }
  },
  "block_4T7sDFb4rqbSyWjLGJKmov": {
    "type": "Text",
    "data": {
      "style": {
        "color": "#868686",
        "backgroundColor": null,
        "fontSize": 16,
        "fontFamily": null,
        "fontWeight": "normal",
        "textAlign": "center",
        "padding": {
          "top": 16,
          "bottom": 16,
          "right": 24,
          "left": 24
        }
      },
      "props": {
        "text": "This code will expire in 30 minutes."
      }
    }
  },
  "block_Rvc8ZfTjfhXjpphHquJKvP": {
    "type": "Text",
    "data": {
      "style": {
        "color": "#868686",
        "backgroundColor": null,
        "fontSize": 14,
        "fontFamily": null,
        "fontWeight": "normal",
        "textAlign": "center",
        "padding": {
          "top": 16,
          "bottom": 16,
          "right": 24,
          "left": 24
        }
      },
      "props": {
        "text": "Problems? Just reply to this email."
      }
    }
  }
}

JSON

HTML

{
  "root": {
    "type": "EmailLayout",
    "data": {
      "backdropColor": "#000000",
      "canvasColor": "#000000",
      "textColor": "#FFFFFF",
      "fontFamily": "BOOK_SERIF",
      "childrenIds": [
        "block_ChPX66qUhF46uynDE8AY11",
        "block_CkNrtQgkqPt2YWLv1hr5eJ",
        "block_BFLBa3q5y8kax9KngyXP65",
        "block_4T7sDFb4rqbSyWjLGJKmov",
        "block_Rvc8ZfTjfhXjpphHquJKvP"
      ]
    }
  },
  "block_ChPX66qUhF46uynDE8AY11": {
    "type": "Image",
    "data": {
      "style": {
        "backgroundColor": null,
        "padding": {
          "top": 48,
          "bottom": 24,
          "left": 24,
          "right": 24
        },
        "textAlign": "center"
      },
      "props": {
        "height": 24,
        "width": null,
        "url": "https://d1iiu589g39o6c.cloudfront.net/live/platforms/platform_A9wwKSL6EV6orh6f/images/wptemplateimage_jc7ZfPvdHJ6rtH1W/&.png",
        "alt": "",
        "linkHref": null,
        "contentAlignment": "middle"
      }
    }
  },
  "block_CkNrtQgkqPt2YWLv1hr5eJ": {
    "type": "Text",
    "data": {
      "style": {
        "color": "#ffffff",
        "backgroundColor": null,
        "fontSize": 16,
        "fontFamily": null,
        "fontWeight": "normal",
        "textAlign": "center",
        "padding": {
          "top": 16,
          "bottom": 16,
          "left": 24,
          "right": 24
        }
      },
      "props": {
        "text": "Here is your one-time passcode:"
      }
    }
  },
  "block_BFLBa3q5y8kax9KngyXP65": {
    "type": "Heading",
    "data": {
      "props": {
        "text": "0123456",
        "level": "h1"
      },
      "style": {
        "color": null,
        "backgroundColor": null,
        "fontFamily": null,
        "fontWeight": "bold",
        "textAlign": "center",
        "padding": {
          "top": 16,
          "bottom": 16,
          "right": 24,
          "left": 24
        }
      }
    }
  },
  "block_4T7sDFb4rqbSyWjLGJKmov": {
    "type": "Text",
    "data": {
      "style": {
        "color": "#868686",
        "backgroundColor": null,
        "fontSize": 16,
        "fontFamily": null,
        "fontWeight": "normal",
        "textAlign": "center",
        "padding": {
          "top": 16,
          "bottom": 16,
          "right": 24,
          "left": 24
        }
      },
      "props": {
        "text": "This code will expire in 30 minutes."
      }
    }
  },
  "block_Rvc8ZfTjfhXjpphHquJKvP": {
    "type": "Text",
    "data": {
      "style": {
        "color": "#868686",
        "backgroundColor": null,
        "fontSize": 14,
        "fontFamily": null,
        "fontWeight": "normal",
        "textAlign": "center",
        "padding": {
          "top": 16,
          "bottom": 16,
          "right": 24,
          "left": 24
        }
      },
      "props": {
        "text": "Problems? Just reply to this email."
      }
    }
  }
}

All output from EmailBuilder.js blocks are tested and supported by modern email clients (on both desktop and mobile) including: Gmail, Apple Mail, Outlook, Yahoo! Mail, HEY and Superhuman.

Open playground

Quick tutorial

Watch a tutorial on how to build a one-time passcode email template in minutes – all within our hosted playground.

⭐️ Star us on GitHub ⭐️

Star us on GitHub

We've been building EmailBuilder.js internally for over a year, however, our open source version is still brand new. If you like what you are seeing, please consider giving the project a star on GitHub.

Star

View on GitHub

Brought to you by Waypoint

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 out Waypoint's email API with a more advanced template builder.

Learn more

Brought to you by Waypoint

View on GitHub

Demo / playground