Code-based nature means you can build on top of it to power anything.
Resources
DocumentationExamplesTemplatesGitHubBlog
Community
RoadmapDiscordCommunity Help
Payload Cloud

Deploy your entire stack in one place with Payload Cloud.

LoginCloud Pricing
It’s time to take back your content infrastructure.
Schedule a Demo
Enterprise Features
SSOPublishing WorkflowsVisual EditorStatic A/B testingAI features
Customer Stories
MicrosoftBlue OriginHello BelloMythical SocietyTekton
Featured Customer Story

Microsoft chose Payload to tell the world about AI.

Read the case study
New projectLogin
New projectLogin

Lexical Converters

Lexical => HTML

Lexical saves data in JSON, but can also generate its HTML representation via two main methods:

  1. Outputting HTML from the Collection: Create a new field in your collection to convert saved JSON content to HTML. Payload generates and outputs the HTML for use in your frontend.
  2. Generating HTML on any server Convert JSON to HTML on-demand on the server.

The editor comes with built-in HTML serializers, simplifying the process of converting JSON to HTML.

Outputting HTML from the Collection

To add HTML generation directly within the collection, follow the example below:

1
import type { CollectionConfig } from 'payload'
2
3
import { HTMLConverterFeature, lexicalEditor, lexicalHTML } from '@payloadcms/richtext-lexical'
4
5
const Pages: CollectionConfig = {
6
slug: 'pages',
7
fields: [
8
{
9
name: 'nameOfYourRichTextField',
10
type: 'richText',
11
editor: lexicalEditor({
12
features: ({ defaultFeatures }) => [
13
...defaultFeatures,
14
// The HTMLConverter Feature is the feature which manages the HTML serializers.
15
// If you do not pass any arguments to it, it will use the default serializers.
16
HTMLConverterFeature({}),
17
],
18
}),
19
},
20
lexicalHTML('nameOfYourRichTextField', { name: 'nameOfYourRichTextField_html' }),
21
],
22
}

The lexicalHTML() function creates a new field that automatically converts the referenced lexical richText field into HTML through an afterRead hook.

Generating HTML anywhere on the server

If you wish to convert JSON to HTML ad-hoc, use the convertLexicalToHTML function:

1
import { consolidateHTMLConverters, convertLexicalToHTML } from '@payloadcms/richtext-lexical'
2
3
4
await convertLexicalToHTML({
5
converters: consolidateHTMLConverters({ editorConfig }),
6
data: editorData,
7
payload, // if you have Payload but no req available, pass it in here to enable server-only functionality (e.g. proper conversion of upload nodes)
8
req, // if you have req available, pass it in here to enable server-only functionality (e.g. proper conversion of upload nodes). No need to pass in Payload if req is passed in.
9
})

This method employs convertLexicalToHTML from @payloadcms/richtext-lexical, which converts the serialized editor state into HTML.

Because every Feature is able to provide html converters, and because the htmlFeature can modify those or provide their own, we need to consolidate them with the default html Converters using the consolidateHTMLConverters function.

Example: Generating HTML within an afterRead hook
1
import type { FieldHook } from 'payload'
2
3
import {
4
HTMLConverterFeature,
5
consolidateHTMLConverters,
6
convertLexicalToHTML,
7
defaultEditorConfig,
8
defaultEditorFeatures,
9
sanitizeServerEditorConfig,
10
} from '@payloadcms/richtext-lexical'
11
12
const hook: FieldHook = async ({ req, siblingData }) => {
13
const editorConfig = defaultEditorConfig
14
15
editorConfig.features = [...defaultEditorFeatures, HTMLConverterFeature({})]
16
17
const sanitizedEditorConfig = await sanitizeServerEditorConfig(editorConfig, req.payload.config)
18
19
const html = await convertLexicalToHTML({
20
converters: consolidateHTMLConverters({ editorConfig: sanitizedEditorConfig }),
21
data: siblingData.lexicalSimple,
22
req,
23
})
24
return html
25
}

CSS

Payload's lexical HTML converter does not generate CSS for you, but it does add classes to the generated HTML. You can use these classes to style the HTML in your frontend.

Here is some "base" CSS you can use to ensure that nested lists render correctly:

1
/* Base CSS for Lexical HTML */
2
.nestedListItem, .list-check {
3
list-style-type: none;
4
}

Creating your own HTML Converter

HTML Converters are typed as HTMLConverter, which contains the node type it should handle, and a function that accepts the serialized node from the lexical editor, and outputs the HTML string. Here's the HTML Converter of the Upload node as an example:

