Plugin Components

By default, Plate plugins are headless, meaning all nodes will be rendered as plain text. This guide will show you how to create and style custom components for your editor.

Plate UI

Unless you prefer to build everything from scratch, we recommend using Plate UI to get started. Plate UI is a collection of components that you can copy into your app and modify to suit your needs.

In most respects, the process of adding components to your editor is the same regardless of whether you use Plate UI or build your own components from scratch.

Defining Components

The simplest way of defining a component is using PlateElement or PlateLeaf as a wrapper for your content. This will ensure that the correct props are applied to your HTML element as required by Slate.

Note that the children prop must be rendered unconditionally in order for the editor to work correctly, including for void nodes.

Element

import { PlateElement, PlateElementProps } from '@udecode/plate-common/react';
 
export function BlockquoteElement({
  className,
  children,
  ...props
}: PlateElementProps) {
  return (
    <PlateElement asChild className={className} {...props}>
      <blockquote>{children}</blockquote>
    </PlateElement>
  );
}

Leaf

import { PlateLeaf, PlateLeafProps } from '@udecode/plate-common/react';
 
export function CodeLeaf({ className, children, ...props }: PlateLeafProps) {
  return (
    <PlateLeaf asChild className={className} {...props}>
      <code>{children}</code>
    </PlateLeaf>
  );
}

Styling with CSS

We recommend styling components using Tailwind CSS, which is the pattern used by Plate UI. However, it's also possible to use a global CSS file to style nodes based on the class names generated by Slate.

For each node, Slate will generate a class name with slate- followed by the type of the node. For example, paragraph nodes can be styled as follows:

.slate-p {
  margin-bottom: 1rem;
}

Register Components

To use your components with Plate, you'll need to register them with the associated plugin. There are two ways of doing so.

Plugin Options

To register a component, use node.component option:

const ParagraphPlugin = createPlatePlugin({
  // ... 
  node: {
    component: ParagraphElement,
  },
});
 
// OR
const ParagraphPlugin = BaseParagraphPlugin.withComponent(ParagraphElement)

Editor Options

Alternatively, you can specify the component for each plugin key using the override.components option of createPlateEditor:

const editor = createPlateEditor({
  plugins: [ParagraphPlugin, LinkPlugin],
  override: {
    components: {
      [ParagraphPlugin.key]: ParagraphElement,
      [LinkPlugin.key]: LinkElement,
      // ...other components
    },
  },
});