Components
Image Element

Image Element

Image element with lazy loading, resizing capabilities, and optional caption.

MediaBlock SelectionButtonDropdown MenuImage PreviewMedia ToolbarPlate ElementSeparatorSpinnerToolbarTooltip

Installation

Install the following dependencies:

npm install @udecode/plate-media @udecode/plate-resizable react-lazy-load-image-component @udecode/plate-caption @udecode/plate-selection @radix-ui/react-dropdown-menu @radix-ui/react-toolbar @radix-ui/react-tooltip @radix-ui/react-separator @radix-ui/react-slot

Copy and paste the following code into your project.

Get the code ->

Update the import paths to match your project setup.

Examples

Upload

Get the code ->

Upload Files

Our editor supports various media types for upload, including images, videos, audio, and files.
Use the backslash (/) to insert the upload.

Images

  • Type "/image" to insert the image.
  • Upload by clicking the button or use "Embed link" to insert a URL.
  • Resize images using the vertical edge bars.
  • Use top-right corner options to: align, caption, expand, download, or modify the block.


Videos

  • Type "/video" to insert the video.
  • Upload or embed a video URL.
  • Resize videos using the vertical edge bars.
  • Use top-right corner options to: align, caption, view original, or modify the block.


Audio

  • Type "/audio" to insert the audio.
  • Upload or embed an audio URL.
  • Use the top-right corner to access the block menu and modify the audio block.


Files

  • Type "/file" to insert the file.
  • Upload or embed a file URL.
  • Use the top-right corner to access the block menu and modify the file block.
sample.pdf

You can upload multiple files simultaneously to boost your productivity!

Media Toolbar

Get the code ->

Media Toolbar

The media toolbar provides tools for managing and customizing media elements in your document.
How to use the media toolbar:
  • Hover over the image to reveal the controller buttons at the top right corner.
  • Click on the alignment icon to adjust the positioning of the media.
  • Use the caption button to add or edit the media caption.
  • Click on the download button to download the media.
  • Use the preview button to view the media in full size.
  • Open the block menu by clicking on the three dots.

You can resize the image by dragging the handles on the left and right sides. The caption will automatically adjust to match the image width.
Horizontal Rule ElementImage Preview