1
import type { HTMLConverter } from '@payloadcms/richtext-lexical'
2
3
const UploadHTMLConverter: HTMLConverter<SerializedUploadNode> = {
4
converter: async ({ node, req }) => {
5
const uploadDocument: {
6
value?: any
7
} = {}
8
if(req) {
9
await populate({
10
id,
11
collectionSlug: node.relationTo,
12
currentDepth: 0,
13
data: uploadDocument,
14
depth: 1,
15
draft: false,
16
key: 'value',
17
overrideAccess: false,
18
req,
19
showHiddenFields: false,
20
})
21
}
22
23
const url = (req?.payload?.config?.serverURL || '') + uploadDocument?.value?.url
24
25
if (!(uploadDocument?.value?.mimeType as string)?.startsWith('image')) {
26
// Only images can be serialized as HTML
27
return ``
28
}
29
30
return `<img src="${url}" alt="${uploadDocument?.value?.filename}" width="${uploadDocument?.value?.width}" height="${uploadDocument?.value?.height}"/>`
31
},
32
nodeTypes: [UploadNode.getType()], // This is the type of the lexical node that this converter can handle. Instead of hardcoding 'upload' we can get the node type directly from the UploadNode, since it's static.
33
}

As you can see, we have access to all the information saved in the node (for the Upload node, this is valueand relationTo) and we can use that to generate the HTML.

The convertLexicalToHTML is part of @payloadcms/richtext-lexical automatically handles traversing the editor state and calling the correct converter for each node.

Embedding the HTML Converter in your Feature

You can embed your HTML Converter directly within your custom ServerFeature, allowing it to be handled automatically by the consolidateHTMLConverters function. Here is an example:

1
import { createNode } from '@payloadcms/richtext-lexical'
2
import type { FeatureProviderProviderServer } from '@payloadcms/richtext-lexical'
3
4
export const UploadFeature: FeatureProviderProviderServer<
5
UploadFeatureProps,
6
UploadFeaturePropsClient
7
> = (props) => {
8
/*...*/
9
return {
10
feature: () => {
11
return {
12
nodes: [
13
createNode({
14
converters: {
15
html: yourHTMLConverter, // <= This is where you define your HTML Converter
16
},
17
node: UploadNode,
18
//...
19
}),
20
],
21
ClientComponent: UploadFeatureClientComponent,
22
clientFeatureProps: clientProps,
23
serverFeatureProps: props,
24
/*...*/
25
}
26
},
27
key: 'upload',
28
serverFeatureProps: props,
29
}
30
}

Headless Editor

Lexical provides a seamless way to perform conversions between various other formats:

  • HTML to Lexical (or, importing HTML into the lexical editor)
  • Markdown to Lexical (or, importing Markdown into the lexical editor)
  • Lexical to Markdown

A headless editor can perform such conversions outside of the main editor instance. Follow this method to initiate a headless editor:

1
import { createHeadlessEditor } from '@lexical/headless' // <= make sure this package is installed
2
import { getEnabledNodes, sanitizeServerEditorConfig } from '@payloadcms/richtext-lexical'
3
4
const yourEditorConfig // <= your editor config here
5
const payloadConfig // <= your Payload Config here
6
7
const headlessEditor = createHeadlessEditor({
8
nodes: getEnabledNodes({
9
editorConfig: sanitizeServerEditorConfig(yourEditorConfig, payloadConfig),
10
}),
11
})

Getting the editor config

As you can see, you need to provide an editor config in order to create a headless editor. This is because the editor config is used to determine which nodes & features are enabled, and which converters are used.

To get the editor config, simply import the default editor config and adjust it - just like you did inside of the editor: lexicalEditor({}) property:

1
import { defaultEditorConfig, defaultEditorFeatures } from '@payloadcms/richtext-lexical' // <= make sure this package is installed
2
3
const yourEditorConfig = defaultEditorConfig
4
5
// If you made changes to the features of the field's editor config, you should also make those changes here:
6
yourEditorConfig.features = [
7
...defaultEditorFeatures,
8
// Add your custom features here
9
]

Getting the editor config from an existing field

If you have access to the sanitized collection config, you can get access to the lexical sanitized editor config & features, as every lexical richText field returns it. Here is an example how you can get it from another field's afterRead hook:

1
import type { CollectionConfig, RichTextField } from 'payload'
2
import { createHeadlessEditor } from '@lexical/headless'
3
import type { LexicalRichTextAdapter, SanitizedServerEditorConfig } from '@payloadcms/richtext-lexical'
4
import {
5
getEnabledNodes,
6
lexicalEditor
7
} from '@payloadcms/richtext-lexical'
8
9
export const MyCollection: CollectionConfig = {
10
slug: 'slug',
11
fields: [
12
{
13
name: 'text',
14
type: 'text',
15
hooks: {
16
afterRead: [
17
({ value, collection }) => {
18
const otherRichTextField: RichTextField = collection.fields.find(
19
(field) => 'name' in field && field.name === 'richText',
20
) as RichTextField
21
22
const lexicalAdapter: LexicalRichTextAdapter =
23
otherRichTextField.editor as LexicalRichTextAdapter
24
25
const sanitizedServerEditorConfig: SanitizedServerEditorConfig =
26
lexicalAdapter.editorConfig
27
28
const headlessEditor = createHeadlessEditor({
29
nodes: getEnabledNodes({
30
editorConfig: sanitizedServerEditorConfig,
31
}),
32
})
33
34
// Do whatever you want with the headless editor
35
36
return value
37
},
38
],
39
},
40
},
41
{
42
name: 'richText',
43
type: 'richText',
44
editor: lexicalEditor({
45
features,
46
}),
47
}
48
]
49
}

