@lettrove/react

npm install @lettrove/react

React 18 or newer. Built on @lettrove/embed, which it installs.

import { useRef } from 'react';
import { LettroveEditor, type EditorHandle } from '@lettrove/react';

export function Designer({ designId }: { designId?: string }) {
  const editor = useRef<EditorHandle | null>(null);
  return (
    <>
      <button onClick={async () => console.log((await editor.current?.exportHtml())?.html)}>Export</button>
      <LettroveEditor
        ref={editor}
        publishableKey="lt_pk_test_…"
        getToken={getToken}
        designId={designId}
        appearance={{ variables: { accent: '#5b3df5' } }}
        onDesignSaved={({ designId }) => save(designId)}
        onError={(e) => console.error(e.code, e.message)}
        style={{ height: 720 }}
      />
    </>
  );
}

Props

Every option of createEditor except container, signal and on (the component provides those): publishableKey, getToken, designId, release, mode, tabs, tools, features, branding, appearance. Plus:

Prop
className, style	For the element the editor fills. Give it a height.
onReady(editor)	The editor is on screen; editor is the EditorHandle.
onError(error)	It could not open, or reported an error while open. error.code, error.message.
onDesignLoaded	design:loaded
onDesignUpdated	design:updated
onDesignSaved	design:saved
onSelectionChanged	selection:changed
onImageUploaded	image:uploaded
onConfigAdjusted	config:adjusted
onThemeChanged	theme:changed

Payloads: Events.

ref

The EditorHandle once the editor is open, null before and after.

Behaviour you can rely on

• StrictMode: mounting twice in development leaves one editor.
• Server rendering (Next.js, Remix): renders an empty element; the editor opens 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).
• Changing props: inline functions and objects may 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 without reopening.
• Unmounting removes the editor and everything it set up.

Exports

LettroveEditor, LettroveEditorProps, and the types of @lettrove/embed (EditorHandle, ExportResult, LettroveEmbedError…).