Plugin Components

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

Plate UI

Unless you would 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. Read on to find out how.

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';
 
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';
 
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 inside the plugin factory or at the point of use, use the component option.

const createParagraphPlugin = createPluginFactory({
  // ... 
  component: ParagraphElement,
});
 
// OR
 
const plugins = createPlugins([
  createParagraphPlugin({
    component: ParagraphElement
  })
])

Components Option

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

const plugins = createPlugins([
  createParagraphPlugin(),
], {
  components: {
    [ELEMENT_PARAGRAPH]: ParagraphElement,
    [ELEMENT_LINK]: LinkElement,
    // ...other components
  },
});