Installation
npx shadcn@latest add https://platejs.org/r/resize-handle
Examples
Image
Add images by either uploading them or providing the image URL:
Customize image captions and resize images.
Upload
Our editor supports various media types for upload, including images, videos, audio, and files.
- Real-time upload status and progress tracking
- Configurable file size limits and batch upload settings
- Clear error messages for any upload issues
- Try it now - drag an image from your desktop or click the upload button in the toolbar
Embed
Embed various types of content, such as videos and tweets:
1
100%
Files
components/demo.tsx
'use client';
import * as React from 'react';
import { Plate, usePlateEditor } from 'platejs/react';
import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';
import { DEMO_VALUES } from './values/demo-values';
export default function Demo({ id }: { id: string }) {
const editor = usePlateEditor({
plugins: EditorKit,
value: DEMO_VALUES[id],
});
return (
<Plate editor={editor}>
<EditorContainer variant="demo">
<Editor />
</EditorContainer>
</Plate>
);
}
Plate Plus
- Integration with UploadThing
- Use slash commands for quick insertion
- Displays clickable placeholders for various media types (image, video, audio, file)
- Opens a popover with two tabs when the placeholder is clicked:
- Upload tab: Allows uploading local files directly
- Embed tab: Enables pasting embed links for media content
- Image-specific features:
- Better loading rendering and image replacement
- Alignment options
- Expand/collapse view
- Download button
- Video-specific features:
- Lazy load
- Alignment options
- Caption support
- View original source
- Floating toolbar appears at the top right of media elements:
- Alignment dropdown menu
- Caption button
- Expand button
- Download button
- Beautifully crafted UI