Options

createEditor (and every prop of <LettroveEditor />) takes three required options and a set of optional ones. This page explains them by task; the @lettrove/embed reference lists every key with its type.

const editor = await createEditor({
  // Required
  container: '#editor',
  publishableKey: 'lt_pk_test_…',
  getToken,

  // Which design
  designId: saved?.designId, // left out: a new design

  // What the editor shows
  tabs: { history: false },
  tools: { disabled: ['html'], order: ['heading', 'text', 'image', 'button'] },
  features: { ai: { assistant: false }, download: false },
  appearance: { theme: 'auto', variables: { accent: '#5b3df5' } },

  // Listening from the start
  on: { 'design:saved': ({ designId }) => save(designId) },
});

The three you always pass

Option	What it is
container	The element the editor fills, or a CSS selector for it. Give it a height.
publishableKey	The project's lt_pk_test_… or lt_pk_live_… key. Passing a secret key here is refused (options_invalid), so a secret key never ends up in a page by accident.
getToken	A function that resolves with a fresh token string from your server. It is called when the editor opens and before each token expires. Resolve with the token field, not the whole response.

Which design opens

Option
designId	The id the editor gave a design (from design:saved or editor.design.designId). Left out or null, a new design is started. A design that is not this end user's opens as design_not_found.

Keep the designId with your own record. That is the whole link between your product and the design: open the editor with it again, export it, or read it from your server.

Options only narrow

Some settings belong to the project (its mode, what its plan includes). The options in your page can turn things off, never on: anyone can edit a page's JavaScript in their browser's developer tools, so nothing a page asks for can raise what the project allows.

• A page option that asks for more than the project allows is adjusted, and the editor fires config:adjusted naming the option and why.
• A page option that is invalid (a misspelled key, a wrong type) stops the editor with options_invalid when you use a test key, so you find it while building. With a live key it is dropped with a config:adjusted warning, and the editor still opens: your users never see a broken box because of a typo that shipped.

Panels: tabs

Each panel can be removed. false removes the tab and its contents; the rail closes up around it.

Key	The panel
tabs.blocks	The block palette
tabs.layers	The outline of the design
tabs.brand	The brand: colours, logo and saved parts
tabs.inspector	The settings of the selected block
tabs.images	The image library
tabs.history	Restore points

Tools: tools

The blocks the palette offers: section, text, heading, image, button, divider, spacer, social, html, and form (landing pages and popups only).

Key
tools.disabled	Tools the palette does not offer. A design that already has such a block still opens and shows it.
tools.order	The palette's order. Tools you leave out follow, in their usual order.

Features: features

Key	Default	Off means
features.undoRedo	on	No undo and redo buttons, and no keyboard shortcuts for them
features.preview.mobile	on	No phone preview
features.ai.images	on where your project allows it	No picture generation
features.ai.assistant	—	Reserved for the assistant, which joins the embed in a later 1.x release
features.themeSwitch	on	No light / dark switch in the editor's bar. Turn it off when your product has its own, and call setTheme
features.download	on	No Download menu. Your code can still export: Getting designs out

Mode: mode

What the editor makes is the project's choice. mode in your page is only a check: if it differs from the project's, the editor refuses with mode_unavailable rather than open something else.

Branding: branding

Your product name and logo in the editor's bar are set in the dashboard, not here: see Your product name and logo. A page cannot set or remove them, so nobody can rebrand your editor from their browser.

Key
branding.poweredBy	true adds "Powered by Lettrove" to the editor's bar. A page can turn it on, never off.

Look: appearance

Theme, colours, fonts and which side each rail docks to: see Theming and white label.

Your own storage: storage, providers

storage: { images: 'host' } with an 'image:upload' provider keeps every image your users upload in your own storage; Lettrove keeps none. See Your own upload handler.

storage: { designs: 'host' } with 'design:load' and 'design:save' providers keeps every design in your own database; Lettrove keeps none. See Your own design storage.

Each can be set on its own, or both together. A 'host' without its providers, or a provider for something Lettrove stores, stops the editor as it opens (provider_missing, provider_not_host).

Lifecycle: on, signal, release

Option
on	Listeners attached before the editor opens, by event name, so you do not miss design:loaded or ready. Add more later with editor.on().
signal	An AbortSignal. Aborting it removes the editor, even before it has opened; createEditor then rejects with editor_destroyed.
release	Which editor release to load. See Releases and pinning.

Changing options while the editor is open

Most options apply when the editor opens. To change one, open the editor again (destroy() and createEditor, or new props in React). The exception is the theme: setTheme switches light and dark while the editor is open.