Skip to main content

Basic Plugins

note

The following undeclared variables and types are imported from @udecode/plate.

This guide will use existing plugins.

If you don't provide any plugins to Plate as done in the previous section, createReactPlugin(), createHistoryPlugin() and other core plugins will be used as default.

Plugins#

Let's create the initial value and the basic element and mark plugins.

note

Plate is using the type property so a plugin can render a node by type.

Live Editor
Result

Everything actually works, but we didn't provide any components to render, so it's using the default (unstyled) ones. The default element component is a div and the default leaf component is a span.

info

Plate plugins are bundled without any default component, meaning that you're in full control over markup and styling so you can plug-in your own design system or the provided one (see next section).

Components#

To plug all the components at once, you can use createPlugins:

  • first param: set the plugins
  • second param: set the components. In the following example we'll use createPlateUI(), which returns all Plate components by key.
Live Editor
Result

Voilà!

Plate enforces decoupled structures, you can read the next sections to learn more about the API.