Components
Draggable

Draggable

A drag and drop system for reordering blocks with visual indicators.

Drag & DropBlock MenuBlock Menu ItemsButtonColor Dropdown MenuDropdown MenuInputMenuPopoverSeparatorSpinnerToolbarTooltipTurn Into Dropdown Menu

Installation

Install the following dependencies:

npm install @udecode/plate-dnd @udecode/plate-selection react-dnd react-dnd-html5-backend @udecode/plate-ai @udecode/plate-caption @udecode/plate-comments @udecode/plate-font @udecode/plate-media @radix-ui/react-toolbar @radix-ui/react-tooltip @radix-ui/react-separator @radix-ui/react-dropdown-menu @udecode/plate-block-quote @udecode/plate-callout @udecode/plate-code-block @udecode/plate-heading @udecode/plate-indent-list @udecode/plate-toggle @udecode/plate-date @udecode/plate-layout @udecode/plate-math @udecode/plate-table @ariakit/[email protected] @radix-ui/react-slot @radix-ui/react-popover

Copy and paste the following code into your project.

Get the code ->

Update the import paths to match your project setup.

Examples

Basic Nodes

Get the code ->

🌳 Blocks

Easily create headings of various levels, from H1 to H6, to structure your content and make it more organized.
Create blockquotes to emphasize important information or highlight quotes from external sources.
// Use code blocks to showcase code snippets
function greet() {
  console.info('Hello World!');
}

🌱 Marks

Add style and emphasis to your text using the mark plugins, which offers a variety of formatting options.
Make text bold, italic, underlined, or apply a combination of these styles for a visually striking effect.
Add strikethrough to indicate deleted or outdated content.
Write code snippets with inline code formatting for easy readability.
Cursor OverlayEditor