Official Features

Below are all the Rich Text Features Payload offers. Everything is customizable; you can create your own features, modify ours and share them with the community.

Features Overview

Feature Name	Included by default	Description
`BoldFeature`	Yes	Adds support for bold text formatting.
`ItalicFeature`	Yes	Adds support for italic text formatting.
`UnderlineFeature`	Yes	Adds support for underlined text formatting.
`StrikethroughFeature`	Yes	Adds support for strikethrough text formatting.
`SubscriptFeature`	Yes	Adds support for subscript text formatting.
`SuperscriptFeature`	Yes	Adds support for superscript text formatting.
`InlineCodeFeature`	Yes	Adds support for inline code formatting.
`ParagraphFeature`	Yes	Provides entries in both the slash menu and toolbar dropdown for explicit paragraph creation or conversion.
`HeadingFeature`	Yes	Adds Heading Nodes (by default, H1 - H6, but that can be customized)
`AlignFeature`	Yes	Adds support for text alignment (left, center, right, justify)
`IndentFeature`	Yes	Adds support for text indentation with toolbar buttons
`UnorderedListFeature`	Yes	Adds support for unordered lists (ul)
`OrderedListFeature`	Yes	Adds support for ordered lists (ol)
`ChecklistFeature`	Yes	Adds support for interactive checklists
`LinkFeature`	Yes	Allows you to create internal and external links
`RelationshipFeature`	Yes	Allows you to create block-level (not inline) relationships to other documents
`BlockquoteFeature`	Yes	Allows you to create block-level quotes
`UploadFeature`	Yes	Allows you to create block-level upload nodes - this supports all kinds of uploads, not just images
`HorizontalRuleFeature`	Yes	Adds support for horizontal rules / separators. Basically displays an `<hr>` element
`InlineToolbarFeature`	Yes	Provides a floating toolbar which appears when you select text. This toolbar only contains actions relevant for selected text
`FixedToolbarFeature`	No	Provides a persistent toolbar pinned to the top and always visible. Both inline and fixed toolbars can be enabled at the same time.
`BlocksFeature`	No	Allows you to use Payload's Blocks Field directly inside your editor. In the feature props, you can specify the allowed blocks - just like in the Blocks field.
`TreeViewFeature`	No	Provides a debug box under the editor, which allows you to see the current editor state live, the dom, as well as time travel. Very useful for debugging
`EXPERIMENTAL_TableFeature`	No	Adds support for tables. This feature may be removed or receive breaking changes in the future - even within a stable lexical release, without needing a major release.
`TextStateFeature`	No	Allows you to store key-value attributes within TextNodes and assign them inline styles.

In depth

BoldFeature

Description: Adds support for bold text formatting, along with buttons to apply it in both fixed and inline toolbars.
Included by default: Yes
Markdown Support: **bold** or __bold__
Keyboard Shortcut: Ctrl/Cmd + B

ItalicFeature

Description: Adds support for italic text formatting, along with buttons to apply it in both fixed and inline toolbars.
Included by default: Yes
Markdown Support: *italic* or _italic_
Keyboard Shortcut: Ctrl/Cmd + I

UnderlineFeature

Description: Adds support for underlined text formatting, along with buttons to apply it in both fixed and inline toolbars.
Included by default: Yes
Keyboard Shortcut: Ctrl/Cmd + U

StrikethroughFeature

Description: Adds support for strikethrough text formatting, along with buttons to apply it in both fixed and inline toolbars.
Included by default: Yes
Markdown Support: ~~strikethrough~~

SubscriptFeature

Description: Adds support for subscript text formatting, along with buttons to apply it in both fixed and inline toolbars.
Included by default: Yes

SuperscriptFeature

Description: Adds support for superscript text formatting, along with buttons to apply it in both fixed and inline toolbars.
Included by default: Yes

InlineCodeFeature

Description: Adds support for inline code formatting with distinct styling, along with buttons to apply it in both fixed and inline toolbars.
Included by default: Yes
Markdown Support: `code`

ParagraphFeature

Description: Provides entries in both the slash menu and toolbar dropdown for explicit paragraph creation or conversion.
Included by default: Yes

HeadingFeature

