EmailShepherd Email Design System — Agent Reference

This is a reference for AI coding agents working on EmailShepherd Email Design System (EDS) repositories.

An EDS defines the drag-and-drop email editor experience. The components you define become the blocks users drag into emails. The fields you define become the editable controls in the editor sidebar. Labels, groups, hints, and visibility rules all directly shape the editor UI.

For exact TypeScript types, look up node_modules/@emailshepherd/eds-sdk/dist/types.d.ts in the project.

Defining a Component

A component is defined using defineComponent and consists of a name, label, description, field definitions, and a Liquid template.

The description is important — EmailShepherd's AI Agents use it to decide which components to select. Write it to explain what the component is for and when it should be used (e.g. "Full-width image with headline and CTA. Use as the first component in promotional emails").

import { defineComponent } from '@emailshepherd/eds-sdk/types';
import template from './template.liquid?raw';