> ## Documentation Index
> Fetch the complete documentation index at: https://docs.frogbot.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Rich Text Field

> Add structured, formatted content to a collection with the Lexical rich text editor.

The Rich Text field gives editors a formatting interface while storing content as structured JSON. You can render that data as JSX, HTML, Markdown, or plain text.

FrogBot builds the editor on Lexical, an open-source editor whose concepts and node model can be reused outside FrogBot.

Every Rich Text field requires an editor. Configure one at the root for
top-level fields, or set `editor` directly on the field.

Install the editor package and configure an editor at the root of your FrogBot config:

```bash theme={"theme":"tokyo-night"}
pnpm add @frogbotai/db-sqlite @frogbotai/richtext-lexical
```

```ts theme={"theme":"tokyo-night"}
import { sqliteAdapter } from '@frogbotai/db-sqlite'
import { lexicalEditor } from '@frogbotai/richtext-lexical'
import { buildConfig } from 'frogbot'

export default buildConfig({
  secret: process.env.FROGBOT_SECRET!,
  db: sqliteAdapter({
    client: {
      url: process.env.DATABASE_URL ?? 'file:./frogbot.db',
    },
  }),
  collections: [
    {
      slug: 'pages',
      fields: [
        {
          name: 'content',
          type: 'richText',
        },
      ],
    },
  ],
  editor: lexicalEditor({}),
})
```

Every Rich Text field needs an editor. A root editor applies to top-level fields unless a field supplies its own `editor`. Nested Rich Text fields need an explicit field editor.

## Config options

| Option | Type | Default | Description |
| - | - | - | - |
| `name` | `string` | Required | Property name used in stored records and APIs. See [field names](https://docs.frogbot.ai/fields/overview.md#field-names). |
| `type` | `'richText'` | Required | Selects the Rich Text field. |
| `editor` | `RichTextAdapter \| RichTextAdapterProvider` | Root `editor` (top-level fields only) | Editor for this field, such as `lexicalEditor({...})`. See [Field editor](#field-editor). |
| `maxDepth` | `number` | Request depth | Maximum population depth for relationships and uploads inside the content. See [depth](https://docs.frogbot.ai/queries/depth.md#max-depth). |
| `label` | `string \| Record<string, string> \| (({ i18n, t }) => string) \| false` | Generated from `name` | Label shown in the admin panel. Use an object keyed by language code for translations, or `false` to hide the label. |
| `required` | `boolean` | `false` | Rejects an empty value in the default validation. |
| `unique` | `boolean` | `false` | Creates a unique database index for the field path. See [indexes](https://docs.frogbot.ai/database/indexes.md). |
| `index` | `boolean` | `false` | Creates a database index for faster queries. `unique` already creates one. |
| `localized` | `boolean` | `false` | Stores one value per configured locale. Ignored without [localization](https://docs.frogbot.ai/configuration/localization.md) or inside a localized parent. |
| `defaultValue` | `SerializedEditorState` or `({ locale, req, user }) => value` | — | Value used when the field has no value. See [default values](https://docs.frogbot.ai/fields/overview.md#default-values). |
| `validate` | `Validate` | Built-in validator | Replaces the built-in validator. See [validation](https://docs.frogbot.ai/fields/overview.md#validation). The built-in validator delegates to the editor. |
| `hooks` | `{ beforeValidate, beforeChange, afterChange, afterRead, beforeDuplicate }` | — | Arrays of `FieldHook` functions for each phase. See [field hooks](https://docs.frogbot.ai/hooks/fields.md). |
| `access` | `{ create, read, update }` | Allowed | `FieldAccess` functions for each operation. See [field access control](https://docs.frogbot.ai/access-control/fields.md). |
| `hidden` | `boolean` | `false` | Removes the field from API responses and the admin panel while keeping stored data. |
| `saveToJWT` | `boolean \| string` | `false` | In an auth-enabled collection, copies the value into the user's token. A string sets the token key. See [token data](https://docs.frogbot.ai/authentication/token-data.md). |
| `virtual` | `boolean \| string` | `false` | `true` skips database storage; a string reads a value through a relationship path. Virtual fields are read-only in the admin panel unless `admin.readOnly` is `false`. See [virtual fields](https://docs.frogbot.ai/fields/overview.md#virtual-field-configuration). |
| `disableDuplicate` | `boolean` | `false` | Leaves the value out when a document is duplicated, so the copy uses `defaultValue`. |
| `admin` | `object` | — | Standard [field admin options](https://docs.frogbot.ai/fields/overview.md#admin-options). See [Admin options](#admin-options). |
| `custom` | `Record<string, any>` | — | Server-only metadata for your own code and plugins. Use `admin.custom` for data the browser also needs. |
| `jsonSchema` | `Array<({ jsonSchema }) => JSONSchema4>` | — | Functions that modify the JSON Schema used by [type generation](https://docs.frogbot.ai/typescript/generating-types.md). |

## Field editor

Override the root editor for one field when it needs different features or admin settings:

```ts theme={"theme":"tokyo-night"}
import { FixedToolbarFeature, lexicalEditor } from '@frogbotai/richtext-lexical'
import type { CollectionConfig } from 'frogbot'

export const Pages: CollectionConfig = {
  slug: 'pages',
  fields: [
    {
      name: 'content',
      type: 'richText',
      editor: lexicalEditor({
        features: ({ defaultFeatures }) => [
          ...defaultFeatures,
          FixedToolbarFeature(),
        ],
      }),
    },
  ],
}
```

See the [Rich Text editor overview](https://docs.frogbot.ai/rich-text/overview.md) for feature configuration and rendering.

## Admin options

The field's `admin` option inherits the standard field admin settings. Editor-specific options belong inside `lexicalEditor`:

```ts theme={"theme":"tokyo-night"}
import { lexicalEditor } from '@frogbotai/richtext-lexical'

const contentField = {
  name: 'content',
  type: 'richText',
  editor: lexicalEditor({
    admin: {
      hideAddBlockButton: true,
      hideDraggableBlockElement: true,
      hideGutter: true,
      hideInsertParagraphAtEnd: true,
      placeholder: 'Write the page content...',
    },
  }),
}
```

## Data shape

Rich Text values are serialized editor states. Import the data type from the package's Lexical subpath:

```ts theme={"theme":"tokyo-night"}
import type { SerializedEditorState } from '@frogbotai/richtext-lexical/lexical'

export type PageContent = SerializedEditorState
```

FrogBot type generation includes the serialized `root.children` shape for configured Rich Text fields.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.