> Lettrove docs 1.0 · https://docs.lettrove.com/docs/1.0/

# Introduction

**Lettrove is the embeddable drag-and-drop email editor and page builder for web apps.** You put it
inside your own product — a CRM, a marketing tool, a newsletter platform, any SaaS — and your users
design **emails, landing pages, popups and documents** without leaving it, under your name and
logo.

- **Embed it in minutes**: one npm package (`@lettrove/react`, `@lettrove/vue`, or `@lettrove/embed`
  for anything else), a token route on your server, and the editor is on your page.
- **White-labeled**: your product name and logo in its bar, your colours in light and dark mode.
- **HTML that renders everywhere**: emails compiled for Gmail, Outlook and Apple Mail; landing pages
  and popups as responsive web pages; documents that print on real paper.
- **AI built in**: your users generate pictures from a description, right in the editor.
- **Every way out**: HTML, plain text, PDF, PNG, ZIP and the design itself, from the page or your
  server, plus webhooks when anything changes.
- **Nothing secret on your page**: your secret key stays on your server; the page holds a token that
  lasts minutes.

Your users drag in blocks, write, ask the AI for help, and save. You get the finished output and
send or publish it however you like.

These docs are for the version of the Lettrove SDK shown in the version menu at the top of the
page; pick yours there.

:::tip[Using the Lettrove app?]
If your team uses Lettrove at lettrove.com rather than embedding it, the [Using Lettrove](./app/overview.md)
pages are yours: the [MCP server](./app/mcp.md) for your AI assistant, [bringing contacts in](./app/audiences/import.md),
[sending](./app/sending.md), [roles](./app/team.md) and [security](./app/security.md).
:::

## The pieces

| Piece | Where it runs | What it does |
|---|---|---|
| **The editor** | `https://lettrove-embed.com`, in a frame on your page | Everything your users see and touch. It loads from us, so fixes reach your users without you reinstalling anything. |
| [@lettrove/embed](https://www.npmjs.com/package/@lettrove/embed) | Your page: Angular, Svelte, plain JavaScript | Opens the editor in a box on your page and talks to it. About 5 KB, no dependencies. |
| [@lettrove/react](https://www.npmjs.com/package/@lettrove/react) | Your React or Next.js app | The same, as a `<LettroveEditor />` component. |
| [@lettrove/vue](https://www.npmjs.com/package/@lettrove/vue) | Your Vue or Nuxt app | The same, as a Vue component. |
| [@lettrove/node](https://www.npmjs.com/package/@lettrove/node) | Your server | Holds your **secret key**, mints the short-lived tokens the editor opens with, and calls the server API. |
| **The server API** | `https://api.lettrove.com` | What `@lettrove/node` calls for you: read designs, export them, render a design you hold, erase a person. Call it directly only from a server that is not on Node. |
| **Webhooks** | Your server | We tell your server when a design is saved or deleted, an export is made or a person is erased. |

The four packages are on npm under the [@lettrove](https://www.npmjs.com/org/lettrove) organization,
MIT licensed and published together at one version number. Each package's name above links to its
npm page.

```mermaid
flowchart LR
  subgraph Your product
    page["Your page<br/>@lettrove/embed"]
    server["Your server<br/>@lettrove/node + secret key"]
  end
  page -- "getToken()" --> server
  server -- "mint a token" --> api["api.lettrove.com"]
  page -- "opens, with the token" --> frame["Editor frame<br/>lettrove-embed.com"]
  frame -- "saves, exports" --> api
  api -- "webhooks" --> server
```

Your secret key never reaches a browser. The page only ever holds a token that lasts at most
fifteen minutes, opens one person's designs, and works only on the sites you allowed.

## Where to start

- **New here?** The [Quickstart](./get-started/quickstart.md) puts a working editor in a React
  app on your machine. There is a page each for [Next.js](./get-started/nextjs.md),
  [Vue](./get-started/vue.md), [Angular](./get-started/angular.md),
  [SvelteKit](./get-started/sveltekit.md) and [plain HTML](./get-started/html.md).
- **Deciding whether it fits?** [How it fits together](./get-started/concepts.md) and
  [What Lettrove stores](./data/what-we-store.md) answer most questions a product or security
  review asks.
- **Looking something up?** The [API reference](./api/overview.md) lists every option, method, event,
  endpoint and error code.

## About these docs

- **Versions.** Every release you can install is in the version menu at the top (all of them are
  on [All versions](/versions)). Pick the one you have and the whole site follows it, not just the
  page: every page reads exactly as it did in that release, and following a link keeps you in it.
  Fix releases share the pages of their line (1.0.0, 1.0.1 and 1.0.2 all read the 1.0 pages, since a
  fix changes nothing documented), and the page names the release you picked. An earlier version
  says so at the top of each page, with a link to the same page in the newest; the newest marks
  anything added after 1.0 with **Added in 1.y**. `https://docs.lettrove.com/docs/1.0/…` always
  shows 1.0, and `https://docs.lettrove.com/docs/1/…` the newest 1.x. (Until 11 October 2026 there
  was one version for all of 1.x.)
- **For your AI assistant.** Every page is also plain Markdown at its address plus `.md`, and
  [`/llms.txt`](https://docs.lettrove.com/llms.txt) lists them all. Point Claude Code, Cursor or
  Copilot at it.
- **Questions** and security reports: support@lettrove.com.