Command Palette

Search for a command to run...

RSC

Install and configure Plate for React Server Components

This guide demonstrates how to use Plate in React Server Components (RSC) for tasks like static content generation or server-side data processing. Plate's core is designed to be server-safe, allowing you to work with editor content without a browser environment.

Key RSC Constraint

When using Plate in RSC, 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 you need.

npm add @udecode/plate

Create an Editor Instance

In an RSC environment, you use createSlateEditor from @udecode/plate to initialize an editor instance. This function doesn't rely on React hooks or client-side specific code.

Here's an example demonstrating how to set up an editor with various plugins, similar to the Server-Side Example:

app/api/generate-doc/route.ts
import { createSlateEditor } from '@udecode/plate';
import { BaseAlignPlugin } from '@udecode/plate-alignment';
import { BaseAutoformatPlugin } from '@udecode/plate-autoformat';
import {
  BaseBoldPlugin,
  BaseCodePlugin,
  BaseItalicPlugin,
  // ... other basic mark plugins
} from '@udecode/plate-basic-marks';
import { BaseBlockquotePlugin } from '@udecode/plate-block-quote';
// ... import many other base plugins (NOT from /react paths)
import { BaseHeadingPlugin } from '@udecode/plate-heading';
import { MarkdownPlugin, remarkMdx } from '@udecode/plate-markdown';
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';
 
// Example initial value
const initialValue = [
  { type: 'h1', children: [{ text: 'Server-Generated Document' }] },
  { type: 'p', children: [{ text: 'This content was processed on the server.' }] },
  { type: 'p', children: [{ text: 'And this is bold.', bold: true }] },
];
 
// Create the editor instance
const editor = createSlateEditor({
  plugins: [
    // Element plugins
    BaseHeadingPlugin,
    BaseBlockquotePlugin,
    BaseAlignPlugin,
    // ... add more element plugins as needed
 
    // Mark plugins
    BaseBoldPlugin,
    BaseItalicPlugin,
    BaseCodePlugin,
    // ... add more mark plugins
 
    // Functionality plugins
    BaseAutoformatPlugin,
    MarkdownPlugin.configure({ // For serialization example
      options: {
        remarkPlugins: [remarkMath, remarkGfm, remarkMdx],
      },
    }),
    // ... add other functional plugins
  ],
  value: initialValue, // Set initial content
});
 
// You can now use editor.children, editor.api, editor.tf, etc.
// For example, to get the text content:
const textContent = editor.api.string([]);
// console.log('Text Content:', textContent);
 
// Or to serialize to Markdown:
const markdown = editor.api.markdown.serialize();
// console.log('Markdown Output:', markdown);
 
// The editor instance can be used for various server-side tasks.
// For a complete example of using this in an RSC page for rendering,
// see the /docs/examples/server-side page.

createSlateEditor creates a raw Slate editor instance. It's suitable for server-side logic, data transformation, or preparing content for static rendering. Check out the full Server-Side Example to see it in action.

Content Manipulation

The primary use case for Plate in RSC 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 RSC environment, you can now:

  • Build server-side content generation and transformation pipelines.
  • 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.
  • Explore Markdown Serialization, HTML Serialization, and PlateStatic if you need to generate static content.
ManualNode.js