From Browser to Inbox: Seamless Integration for Futuristic Newsletter Creation

Creating newsletters is tedious. Even if you're familiar with the process, it involves copy-pasting content, formatting, and sending multiple tests before hitting send. It's time-consuming, repetitive, and inefficient.

Every time I've made email templates - whether onboarding emails, marketing campaigns, or simple newsletters - it's complex. The design and implementation are especially tricky if you want something creative.

Here's a typical workflow: (I'm not considering content planning, copy writing, management, etc. I just want simply talk about the implementation process)

Design the email template

Email design is constrained by limitations like layout, sizes, devices, slicing, and how different email clients render.

Code the email template

I've tried manual HTML/CSS, drag-and-drop editors, and more. It's always painful.

Test the email template

You have to test in different clients and devices to ensure compatibility.

This doesn't even cover sending, analytics, etc.

My Dream Solution

I've always thought there could be a simpler way. As a creator constantly exploring the internet, I wanted a monthly newsletter to share knowledge.

But given the complex, time-consuming process, I was reluctant to spend too much time on it. I wanted a seamless, single-source solution to integrate with my website and email platform.

Eureka Moment

I saw a post by Zeno Rocha, about react.email. I thought: "Wow, I need to try this!". I read the docs and had an idea - why not use react.email to transform my website content into a newsletter, reusing components I already have?

My mind started getting into a loop, because I was thinking about all the use cases and possibilities involved in this process.

Connecting the dots

I started testing react.email components for my idea. My site already used React and Next.js. I started building the integration between my website and react.email.

How It Works:

The Seamless Transition from Browser to Inbox Flow

Overview of the Process

I used Next.js for my site, which enables full-stack React web apps. I noticed I could use the same react.email structure for my UI components.

My component library looks like:

I build a map of the components and separated them into two folders: ui and email components and I have a HoC (Higher-order component) that imports dynamically the components based on the request.

import { 
    Head, 
    Html 
} from 'next/document';

import Link from 'next/link';
import Column from '@ui/Column';
import Container from '@ui/Container';
import Heading from '@ui/Heading';
import Hr from '@ui/Hr';
import Img from '@ui/Img';
import Row from '@ui/Row';
import Section from '@ui/Section';
import Text from '@ui/Text';
import CodeBlock from "@ui/CodeBlock";

import {
    Column, 
    Container, 
    Head,
    Heading,
    Hr,
    Html,
    Img,
    Link, 
    Preview,
    Row, 
    Section, 
    Text,
    CodeBlock
} from '@react-email/components';

Both components are using the same styles and structure, but the email components instead of receiving a className, they receive a style prop, and there is one function that converts CSS to inline styles.

Do you want to see how it works? Check out the Share Box below.

This lets me easily create templates that work on my site and in my newsletter. I'll show a newsletter example I'm using for my monthly Stories.

Newsletter Example:

Post Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod magna et nisl aliquam, eget aliquet nisl faucibus. Donec euismod magna et nisl aliquam,

Read more

---

Post Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Read more

---

Post Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod magna.

Read more

---

Post Title

Donec euismod magna et nisl aliquam, eget aliquet nisl faucibus.

Read more

---

Other Section

• Some other links to share click here

• Some other links to share click here

• Some other links to share click here

This simple example shows the same layout and styles work in both places. If you email this page, it looks great in your inbox! See below the components structure of this newsletter template:

 Section
    Row
        Img
    Section
        Row
            Heading
            Text
            Link
        Hr
        Row
            Column
                Row
                    Img
            Column
                Row
                    Heading
                    Text
                    Link
        ...
        Heading
            Row
                Heading + Link
            ...

With this, I don't need separate templates. I can reuse styles without extra work.

Now, I'm working on simplifying the process of creating content with a Markdown and JSON files that will also generates my website pages and my email templates as well. I believe that I can make this process more efficient and encourage more people to make email creation better and apply it to their projects.

Conclusion

This is an experiment I'm doing in my free time. But I'm excited about how it can help me and others seamlessly integrate content from websites to inboxes, increasing audience engagement.

Email remains a powerful tool for audience engagement. All content should be available in different formats and channels.

I'm planning to push this project on GitHub soon. If you don't follow me on GitHub yet, please do it, so you can see when I publish it. But also, feel free to reach out to me if you have any questions or want to know more about this project. Start a conversation