The latest articles on DEV Community by Jordan Isip (@fixie). https://dev.to/fixie https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1328831%2F8c31f714-48dd-4976-90c2-18b82691b2fa.jpeg https://dev.to/fixie en Jordan Isip Tue, 05 Mar 2024 15:44:06 +0000 https://dev.to/fixie/introducing-emailbuilderjs-a-free-and-open-source-block-based-email-template-builder-22bk https://dev.to/fixie/introducing-emailbuilderjs-a-free-and-open-source-block-based-email-template-builder-22bk <p>Since the launch of our <a href="https://usewaypoint.com" rel="noopener noreferrer">main product</a> last year, we've been hearing from our customers on how much teams love our email template builder. To bring no-code emails to a wider audience, we've decided to open-source a community version of our builder 🎉.</p> <p>We call it <a href="https://emailbuilderjs.com/" rel="noopener noreferrer">EmailBuilder.js</a> – a powerful block-based email builder that takes the best parts of other open source libraries like <a href="https://editorjs.io/" rel="noopener noreferrer">Editor.js</a> and email component libraries and puts them into an easy to use no-code builder.</p> <p><iframe width="710" height="399" src="https://www.youtube.com/embed/aRj2xlIq8hY"> </iframe> </p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4f1c0cy18yzxtcmqqt72.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4f1c0cy18yzxtcmqqt72.png" alt="Emailbuilder.js editor"></a></p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feg7mp96kz2ylnhw6clqd.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feg7mp96kz2ylnhw6clqd.png" alt="EmailBuilder.js samples"></a></p> <p>The output is a well structured JSON file or HTML that renders well on across modern email clients and devices. We can all finally start building better product emails without the need to use 90's style HTML and CSS 😵‍💫</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9diywfmu2ex9lrgspv87.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9diywfmu2ex9lrgspv87.png" alt="EmailBuilder.js device support"></a></p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fslee5a8srthoe4eci08m.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fslee5a8srthoe4eci08m.png" alt="EmailBuilder.js output"></a></p> <p>Since the builder is completely free and open source, teams can self-host and extend the builder as needed.</p> <p>Be sure to give it a spin on our playground/demo with some of our sample templates:</p> <ul> <li><a href="https://usewaypoint.github.io/email-builder-js/#sample/welcome" rel="noopener noreferrer">Welcome email</a></li> <li><a href="https://usewaypoint.github.io/email-builder-js/#sample/one-time-password" rel="noopener noreferrer">One-time passcode (OTP)</a></li> <li><a href="https://usewaypoint.github.io/email-builder-js/#sample/reset-password" rel="noopener noreferrer">Reset password</a></li> <li><a href="https://usewaypoint.github.io/email-builder-js/#sample/order-ecomerce" rel="noopener noreferrer">E-commerce order receipt</a></li> <li><a href="https://usewaypoint.github.io/email-builder-js/#sample/subscription-receipt" rel="noopener noreferrer">SaaS subscription receipt</a></li> <li><a href="https://usewaypoint.github.io/email-builder-js/#sample/reservation-reminder" rel="noopener noreferrer">Reservation reminder</a></li> <li><a href="https://usewaypoint.github.io/email-builder-js/#sample/post-metrics-report" rel="noopener noreferrer">Post metrics report</a></li> <li><a href="https://usewaypoint.github.io/email-builder-js/#sample/respond-to-message" rel="noopener noreferrer">Respond to message</a></li> </ul> <p>We'd love to hear what you think and we're excited to see what everyone builds with it.</p> <p>If you like it, please consider giving it a <a href="https://github.com/usewaypoint/email-builder-js" rel="noopener noreferrer">star on GitHub</a> 🌟</p> opensource nocode typescript webdev