Description: Adds support for heading nodes (H1-H6) with toolbar dropdown and slash menu entries for each enabled heading size.
Included by default: Yes
Markdown Support: #, ##, ###, ..., at start of line.
Types:

1type HeadingFeatureProps = {
2  enabledHeadingSizes?: HeadingTagType[] // ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
3}

Usage example:

1HeadingFeature({
2  enabledHeadingSizes: ['h1', 'h2', 'h3'], // Default: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
3})

AlignFeature

Description: Allows text alignment (left, center, right, justify), along with buttons to apply it in both fixed and inline toolbars.
Included by default: Yes
Keyboard Shortcut: Ctrl/Cmd + Shift + L/E/R/J (left/center/right/justify)

IndentFeature

Description: Adds support for text indentation, along with buttons to apply it in both fixed and inline toolbars.
Included by default: Yes
Keyboard Shortcut: Tab (increase), Shift + Tab (decrease)
Types:

1type IndentFeatureProps = {
/**
 * The nodes that should not be indented. "type"
 * property of the nodes you don't want to be indented.
 * These can be: "paragraph", "heading", "listitem",
 * "quote" or other indentable nodes if they exist.
 */
disabledNodes?: string[]
/**
 * If true, pressing Tab in the middle of a block such
 * as a paragraph or heading will not insert a tabNode.
 * Instead, Tab will only be used for block-level indentation.
 * @default false
 */
disableTabNode?: boolean
16}

Usage example:

1// Allow block-level indentation only
2IndentFeature({
3  disableTabNode: true,
4})

UnorderedListFeature

Description: Adds support for unordered lists (bullet points) with toolbar dropdown and slash menu entries.
Included by default: Yes
Markdown Support: -, *, or + at start of line

OrderedListFeature

Description: Adds support for ordered lists (numbered lists) with toolbar dropdown and slash menu entries.
Included by default: Yes
Markdown Support: 1. at start of line

ChecklistFeature

Description: Adds support for interactive checklists with toolbar dropdown and slash menu entries.
Included by default: Yes
Markdown Support: - [ ] (unchecked) or - [x] (checked)

LinkFeature

Description: Allows creation of internal and external links with toolbar buttons and automatic URL conversion.
Included by default: Yes
Markdown Support: [anchor](url)
Types:

1type LinkFeatureServerProps = {
/**
 * Disables the automatic creation of links
 * from URLs typed or pasted into the editor,
 * @default false
 */
disableAutoLinks?: 'creationOnly' | true
/**
 * A function or array defining additional
 * fields for the link feature.
 * These will be displayed in the link editor drawer.
 */
fields?:
  | ((args: {
      config: SanitizedConfig
      defaultFields: FieldAffectingData[]
    }) => (Field | FieldAffectingData)[])
  | Field[]
/**
 * Sets a maximum population depth for the internal
 * doc default field of link, regardless of the
 * remaining depth when the field is reached.
 */
maxDepth?: number
25} & ExclusiveLinkCollectionsProps
26
27type ExclusiveLinkCollectionsProps =
| {
    disabledCollections?: CollectionSlug[]
    enabledCollections?: never
  }
| {
    disabledCollections?: never
    enabledCollections?: CollectionSlug[]
  }

Usage example:

1LinkFeature({
fields: ({ defaultFields }) => [
  ...defaultFields,
  {
    name: 'rel',
    type: 'select',
    options: ['noopener', 'noreferrer', 'nofollow'],
  },
],
enabledCollections: ['pages', 'posts'], // Collections for internal links
maxDepth: 2, // Population depth for internal links
disableAutoLinks: false, // Allow auto-conversion of URLs
13})

RelationshipFeature

Description: Allows creation of block-level relationships to other documents with toolbar button and slash menu entry.
Included by default: Yes
Types:

1type RelationshipFeatureProps = {
/**
 * Sets a maximum population depth for this relationship,
 * regardless of the remaining depth when the respective
 * field is reached.
 */
maxDepth?: number
8} & ExclusiveRelationshipFeatureProps
9
10type ExclusiveRelationshipFeatureProps =
| {
    disabledCollections?: CollectionSlug[]
    enabledCollections?: never
  }
| {
    disabledCollections?: never
    enabledCollections?: CollectionSlug[]
  }

Usage example:

