Node Components
AI Leaf
A text highlighter for AI-generated content.
Blockquote Element
A quote component for block quotes.
Code Block Element
A code block with syntax highlighting and language selection.
Code Leaf
An inline component for code snippets.
Code Line Element
A line component for code blocks.
Code Syntax Leaf
A syntax highlighting component for code blocks.
Column Element
A resizable column component for layout.
Column Group Element
A resizable column component for layout.
Comment Leaf
A text component for displaying comments with visual indicators.
Date Element
A date field component with calendar picker.
Emoji Input Element
An input component for emoji search and insertion.
Excalidraw Element
A drawing component powered by Excalidraw.
Heading Element
A heading with multiple level support.
Highlight Leaf
A text highlighter with customizable colors.
Horizontal Rule Element
A horizontal rule component with focus states.
Image Element
Image element with lazy loading, resizing capabilities, and optional caption.
Image Preview
A modal component for previewing and manipulating images.
Kbd Leaf
A component for styling keyboard shortcuts.
Link Element
A component for rendering hyperlinks with hover states.
List Element
A list element for ordered and unordered items.
Media Audio Element
An audio player component with caption support.
Media Embed Element
A component for embedded media content with resizing and caption support.
Media File Element
A file attachment component with download capability and caption.
Media Placeholder Element
A placeholder for media upload progress indication.
Media Video Element
A video player component with YouTube and file upload support.
Mention Element
A mention element with customizable prefix and label.
Mention Input Element
An input component for user mentions with autocomplete.
Paragraph Element
A paragraph block with background color support.
Search Highlight Leaf
A component that highlights search results in text.
Slash Input Element
A command input component for inserting various elements.
Table Cell Element
A table cell with resizable borders and selection.
Table Element
A table component with floating toolbar and border customization.
Table Row Element
A table row component with optional border hiding.
Tag Element
A tag element component with selection states and styling.
TOC Element
A table of contents component with links to document headings.
Todo List Element
A checkbox list element with interactive todo items.
Toggle Element
A collapsible component for toggling content visibility.
Components
AI Menu
A menu for AI-powered content generation and insertion.
AI Toolbar Button
A toolbar button for accessing AI features.
Align Dropdown Menu
A dropdown menu for text alignment controls.
Block Context Menu
A context menu for block-level operations.
Block Selection
A visual overlay for selected blocks.
Export Toolbar Button
A toolbar button to export editor content as PDF.
Caption
A text field for adding captions to media elements.
Color Dropdown Menu
A color picker with text and background color controls.
Comment Toolbar Button
A toolbar button for adding inline comments.
Comments Popover
A popover interface for managing comments and replies.
Cursor Overlay
A visual overlay for cursors and selections.
Draggable
A drag handle for moving editor blocks.
Editor
A container for the editor content and styling.
Select Editor
An editor to select tags.
Emoji Dropdown Menu
A dropdown menu for emoji selection and insertion.
Fixed Toolbar Buttons
A set of commonly used formatting buttons.
Fixed Toolbar
A fixed toolbar that stays at the top of the editor.
Floating Toolbar Buttons
A set of formatting buttons for the floating toolbar.
Floating Toolbar
A contextual toolbar that appears over selected text.
Ghost Text
A text suggestion system that displays AI-generated content after the cursor.
History Toolbar Button
Toolbar buttons for undo and redo operations.
Indent List Toolbar Button
A toolbar control for adjusting list indentation.
Indent Todo Marker
A checkbox marker for interactive todo lists.
Indent Todo Toolbar Button
A toolbar control for creating todo list items.
Indent Toolbar Button
A toolbar control for block indentation.
Inline Combobox
A combobox for inline suggestions.
Insert Dropdown Menu
A menu for inserting different types of blocks.
Line Height Dropdown Menu
A menu for controlling text line spacing.
Link Floating Toolbar
A floating interface for link editing.
Link Toolbar Button
A toolbar control for link management.
List Indent Toolbar Button
A toolbar control for indenting lists.
List Toolbar Button
A toolbar control for list creation and management.
Mark Toolbar Button
A toolbar control for basic text formatting.
Media Popover
A popover interface for media settings.
Media Toolbar Button
Toolbar button for inserting and managing media.
Media Upload Toast
Show toast notifications for media uploads.
Mode Dropdown Menu
A menu for switching between editor modes.
More Dropdown Menu
A menu for additional text formatting options.
Outdent Toolbar Button
A toolbar button for decreasing block indentation.
Placeholder
A text placeholder for empty editor blocks.
Plate Element
A base element with block selection support.
Resizable
A resizable wrapper with resize handles.
Table Dropdown Menu
A menu for table manipulation and formatting.
Toggle Toolbar Button
A toolbar button for expanding and collapsing blocks.
Turn Into Dropdown Menu
A menu for converting between different block types.
Primitives
Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
Avatar
An image element with a fallback for representing the user.
Button
Displays a button or a component that looks like a button.
Calendar
A date field component that allows users to enter and edit date.
Checkbox
A control that allows the user to toggle between checked and not checked.
Command
Fast, composable, unstyled command menu for React.
Context Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
Dialog
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Dropdown Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
Form
Building forms with React Hook Form and Zod.
Input
Displays a form input field or a component that looks like an input field.
Label
Renders an accessible label associated with controls.
Popover
Displays rich content in a portal, triggered by a button.
Separator
Visually or semantically separates content.
Toolbar
A customizable toolbar component with various button styles and group
Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Spinner
A loading spinner component with size variants.
Remote Cursor Overlay
A cursor overlay to display multiplayer cursors in the yjs plugin.