Skip to content

Import EmailBuilder.js templates into the SendLit editor #138

Open

Description

@clbotdev

Background

EmailBuilder.js (@usewaypoint/email-builder, MIT, React) is the default free editor that platforms find when they want to embed one. Numbers:

  • 271,836 npm downloads last month and 1,919,052 last year (month, year)
  • 1.7k+ stars and 750+ forks
  • last push 9 Feb 2026 (GitHub API)

For comparison, @sendlit/email-editor had 383 downloads last month (npm).

Upstream is effectively dormant and won't fill the gaps its users ask for:

  • #164 "Is this project still maintained?" is open. The one reply says "Looks abandoned."
  • React 19 support PRs were closed unmerged: #190, #186 and #183.
  • #101 asked for merge tags / variables. The co-founder replied that they "keep EmailBuilder.js pretty stripped down as we have a pro version on Waypoint".
  • Forkers are rebuilding the gaps themselves (e.g. SparkDynamic's fork, and several forks on npm).

A lossless importer gives those users a one-step move to a maintained React 19 editor that has merge tags and sending built in.

Source: Waypoint competitor profile (Oct 2026), takeaway #1.

Proposed fix

  • Add importEmailBuilderJs(doc) to @sendlit/email-editor, exported from the package entry point. It converts an EmailBuilder.js document (the root → EmailLayout → childrenIds tree of block_* entries) into a SendLit editor document.
    • Map blocks: Text, Heading, Button, Image, Divider, Spacer, Html, Avatar, Columns/ColumnsContainer and Container to their SendLit equivalents.
    • Map styles: padding, colors, font family and size, alignment, and the layout's backdrop and canvas colors.
    • Unmapped blocks or props: keep them as an HTML block, or drop them with a warning. Never throw. Return { document, warnings[] }.
    • Validation: validate the input with a schema and return a clear error for invalid JSON.
  • Add fixtures. Use EmailBuilder.js's own sample templates (MIT) as test input.
  • Add docs: a "Migrating from EmailBuilder.js" guide in docs/ and the package README. Cover the API differences (props and events), the importer, merge tags, and React 19.
  • Optionally, add a small CLI or script, npx @sendlit/email-editor import-emailbuilder in.json > out.json.
  • The playground sub-issue (phase 3) and the app's template editor use this importer through an "Import EmailBuilder.js JSON" action.

Acceptance criteria

  • importEmailBuilderJs is exported, typed, and documented in the package README.
  • All official EmailBuilder.js sample templates import without throwing. Rendered HTML matches the original visually (block order, text, links, images, colors), checked with snapshot tests.
  • Unknown block types produce a warning and a fallback, not a crash. Invalid input returns a clear error.
  • A round trip works: an imported document → edit → save → reload in the editor.
  • The "Migrating from EmailBuilder.js" guide is published in docs and linked from the README.
  • A changeset is added, and the package version is bumped and released.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestseverity: mediumNotable gap with a workaround, or competitive parity

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions