Emails Built from React Components
Kelvin Liu, Founding Engineer at Beacons, on the email product development process
This is a design system move disguised as an email workflow detail. By defining each email block as a React component and compiling it into the final HTML at send time, Beacons gets one source of truth for how emails look, while creators still interact with simple blocks like text, image, and button. That matters because email HTML is fragile, especially in Outlook, so fixing a block once can improve every email built from it.
-
Beacons is not hand editing raw email HTML. It stores emails as blocks plus properties, then renders HTML from that structure. That makes the product feel like a normal app internally, even though the output still has to satisfy old email clients with strict formatting rules.
-
This is the same basic logic behind component systems in web development and newer email tools like Parcel. A developer creates reusable button, image, or layout components once, then updates code in one place instead of fixing dozens of separate templates later.
-
Litmus sits downstream as the rendering check, not the authoring system. Podia used a similar compiled HTML into Litmus flow, while email tool builders consistently describe Litmus as strongest for previewing across Gmail, Apple Mail, and especially Outlook, rather than as the main place developers want to write code.
The next step is more interactivity and more automation around the same component model. As Beacons rebuilds its editor, the winning stack in email will look more like modern software development, with reusable components, centralized updates, and automated client testing, while the final output remains old fashioned HTML built to survive the inbox ecosystem.