EmailBuilder.js Documentation

repository·main·Indexed 23 days ago

https://github.com/usewaypoint/email-builder-js

An open-source email template builder for creating responsive, client-compatible emails via a no-code interface. It allows developers to export templates as JSON or HTML and provides a suite of built-in blocks including Avatar, Button, ColumnsContainer, Container, Divider, Heading, HTML, Image, Spacer, and Text. The library includes @usewaypoint/email-builder for rendering and @usewaypoint/document-core for managing block schemas and components using Zod and React.

Tokens
8K
Snippets
17
Records
63
Agent score
82%

What's inside EmailBuilder.js

  1. How DocumentBlocksDictionary works

    main

    The fundamental concept in @usewaypoint/document-core is the DocumentBlocksDictionary. It is a mapping where each key is a block name, and the value is an object containing two things:

    1. A zod schema defining the data structure for that block.
    2. A React Component that renders the block using that data.

    This dictionary is passed to builder functions to generate specialized components and validation schemas.

    const dictionary = {
      Alert: {
        schema: z.object({
          message: z.string(),
        }),
        Component: ({ message }: { message: string }) => {
          return <div>{message.toUpperCase()}</div>
        }
      }
    }