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

# Install

There are three ways to put the editor on a page. All three open the same editor from
`https://lettrove-embed.com`; none of them contains the editor itself, so your bundle stays small
(about 5 KB) and fixes reach your users without a reinstall.

| You have | Install | Then |
|---|---|---|
| React 18 or newer | `npm install @lettrove/react` | `import { LettroveEditor } from '@lettrove/react'` |
| Vue 3.3 or newer | `npm install @lettrove/vue` | `import { LettroveEditor } from '@lettrove/vue'` |
| Any other bundled app (Angular, Svelte, plain Vite or webpack…) | `npm install @lettrove/embed` | `import { createEditor } from '@lettrove/embed'` |
| No build step | A `<script>` tag | `Lettrove.createEditor(…)` |

Every way needs a token route on your server; see [Minting tokens](/docs/server/tokens). A
step-by-step page exists for each: [React](/docs/get-started/quickstart),
[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).

## npm

```bash
npm install @lettrove/embed
```

```ts
import { createEditor } from '@lettrove/embed';

async function getToken() {
  const response = await fetch('/lettrove-token', { method: 'POST' });
  return (await response.json()).token;
}

const editor = await createEditor({
  container: '#editor',
  publishableKey: 'lt_pk_test_…',
  getToken,
});
```

Call `createEditor` once the container is in the page (a mounted hook in Svelte, `ngAfterViewInit`
in Angular), and `editor.destroy()` when the component goes away.

The package ships ES modules, CommonJS and TypeScript types. It has no dependencies and touches
nothing outside the container you give it: no global styles, no globals, no polyfills.

## React

```bash
npm install @lettrove/react
```

```tsx
import { LettroveEditor } from '@lettrove/react';

<LettroveEditor publishableKey="lt_pk_test_…" getToken={getToken} style={{ height: 720 }} />;
```

- **Server rendering** (Next.js, Remix): it renders an empty element on the server and opens the
  editor in the browser. In the Next.js App Router it is already a client component; render it from
  a `'use client'` file of your own, since `getToken` is a function ([Next.js](/docs/get-started/nextjs)).
- **StrictMode** mounting twice leaves one editor.
- **Changing props**: inline functions and options can change on every render without reopening the
  editor. A new `publishableKey`, `designId`, `release` or set of options opens it again; a new
  `appearance.theme` switches the open editor.
- **Unmounting** removes the editor and everything it set up.

The full list of props is in the [`@lettrove/react` reference](/docs/api/react).

## Vue

```bash
npm install @lettrove/vue
```

```vue
<script setup lang="ts">
import { LettroveEditor } from '@lettrove/vue';
</script>

<template>
  <LettroveEditor publishable-key="lt_pk_test_…" :get-token="getToken" style="height: 720px" />
</template>
```

The same component, with Vue's conventions: kebab-case props, `@design-saved`-style events, and a
template ref whose `editor` is the editor handle. The full list is in the
[`@lettrove/vue` reference](/docs/api/vue).

## Script tag

For a page with no bundler, load the script build. It adds one global, `Lettrove`.

```html
<div id="editor" style="height: 720px"></div>
<script src="https://cdn.jsdelivr.net/npm/@lettrove/embed@1/dist/lettrove.iife.js"></script>
<script>
  async function getToken() {
    const response = await fetch('/lettrove-token', { method: 'POST' });
    return (await response.json()).token;
  }

  Lettrove.createEditor({
    container: '#editor',
    publishableKey: 'lt_pk_test_…',
    getToken,
  });
</script>
```

`@1` follows the newest 1.x of the loader. To pin an exact loader version, write it in full
(`@lettrove/embed@1.0.0`).

## Give the editor a height

The editor fills the element you give it, top to bottom. An element with no height shows nothing.
Give it a fixed height (`720px`), a viewport height (`100vh`), or make it a flex child that grows.
It is designed for desktop screens: about 1080px of width shows the palette, canvas and inspector
side by side.

## What the editor needs from your site

- Your page's site must be on the project's **allowed sites** (test keys also work on `localhost`).
- If your page sends a **Content-Security-Policy**, it must allow the editor's frame:
  `frame-src https://lettrove-embed.com`. See [Allowed sites and CSP](/docs/editor/allowed-sites).

## Requirements

| | |
|---|---|
| Browsers | Current versions of Chrome, Edge, Firefox and Safari, on desktop. The editor is built for a mouse or trackpad; a box about 1080px wide or more shows every panel side by side. |
| React | 18 or newer, for `@lettrove/react` |
| Node.js | 20 or newer, for `@lettrove/node` on your server |