Crema

Bài toán

Email HTML gần như là mảng duy nhất của web không thay đổi suốt hai mươi năm qua. Outlook đến giờ vẫn render bằng engine của Word, nên chỉ cần viết gì vượt quá bảng lồng nhau và inline style là layout vỡ với một lượng người nhận đáng kể. Kết quả là mỗi email marketing hoặc phải nhờ một dev ngồi code bảng thủ công, hoặc phải trả phí cho một SaaS builder mà mình không kiểm soát được HTML đầu ra.

Crema là lời giải tôi chọn cho khoảng trống đó: một editor trực quan để người không biết code vẫn dựng được email, nhưng markup xuất ra đủ an toàn để hiển thị đúng trong hộp thư thật. Thách thức kỹ thuật nằm ở chính sự khác biệt này: giao diện chỉnh sửa là một app React hiện đại, còn HTML xuất ra phải theo chuẩn cũ, và sản phẩm chỉ có giá trị khi hai bên luôn khớp nhau.

Tính năng chính

• Dựng email từ các khối lồng nhau, kéo thả để đổi thứ tự: text, ảnh, nút, đường kẻ và nhóm khối.
• Xuất HTML dạng bảng hiển thị đúng trong hộp thư thật, thay vì loại CSS hiện đại chỉ đẹp trên bản preview của trình duyệt.
• Tùy chỉnh chi tiết tới từng pixel: bo góc riêng từng góc, padding, typography, không cần chạm vào code.
• Xem trước desktop và mobile, chuyển qua lại trước khi gửi.
• Lưu và nhân bản template trong dashboard, gửi email thử ngay từ editor.

Từ editor state sang email HTML

Editor hiển thị một cây React dùng flexbox, còn file xuất ra cần bảng lồng nhau và inline style. Một lớp serialize chuyển cùng một block state thành cả hai dạng, nhờ đó bản preview luôn khớp với file HTML cuối cùng mà người dùng không phải đụng tới CSS.

State của editor, undo và autosave

Mỗi email là một cây gồm bảy loại khối nằm trong Zustand store, stack có thể lồng trong stack, và mọi thao tác chỉnh sửa là một phép cập nhật immutable trên cây đó. Undo và redo hoạt động trên snapshot của toàn bộ tài liệu; các thao tác liên tục như gõ chữ hay kéo thả được gộp lại, cả loạt thay đổi chỉ tính là một bước undo. Editor tự lưu sau khi người dùng ngừng thao tác và định kỳ ghi lại mốc phiên bản, nên lúc nào cũng có thể quay về một phiên bản cũ từ panel lịch sử.

Hiển thị đúng trên email client thật

Pipeline xuất HTML tách thành các module style theo từng loại khối, và markup sinh ra kèm sẵn các xử lý đặc thù cho Outlook, như mso-height-rule cho nút có chiều cao cố định hay mso-hide cho phần tử cần ẩn. Template cũng hỗ trợ merge tag theo đúng cú pháp của Brevo, Mailchimp và SendGrid, nên file xuất ra dùng được ngay trong chiến dịch thật, không cần tìm và thay thế thủ công.

Vận hành như một sản phẩm

Crema chạy như một SaaS nhỏ chứ không phải bản demo. Tài khoản có ba gói Free, Pro và Pro+ thanh toán qua Lemon Squeezy; trạng thái subscription đồng bộ từ webhook, và khi người dùng hạ gói thì giới hạn của gói mới được áp dụng ngay. Khách chưa đăng ký vẫn dùng thử được editor với bản nháp tự lưu trong trình duyệt, và có thể gửi email thử qua Resend để kiểm tra thiết kế trong hộp thư thật.

Giới hạn và hướng phát triển

Dự án chưa có bộ test render tự động: file xuất ra hiện được kiểm chứng bằng preview tích hợp và các lần gửi thử tới email client thật, nên việc cần làm trước tiên là bổ sung snapshot test cho phần HTML sinh ra. Lịch sử undo cũng chỉ nằm trong bộ nhớ, không giữ được qua lần reload; các mốc phiên bản đã lưu tạm thời bù cho phần này.