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. A step-by-step page exists for each: React, Next.js, Vue, Angular, SvelteKit and plain HTML.

npm

npm install @lettrove/embed

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

npm install @lettrove/react

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).
• 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.

Vue

npm install @lettrove/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.

Script tag

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

<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.

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