1RelationshipFeature({
2  disabledCollections: ['users'], // Collections to exclude
3  maxDepth: 2, // Population depth for relationships
4})

UploadFeature

Description: Allows creation of upload/media nodes with toolbar button and slash menu entry, supports all file types.
Included by default: Yes
Types:

1type UploadFeatureProps = {
collections?: {
  [collection: UploadCollectionSlug]: {
    fields: Field[]
  }
}
/**
 * Sets a maximum population depth for this upload (not the fields for this upload), regardless of the remaining depth when the respective field is reached.
 * This behaves exactly like the maxDepth properties of relationship and upload fields.
 *
 * {@link ../getting-started/concepts#field-level-max-depth}
 */
maxDepth?: number
14} & ExclusiveUploadFeatureProps
15
16type ExclusiveUploadFeatureProps =
| {
    /**
     * The collections that should be disabled. Overrides the `enableRichTextRelationship` property in the collection config.
     * When this property is set, `enabledCollections` will not be available.
     **/
    disabledCollections?: UploadCollectionSlug[]
23
    // Ensures that enabledCollections is not available when disabledCollections is set
    enabledCollections?: never
  }
| {
    // Ensures that disabledCollections is not available when enabledCollections is set
    disabledCollections?: never
30
    /**
     * The collections that should be enabled. Overrides the `enableRichTextRelationship` property in the collection config
     * When this property is set, `disabledCollections` will not be available.
     **/
    enabledCollections?: UploadCollectionSlug[]
  }

Usage example:

1UploadFeature({
collections: {
  uploads: {
    fields: [
      {
        name: 'caption',
        type: 'text',
        label: 'Caption',
      },
      {
        name: 'alt',
        type: 'text',
        label: 'Alt Text',
      },
    ],
  },
},
maxDepth: 1, // Population depth for uploads
disabledCollections: ['specialUploads'], // Collections to exclude
20})

BlockquoteFeature

Description: Allows creation of blockquotes with toolbar button and slash menu entry.
Included by default: Yes
Markdown Support: > quote text

HorizontalRuleFeature

Description: Adds support for horizontal rules/separators with toolbar button and slash menu entry.
Included by default: Yes
Markdown Support: ---

InlineToolbarFeature

Description: Provides a floating toolbar that appears when text is selected, containing formatting options relevant to selected text.
Included by default: Yes

FixedToolbarFeature

Description: Provides a persistent toolbar pinned to the top of the editor that's always visible.
Included by default: No
Types:

1type FixedToolbarFeatureProps = {
/**
 * @default false
 * If this is enabled, the toolbar will apply
 * to the focused editor, not the editor with
 * the FixedToolbarFeature.
 */
applyToFocusedEditor?: boolean
/**
 * Custom configurations for toolbar groups
 * Key is the group key (e.g. 'format', 'indent', 'align')
 * Value is a partial ToolbarGroup object that will
 * be merged with the default configuration
 */
customGroups?: CustomGroups
/**
 * @default false
 * If there is a parent editor with a fixed toolbar,
 * this will disable the toolbar for this editor.
 */
disableIfParentHasFixedToolbar?: boolean
22}

Usage example:

1FixedToolbarFeature({
applyToFocusedEditor: false, // Apply to focused editor
customGroups: {
  format: {
    // Custom configuration for format group
  },
},
8})

BlocksFeature

Description: Allows use of Payload's Blocks Field directly in the editor with toolbar buttons and slash menu entries for each block type.
Included by default: No
Types:

1type BlocksFeatureProps = {
2  blocks?: (Block | BlockSlug)[] | Block[]
3  inlineBlocks?: (Block | BlockSlug)[] | Block[]
4}

Usage example:

1BlocksFeature({
blocks: [
  {
    slug: 'callout',
    fields: [
      {
        name: 'text',
        type: 'text',
        required: true,
      },
    ],
  },
],
inlineBlocks: [
  {
    slug: 'mention',
    fields: [
      {
        name: 'name',
        type: 'text',
        required: true,
      },
    ],
  },
],
26})

Code Blocks

Payload exports a premade CodeBlock that you can import and use in your project. It supports syntax highlighting, dynamically selecting the language and loading in external type definitions:

