> Lettrove docs 1.x · https://docs.lettrove.com/docs/

# 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 **version 1.x** of the Lettrove SDK.

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

## 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`** | 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`** | Your React or Next.js app | The same, as a `<LettroveEditor />` component. |
| **`@lettrove/vue`** | Your Vue or Nuxt app | The same, as a Vue component. |
| **`@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` | Read designs, export them, render a design you hold, erase a person. For any language. |
| **Webhooks** | Your server | We tell your server when a design is saved or deleted, an export is made or a person is erased. |

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

## About these docs

- **Versions.** The version picker changes the whole site, not just the page. One version covers a
  whole major release: 1.x is true for every 1.y, and anything added after 1.0 says **Added in
  1.y**. Links of the form `https://docs.lettrove.com/docs/1/…` always point at 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.