Can't get node.type using Slate serialize

default discord avatar
last month

I've been trying to work out how to use serialize from the default Payload configuration for the Slate rich text editor, but I can't get node.type, so all my elements default to a <p>.

Here's our serialize.tsx:

import React, { Fragment } from 'react';
import escapeHTML from 'escape-html';
import { Text } from 'slate';

const serialize = (children): React.ReactElement[] =>, i) => {
    if (Text.isText(node)) {
      let text = escapeHTML(node.text);

      // @ts-expect-error must add better types for node
      if (node.bold) {
        text = <strong key={i}>{text}</strong>;

      return <Fragment key={i}>{text}</Fragment>;

    if (!node) {
      return null;

    switch (node.type) {
      case 'h1':
        return <h1 key={i}>{serialize(node.children)}</h1>;
      case 'h6':
        return <h6 key={i}>{serialize(node.children)}</h6>;
      case 'ul':
        return <ul key={i}>{serialize(node.children)}</ul>;
      case 'li':
        return <li key={i}>{serialize(node.children)}</li>;

        return <p key={i}>{serialize(node.children)}</p>;

export default serialize;

The database seems to be storing the Content fine, but it's ignoring the 'type' from the parent objects when serializing and just rendering everything inside the children.

Any idea on what am I missing? Thank you!

Original message from @chus_asensio - Moved from (in #1138194595537236009)
  • discord user avatar
    Payload Team
    last month

    Can't get node.type using Slate serialize

  • default discord avatar
    last month

    Sorry, my bad. We're using ZOD and the content retreived was being filtered, and no properties like 'type' were showing. We have it working now.

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!


Connect with the Payload Community on Discord



Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.