HTML serializer arbitrary node trees (Vite SPA)

[AchrafBn]

Hello,
Is there a way to serialize a Plate node to an HTML string when the value changes?

Here is a simple example of my code

I couldn’t find any example using Vite in the documentation.
Any help would be appreciated

React version
19.2
Plate version
52.0.10

[dosubot[bot]]

Hi @AchrafBn! I'm Dosu and I’m helping the plate team.

Yes, you can serialize a Plate node tree to an HTML string on value change in a Vite SPA. Plate provides a serializeHtml utility for this. There are no Vite-specific issues—just use the standard Plate/React APIs.

Here’s a minimal example for Plate v52 and React 19:

import React, { useCallback } from "react";
import { Plate, usePlateEditor } from "platejs/react";
import { H1Plugin, ParagraphPlugin } from "@platejs/basic-nodes/react";
import { serializeHtml } from "platejs";

const initialValue = [
  { type: "h1", children: [{ text: "Heading" }] },
  { type: "p", children: [{ text: "Paragraph" }] },
];

export default function MyEditor() {
  const editor = usePlateEditor({
    plugins: [H1Plugin, ParagraphPlugin],
    value: initialValue,
  });

  const handleChange = useCallback(
    async ({ value }) => {
      if (editor) {
        const html = await serializeHtml(editor, { value });
        console.log(html); // Do what you need with the HTML string
      }
    },
    [editor]
  );

  return (
    <Plate editor={editor} onChange={handleChange}>
      {/* ...your editor UI... */}
    </Plate>
  );
}

You can customize the output by passing a custom static component or props to serializeHtml if needed, but for most cases, the default is enough. This approach works the same in Vite as in any other React setup. See more details in the Plate HTML serialization docs.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}