Email composer
The envelope, the checks and the block canvas as one surface, assembled only from kit items.
An email composer built from the Block editor and its email blocks, with the subject and preview text in a Field and an Input. Nothing in it is local beyond the fixture data.
25 of 60 characters
Falls back to the first line of the body.
- Northwest Trail Co.Your weekend forecast, plus three trails under an hour away — Clear skies Saturday. Here is where we would go.9:12 AM
- GessoThe block canvas is yours — Inboxes fall back to your first line.9:00 AM
- Alder Street LibraryHolds ready for pickup — Two items are waiting at the front desk.Yesterday
The block canvas is yours
Gesso ships an email-first block editor — React owns the tree, TipTap only paints a text leaf. Read the contract.
The envelope is part of the email
Subject and preview text are part of the email, so they live on the document's meta and
round-trip through its JSON. readEmailEnvelope and writeEmailEnvelope are the email
pack's reader for that untyped field.
Preview text needs an inbox
The inbox strip is the point of preview text. It is an abstract box until you watch it
truncate next to a subject at 600px and again at 375px, which is why
EmailInboxPreview ships in the kit rather than
living in this file.
Checks from two places, one chip
Block issues come from each BlockSpec.validate, and
envelope issues come from validateEmailEnvelope and reach the editor through
extraIssues. Clicking a block issue selects and scrolls to the block, and clicking an
envelope issue focuses the field, which is what onIssueSelect is for.
Measured, not estimated
Preview mode reads the real byte length of the compiled HTML against EMAIL_CLIP_BYTES, so
the number is measured and not estimated off a block count.
Built from
shadcn add @gesso/block-editor @gesso/email-blocks @gesso/field @gesso/input