Rendering On Demand

Lexical in Payload is a React Server Component (RSC). Historically that created three headaches: 1. You couldn't render the editor directly from the client. 2. Features like blocks, tables and link drawers require the server to know the shape of nested sub-fields at render time. If you tried to render on demand, the server didn't know those schemas. 3. The rich text field is designed to live inside a Form. For simple use cases, setting up a full form just to manage editor state was cumbersome.

To simplify rendering richtext on demand, <RenderLexical />, that renders a Lexical editor while still covering the full feature set. On mount, it calls a server action to render the editor on the server using the new render-field server function. That server render gives Lexical everything it needs (including nested field schemas) and returns a ready-to-hydrate editor.

Inside an existing Form

If you have an existing Form and want to render a richtext field within it, you can use the RenderLexical component like this:

1'use client'
2
3import type { JSONFieldClientComponent } from 'payload'
4
5import {
6  buildEditorState,
7  RenderLexical,
8} from '@payloadcms/richtext-lexical/client'
9
10import { lexicalFullyFeaturedSlug } from '../../slugs.js'
11
12export const Component: JSONFieldClientComponent = (args) => {
13  return (
14    <RenderLexical
15      name={
16        'myFieldName' /* Make sure this matches the field name present in your form */
17      }
18      initialValue={buildEditorState<DefaultNodeTypes>({
19        text: 'default value',
20      })}
21      schemaPath={`collection.${lexicalFullyFeaturedSlug}.richText`}
22    />
23  )
24}

Outside of a Form (you control state)

1'use client'
2
3import type { DefaultTypedEditorState } from '@payloadcms/richtext-lexical'
4import type { JSONFieldClientComponent } from 'payload'
5
6import {
7  buildEditorState,
8  RenderLexical,
9} from '@payloadcms/richtext-lexical/client'
10import React, { useState } from 'react'
11
12import { lexicalFullyFeaturedSlug } from '../../slugs.js'
13
14export const Component: JSONFieldClientComponent = (args) => {
15  // Manually manage the editor state
16  const [value, setValue] = useState<DefaultTypedEditorState | undefined>(() =>
17    buildEditorState<DefaultNodeTypes>({ text: 'state default' }),
18  )
19
20  const handleReset = React.useCallback(() => {
21    setValue(buildEditorState<DefaultNodeTypes>({ text: 'state default' }))
22  }, [])
23
24  return (
25    <div>
26      <RenderLexical
27        name="myField"
28        initialValue={buildEditorState<DefaultNodeTypes>({
29          text: 'default value',
30        })}
31        schemaPath={`collection.${lexicalFullyFeaturedSlug}.richText`}
32        setValue={setValue as any}
33        value={value}
34      />
35      <button onClick={handleReset} style={{ marginTop: 8 }} type="button">
36        Reset Editor State
37      </button>
38    </div>
39  )
40}

Choosing the schemaPath

schemaPath tells the server which richText field to render. This gives the server the exact nested field schemas (blocks, relationship drawers, upload fields, tables, etc.).

Format:

collection.<collectionSlug>.<fieldPath>
global.<globalSlug>.<fieldPath>

Example (top level): collection.posts.richText

Example (nested in a group/tab): collection.posts.content.richText

Was this page helpful?

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.

Rendering On Demand

Inside an existing Form

Outside of a Form (you control state)

Choosing the schemaPath

Views