# Vue Mail Designer

> A visual drag & drop email builder for Vue 3. Drag blocks onto a canvas, edit them with a properties inspector, and export email-client-compatible HTML (Outlook included) plus a re-editable design JSON. Published as `@naturaldevcr/vue-mail-designer` on npm.

The library exposes one main component, `EmailBuilder`, driven entirely by props/events/exposed methods — no global config, no required backend. Image storage, media library, and Unlayer-URL-import proxying are all integrator-supplied functions; the library assumes no particular backend.

For the complete content of every page below in a single file, see [llms-full.txt](https://naturaldevcr.github.io/vue-mail-designer/llms-full.txt).

## Guide

- [Introduction](https://naturaldevcr.github.io/vue-mail-designer/guide/introduction): What the library is, who it is for, and what it generates.
- [Installation](https://naturaldevcr.github.io/vue-mail-designer/guide/installation): Package install, peer dependencies, and the stylesheet import.
- [Quickstart](https://naturaldevcr.github.io/vue-mail-designer/guide/quickstart): Minimal working component, plus the optional media library setup.
- [Autosave](https://naturaldevcr.github.io/vue-mail-designer/guide/autosave): Configuring local or custom draft persistence, restore behavior, lifecycle events, and status.
- [Blocks](https://naturaldevcr.github.io/vue-mail-designer/guide/blocks): The block palette, shared inspector properties, and per-block notes.
- [Backgrounds](https://naturaldevcr.github.io/vue-mail-designer/guide/backgrounds): Body, row, and column backgrounds — color, image, size, position.
- [Rich text editor](https://naturaldevcr.github.io/vue-mail-designer/guide/rich-text): Formatting, merge tags, link color inheritance, special links.
- [Chrome AI tools](https://naturaldevcr.github.io/vue-mail-designer/guide/chrome-ai): Optional Chrome built-in AI tools for rewrite, write, summarize, and translate in the rich text editor.
- [AI template generation](https://naturaldevcr.github.io/vue-mail-designer/guide/ai-template-generation): Provider-agnostic AI creation and editing of validated email design JSON with dynamic context and proposal review.
- [Custom blocks](https://naturaldevcr.github.io/vue-mail-designer/guide/custom-blocks): Registering integrator-defined blocks: fields, defaultData, render().
- [Importing from Unlayer](https://naturaldevcr.github.io/vue-mail-designer/guide/unlayer-import): Converting an Unlayer design JSON/URL to this library’s format, and known field-mapping details.
- [Email compatibility](https://naturaldevcr.github.io/vue-mail-designer/guide/email-compatibility): The HTML techniques used (ghost tables, VML, media queries) and known limitations.
- [Limitations](https://naturaldevcr.github.io/vue-mail-designer/guide/limitations): A blunt list of what the library does not do today.

## Reference

- [Props](https://naturaldevcr.github.io/vue-mail-designer/reference/props): Every EmailBuilder prop, its type, and what it does.
- [Events](https://naturaldevcr.github.io/vue-mail-designer/reference/events): update:design, change, export-html, and the autosave lifecycle events.
- [Methods (ref)](https://naturaldevcr.github.io/vue-mail-designer/reference/methods): exportHtml, exportJson, getDesign, loadDesign, getAutosaveStatus, exportImage.

## Optional

- [Source repository](https://github.com/NaturalDevCR/vue-mail-designer): monorepo, includes the demo app and this docs site.
- [npm package](https://www.npmjs.com/package/@naturaldevcr/vue-mail-designer)