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

# 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](/docs/api/embed)
lists every key with its type.

```ts
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`](/docs/editor/events) 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`](/docs/editor/theming) |
| `features.download` | on | No Download menu. Your code can still export: [Getting designs out](/docs/editor/exports) |

## 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](/docs/editor/theming#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](/docs/editor/theming).

## 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](/docs/data/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](/docs/data/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](/docs/editor/releases). |

## 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`](/docs/editor/theming)
switches light and dark while the editor is open.