Command Palette

Search for a command to run...

Node.js

Install and configure Plate for Node.js

This guide demonstrates how to use Plate in a Node.js environment. This is useful for backend tasks such as data processing, content migration, validation, or any scenario where you need to interact with Plate editor content without a browser or a full React frontend.

Key Node.js Constraint

When using Plate in a Node.js environment, you must not import from /react subpaths of any @udecode/plate* package. Always use the base imports (e.g., @udecode/plate-basic-elements instead of @udecode/plate-basic-elements/react).

This means you cannot use createPlateEditor from @udecode/plate/react. Instead, use createSlateEditor from @udecode/plate.

Install Plate

Install the core Plate package and any specific plugin packages required for your data processing needs.

npm add @udecode/plate

Create an Editor Instance

In your Node.js script, use createSlateEditor from @udecode/plate to initialize an editor instance. This function is framework-agnostic and doesn't depend on React or browser APIs.

scripts/process-content.ts
import { createSlateEditor } from '@udecode/plate';
import { BaseHeadingPlugin } from '@udecode/plate-heading';
import { MarkdownPlugin, remarkMdx } from '@udecode/plate-markdown';
import remarkGfm from 'remark-gfm';
// ... import other base plugins (NOT from /react paths)
 
async function processDocument(value: any[]) {
  const editor = createSlateEditor({
    plugins: [
      BaseHeadingPlugin,
      MarkdownPlugin.configure({
        options: {
          remarkPlugins: [remarkGfm, remarkMdx],
        },
      }),
      // ... add other base plugins relevant to your content structure
    ],
    value, // Assign the Slate content to the editor
  });
 
  // Perform operations using editor.api or editor.tf
  const textContent = editor.api.string([]);
  console.log('Extracted Text:', textContent);
 
  const markdownContent = editor.api.markdown.serialize();
  console.log('Serialized Markdown:', markdownContent);
 
  // Example: Transform all H1s to H2s
  editor.tf.setNodes(
    { type: 'h2' },
    { at: [], match: (n) => n.type === 'h1' }
  );
  console.log('Transformed Value:', editor.children);
 
  return { textContent, markdownContent, transformedValue: editor.children };
}
 
// Example usage:
const mySlateValue = [
  { type: 'h1', children: [{ text: 'Original Document Title' }] },
  { type: 'p', children: [{ text: 'Some paragraph content.' }] },
];
 
processDocument(mySlateValue).then(result => {
  console.log('Processing complete.', result);
});

Content Manipulation

The primary use case for Plate in Node.js is programmatic content manipulation:

  • editor.api: Access various utility functions for querying the editor state. For example:

  • editor.tf: Use transform functions to modify the editor content. For example:

    • editor.tf.insertNodes(nodes, opts): Insert new nodes.
    • editor.tf.removeNodes(opts): Delete nodes.
    • editor.tf.setNodes(props, opts): Update properties of existing nodes.
    • editor.tf.normalize({ force: true }): Normalize the editor.

Next Steps

With Plate configured in your Node.js environment, you can now:

  • Build scripts for migrating content from other systems into Plate format.
  • Perform bulk updates or transformations on your existing Plate documents.
  • Validate content structure or extract specific data from your documents.
  • Integrate with other backend services for content processing pipelines.
  • Explore Markdown Serialization, HTML Serialization, and PlateStatic if you need to generate static content.
RSCLocal Docs