1import { BlocksFeature, CodeBlock } from '@payloadcms/richtext-lexical'
2
3// ...
4BlocksFeature({
5  blocks: [
6    CodeBlock({
7      defaultLanguage: 'ts',
8      languages: {
9        js: 'JavaScript',
10        plaintext: 'Plain Text',
11        ts: 'TypeScript',
12      },
13    }),
14  ],
15}),
16// ...

When using TypeScript, you can also pass in additional type definitions that will be available in the editor. Here's an example of how to make payload and react available in the editor:

1import { BlocksFeature, CodeBlock } from '@payloadcms/richtext-lexical'
2
3// ...
4BlocksFeature({
blocks: [
  CodeBlock({
    slug: 'PayloadCode',
    languages: {
      ts: 'TypeScript',
    },
    typescript: {
      fetchTypes: [
        {
          // The index.bundled.d.ts contains all the types for Payload in one file, so that Monaco doesn't need to fetch multiple files.
          // This file may be removed in the future and is not guaranteed to be available in future versions of Payload.
          url: 'https://unpkg.com/payload@3.59.0-internal.8435f3c/dist/index.bundled.d.ts',
          filePath: 'file:///node_modules/payload/index.d.ts',
        },
        {
          url: 'https://unpkg.com/@types/react@19.1.17/index.d.ts',
          filePath: 'file:///node_modules/@types/react/index.d.ts',
        },
      ],
      paths: {
        payload: ['file:///node_modules/payload/index.d.ts'],
        react: ['file:///node_modules/@types/react/index.d.ts'],
      },
      typeRoots: ['node_modules/@types', 'node_modules/payload'],
      // Enable type checking. By default, only syntax checking is enabled.
      enableSemanticValidation: true,
    },
  }),
],
34}),
35// ...

TreeViewFeature

Description: Provides a debug panel below the editor showing the editor's internal state, DOM tree, and time travel debugging.
Included by default: No

EXPERIMENTAL_TableFeature

Description: Adds support for tables with toolbar button and slash menu entry for creation and editing.
Included by default: No

TextStateFeature

Description: Allows storing key-value attributes in text nodes with inline styles and toolbar dropdown for style selection.
Included by default: No
Types:

1type TextStateFeatureProps = {
2  /**
3   * The keys of the top-level object (stateKeys) represent the attributes that the textNode can have (e.g., color).
4   * The values of the top-level object (stateValues) represent the values that the attribute can have (e.g., red, blue, etc.).
5   * Within the stateValue, you can define inline styles and labels.
6   */
7  state: { [stateKey: string]: StateValues }
8}
9
10type StateValues = {
11  [stateValue: string]: {
12    css: StyleObject
13    label: string
14  }
15}
16
17type StyleObject = {
18  [K in keyof PropertiesHyphenFallback]?:
19    | Extract<PropertiesHyphenFallback[K], string>
20    | undefined
21}

Usage example:

1// We offer default colors that have good contrast and look good in dark and light mode.
2import { defaultColors, TextStateFeature } from '@payloadcms/richtext-lexical'
3
4TextStateFeature({
// prettier-ignore
state: {
  color: {
    ...defaultColors,
    // fancy gradients!
    galaxy: { label: 'Galaxy', css: { background: 'linear-gradient(to right, #0000ff, #ff0000)', color: 'white' } },
    sunset: { label: 'Sunset', css: { background: 'linear-gradient(to top, #ff5f6d, #6a3093)' } },
  },
  // You can have both colored and underlined text at the same time.
  // If you don't want that, you should group them within the same key.
  // (just like I did with defaultColors and my fancy gradients)
  underline: {
    'solid': { label: 'Solid', css: { 'text-decoration': 'underline', 'text-underline-offset': '4px' } },
     // You'll probably want to use the CSS light-dark() utility.
    'yellow-dashed': { label: 'Yellow Dashed', css: { 'text-decoration': 'underline dashed', 'text-decoration-color': 'light-dark(#EAB308,yellow)', 'text-underline-offset': '4px' } },
  },
},
22}),

This is what the example above will look like:

Example usage in light and dark mode for TextStateFeature with defaultColors and some custom styles

See what others are building with Payload.

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Get the resources you need to start building today

Microsoft chose Payload to tell the world about AI.