Newsletter Builder

What it does

A block-based email builder that runs entirely in the browser with no backend. Assemble blocks, edit each one in a side panel, and export HTML ready to paste into Constant Contact's code-your-own editor — or any platform that accepts raw HTML.

A companion Header Studio composites a wordmark plaque over a photograph and hands back a branded PNG header, which removes the most common reason a staff member has to open a design tool at all.

What it can do

• Block library plus a one-click standard template
• Per-block editing with reorder, duplicate, and delete
• Export HTML sized for a code-your-own email editor
• Save an HTML file with the design data embedded, then reopen it to keep editing
• Browser autosave of work in progress
• Header Studio: photo upload, drag to reposition, plaque and wordmark color picking, PNG download
• Ships with CLAUDE.md and llms.txt so an AI assistant can build newsletters in it directly

Make it your own

Start by forking the repository into your own organization. Everything below assumes you are working in your fork, not this one.

1. Fork, replace CNAME, set Pages to deploy from main at the root, add the DNS record, and enable Enforce HTTPS.
2. Edit index.html to swap the colors, fonts, and default template block set for your organization's newsletter layout.
3. Replace the logo and wordmark art in assets/, used by both the builder and Header Studio.
4. Update header.html with your own plaque shape and brand color options.
5. No API keys are needed. Images still have to live in your email platform's library or DAM and be referenced by URL.

Stuck on a step? Open an issue on the repository. Questions from people adapting these for their own institution are the most useful feedback we get.