Components
Image Element

Image Element

Displays an image element with lazy loading, resizing capabilities, and an optional caption.

API ReferenceBlock SelectionButtonDropdown MenuMedia ToolbarPlate ElementToolbarTooltip
Get the code ->

Upload Files

Our editor supports four versatile media types for upload:
  • Images: Enhance your content with visuals (.jpg, .png, .jpeg)


  • Videos: Embed engaging video content (.mp4)


  • Audio: Add sound clips or music (.mp3)


  • Documents: Share various file types (.pdf, .docx, etc.)

sample.pdf

Three Easy Ways to Upload:
  1. Drag and Drop: Simply drag files from your computer into the editor
  1. Upload Button: Use the dedicated upload button in the toolbar
  1. Paste from Clipboard: For images, copy and paste directly into the editor
Pro tip: Boost your productivity by uploading multiple files simultaneously!
Try it out:
  • Drag an image from your desktop into this editor
  • Click the upload button (usually a cloud or arrow icon) and choose a file
  • Copy an image to your clipboard, then paste it here (Ctrl+V or Cmd+V)
Advanced Features for Power Users:
  • File Type Restrictions: Configure allowed file types for your specific use case
  • Custom Upload Handlers: Implement your own logic for file processing and storage
  • Progress Indicators: Add visual feedback for large file uploads
  • Image Optimization: Automatically compress and resize images for optimal performance

Installation

Install the following dependencies:

npm install @udecode/plate-media @udecode/plate-resizable @udecode/plate-caption @udecode/plate-selection @radix-ui/react-dropdown-menu @radix-ui/react-toolbar @radix-ui/react-slot @radix-ui/react-tooltip

Copy and paste the following code into your project.

Get the code ->

Update the import paths to match your project setup.

Horizontal Rule ElementIndent Todo Marker