HTML => Lexical

Once you have your headless editor instance, you can use it to convert HTML to Lexical:

1
import { $generateNodesFromDOM } from '@lexical/html'
2
import { $getRoot, $getSelection } from 'lexical'
3
import { JSDOM } from 'jsdom'
4
5
headlessEditor.update(
6
() => {
7
// In a headless environment you can use a package such as JSDom to parse the HTML string.
8
const dom = new JSDOM(htmlString)
9
10
// Once you have the DOM instance it's easy to generate LexicalNodes.
11
const nodes = $generateNodesFromDOM(headlessEditor, dom.window.document)
12
13
// Select the root
14
$getRoot().select()
15
16
// Insert them at a selection.
17
const selection = $getSelection()
18
selection.insertNodes(nodes)
19
},
20
{ discrete: true },
21
)
22
23
// Do this if you then want to get the editor JSON
24
const editorJSON = headlessEditor.getEditorState().toJSON()

Functions prefixed with a $ can only be run inside an editor.update() or editorState.read() callback.

This has been taken from the lexical serialization & deserialization docs.

Markdown => Lexical

Convert markdown content to the Lexical editor format with the following:

1
import { $convertFromMarkdownString } from '@lexical/markdown'
2
import { sanitizeServerEditorConfig } from '@payloadcms/richtext-lexical'
3
4
const yourSanitizedEditorConfig = sanitizeServerEditorConfig(yourEditorConfig, payloadConfig) // <= your editor config & Payload Config here
5
const markdown = `# Hello World`
6
7
headlessEditor.update(
8
() => {
9
$convertFromMarkdownString(markdown, yourSanitizedEditorConfig.features.markdownTransformers)
10
},
11
{ discrete: true },
12
)
13
14
// Do this if you then want to get the editor JSON
15
const editorJSON = headlessEditor.getEditorState().toJSON()

Lexical => Markdown

Export content from the Lexical editor into Markdown format using these steps:

  1. Import your current editor state into the headless editor.
  2. Convert and fetch the resulting markdown string.

Here's the code for it:

1
import { $convertToMarkdownString } from '@lexical/markdown'
2
import { sanitizeServerEditorConfig } from '@payloadcms/richtext-lexical'
3
import type { SerializedEditorState } from 'lexical'
4
5
const yourSanitizedEditorConfig = sanitizeServerEditorConfig(yourEditorConfig, payloadConfig) // <= your editor config & Payload Config here
6
const yourEditorState: SerializedEditorState // <= your current editor state here
7
8
// Import editor state into your headless editor
9
try {
10
headlessEditor.setEditorState(headlessEditor.parseEditorState(yourEditorState)) // This should commit the editor state immediately
11
} catch (e) {
12
logger.error({ err: e }, 'ERROR parsing editor state')
13
}
14
15
// Export to markdown
16
let markdown: string
17
headlessEditor.getEditorState().read(() => {
18
markdown = $convertToMarkdownString(yourSanitizedEditorConfig?.features?.markdownTransformers)
19
})

The .setEditorState() function immediately updates your editor state. Thus, there's no need for the discrete: true flag when reading the state afterward.

Lexical => Plain Text

Export content from the Lexical editor into plain text using these steps:

  1. Import your current editor state into the headless editor.
  2. Convert and fetch the resulting plain text string.

Here's the code for it:

1
import type { SerializedEditorState } from 'lexical'
2
import { $getRoot } from 'lexical'
3
4
const yourEditorState: SerializedEditorState // <= your current editor state here
5
6
// Import editor state into your headless editor
7
try {
8
headlessEditor.setEditorState(headlessEditor.parseEditorState(yourEditorState)) // This should commit the editor state immediately
9
} catch (e) {
10
logger.error({ err: e }, 'ERROR parsing editor state')
11
}
12
13
// Export to plain text
14
const plainTextContent =
15
headlessEditor.getEditorState().read(() => {
16
return $getRoot().getTextContent()
17
}) || ''
Next

Lexical Migration

On this page
Star on GitHub

Star

Chat on Discord

Discord

online