Newsletter desk

A React block (a whole screen) in Beamline's CMS & media app.

A publication's newsletters, each its own list with its own subscribers, settings and design. Active and Archived apart; a new one says how many existing members it would subscribe before it's made, and a failed create keeps what was written. The open newsletter's template is edited beside a large email preview: what shows (titles, excerpt, image, footer), and the header, link, type, buttons and dividers, with a link colour too faint for the white page said; changes are counted until saved and a failed save keeps them. A new reply-to waits for its owner to confirm it while replies keep going to the current address; reader feedback is switched per newsletter with its earlier responses kept; archiving takes it out of members' choices and new sends while its history stays.

Use it for

Managing several newsletters for one publication: creating, archiving and designing each one's email.

Not for

Sending a post (post-release).
How posts did (post-performance).

Anatomy

header: the mark, New newsletter
list: Active · Archived with counts; each newsletter with its header colour, description, subscribers and emails sent
new newsletter: name, description, Subscribe existing members with how many, Create
inspector: the email preview in its own colours; General (name, description, sender, reply-to and its confirmation, reader feedback, archive), Content (what shows), Design (header and link colour, font, title weight, buttons, dividers); unsaved changes counted, Save and Discard

States

no newsletters; active; archived
subscribers not counted yet
create: name needed; creating; failed (kept)
unsaved; saving; saved; save failed (kept)
reply-to pending confirmation; low-contrast link colour
feedback on; off with earlier responses kept

Keyboard

rows are buttons; the sections are a radio group; every field is its part's own

Motion

The email header colour eases to a new one; nothing moves at rest.

Props

Prop	Type	Default	Description
`newsletters`	`Newsletter[]`	—	Each with status, subscribers, delivered, sender, replyTo { current, pending }, feedback and design; or defaultNewsletters.
`existingMembers`	`number \| null`	—	How many members a new newsletter would subscribe if asked; null while not counted.
`onCreate`	`(draft) => Promise<{ newsletter } \| { error }>`	—	Create one; an error keeps the draft.
`onSave`	`(newsletter) => Promise<{ error? } \| void>`	—	Save a newsletter's settings and template. A new reply-to only becomes pending (the app sends the confirmation).
`onArchive`	`(id, archived) => Promise<{ error? } \| void>`	—	Archive or bring back.
`publication` (required)	`string`	—	The publication's name, shown in the email header.
`defaultNewsletters`	`Newsletter[]`	—
`onNewslettersChange`	`((next: Newsletter[]) => void)`	—
`defaultTab`	`"active" \| "archived"`	—
`defaultOpenId`	`string`	—
`defaultSection`	`Section`	—
`defaultCreating`	`boolean`	—
`defaultCreateDraft`	`Partial<NewsletterDraft>`	—	What the new-newsletter form starts with.
`defaultDraft`	`Partial<Newsletter>`	—	Open with this unsaved draft of the open newsletter (a design in progress).
`product`	`string`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.
`sampleImage`	`string`	—	A picture for the sample post's feature image in the preview; a plain plate without one.

Built from

Dependencies

lucide-react

Import

import { NewsletterDesk, DEFAULT_DESIGN } from "@beamline/newsletter-desk";

Get it

Newsletter desk is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent