# yoopta-editor/yoopta-editor

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/yoopta-editor-yoopta-editor).**

2,733 stars · 204 forks · TypeScript · mit

## Links

- GitHub: https://github.com/yoopta-editor/Yoopta-Editor
- Homepage: https://yoopta.dev/
- awesome-repositories: https://awesome-repositories.com/repository/yoopta-editor-yoopta-editor.md

## Topics

`contenteditable` `editor` `hacktoberfest` `javascript` `notion` `notion-alternative` `notion-editor` `react` `rich-text` `rich-text-editor` `slate` `wysiwyg` `wysiwyg-editor`

## Description

Yoopta-Editor is a headless framework for building customizable block-based rich text editors. It utilizes a JSON-based document engine to manage editor state and provides a WYSIWYG interface for creating structured documents. The system separates core document logic from the visual layer, allowing for complete customization of the user interface.

The framework is designed for real-time collaborative editing, featuring a synchronization engine with conflict resolution and remote cursor presence tracking. It offers a highly extensible plugin system that allows developers to define new content blocks, text marks, and custom rendering logic.

The editor supports a wide array of structured content, including tables, syntax-highlighted code blocks, LaTeX mathematical expressions, and embedded media. It includes comprehensive serialization tools to export content into HTML, Markdown, plain text, and email-compatible formats.

The interface includes interactive elements such as slash-command menus, floating formatting toolbars, and drag-and-drop block reordering. Visual appearance can be standardized or modified through a component-based theme mapping system and CSS variable overrides.

## Tags

### Software Engineering & Architecture

- [Block-Based Data Models](https://awesome-repositories.com/f/software-engineering-architecture/block-based-data-models.md) — Utilizes a structured hierarchy of independent content blocks and inline elements as the core data model.
- [Plugin-Based Editor Extensibility](https://awesome-repositories.com/f/software-engineering-architecture/plugin-based-editor-extensibility.md) — Implements a highly extensible plugin system for defining custom content blocks and editor behavior. ([source](https://docs.yoopta.dev/core/plugins.md))
- [Headless Architectures](https://awesome-repositories.com/f/software-engineering-architecture/headless-architectures.md) — Decouples document state and logic from the visual layer to allow fully custom UI implementations.
- [JSON-Based Document Engines](https://awesome-repositories.com/f/software-engineering-architecture/json-based-document-engines.md) — Utilizes a JSON-based document engine to manage editor state and facilitate multi-format serialization.
- [Hook-Based Plugin Systems](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/plugin-module-systems/modular-plugin-architectures/plugin-based-architectures/hook-based-plugin-systems.md) — Uses a registry of plugins and lifecycle hooks to define new block types and commands.
- [Sync Conflict Resolution](https://awesome-repositories.com/f/software-engineering-architecture/sync-conflict-resolution.md) — Ensures state convergence across multiple users using conflict-resolution mechanisms for real-time synchronization.
- [Undo-Redo Management](https://awesome-repositories.com/f/software-engineering-architecture/undo-redo-management.md) — Implements a history stack for the reversion and reapplication of document changes via undo and redo operations. ([source](https://docs.yoopta.dev/api-reference/editor.md))
- [Plugin Extenders](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/extensibility/plugin-architectures/developer-authoring-interfaces/custom-module-implementations/module-functionality-extenders/plugin-extenders.md) — Allows for the creation of complex content structures through nested and extended plugins. ([source](https://docs.yoopta.dev/introduction.md))

### User Interface & Experience

- [Block Editor Compositions](https://awesome-repositories.com/f/user-interface-experience/block-editor-compositions.md) — Provides a framework for assembling customizable editors by registering structured content blocks and widgets.
- [Content Block Editors](https://awesome-repositories.com/f/user-interface-experience/content-block-editors.md) — Provides contextual floating buttons and menus for managing and transforming structured content blocks. ([source](https://docs.yoopta.dev/ui/block-options.md))
- [Block Data Retrieval](https://awesome-repositories.com/f/user-interface-experience/content-block-editors/block-data-retrieval.md) — Implements efficient fetching of block metadata and internal content via IDs or positional indices. ([source](https://docs.yoopta.dev/api-reference/blocks.md))
- [Block Merging Operations](https://awesome-repositories.com/f/user-interface-experience/content-block-editors/block-merging-operations.md) — Provides the ability to combine a source block into a target block while preserving content. ([source](https://docs.yoopta.dev/api-reference/blocks.md))
- [Block Nesting Management](https://awesome-repositories.com/f/user-interface-experience/content-block-editors/block-nesting-management.md) — Allows users to increase or decrease block depth to create visually nested hierarchies. ([source](https://docs.yoopta.dev/api-reference/blocks.md))
- [Block Order Management](https://awesome-repositories.com/f/user-interface-experience/content-block-editors/block-order-management.md) — Allows changing a block's position within the document by assigning a new order index. ([source](https://docs.yoopta.dev/api-reference/blocks.md))
- [Block Splitting Operations](https://awesome-repositories.com/f/user-interface-experience/content-block-editors/block-splitting-operations.md) — Enables the division of a single block into two separate blocks at the current cursor position. ([source](https://docs.yoopta.dev/api-reference/blocks.md))
- [Block Type Conversion](https://awesome-repositories.com/f/user-interface-experience/content-block-editors/block-type-conversion.md) — Allows transforming a block from one type to another while preserving the existing text content. ([source](https://docs.yoopta.dev/api-reference/blocks.md))
- [Editor Plugins](https://awesome-repositories.com/f/user-interface-experience/editor-plugins.md) — Offers an extensible plugin system to define new content blocks, text marks, and rendering logic.
- [Editor UI Components](https://awesome-repositories.com/f/user-interface-experience/editor-ui-components.md) — Provides a set of reusable UI components for building toolbars, menus, and other editor interface elements. ([source](https://docs.yoopta.dev/introduction.md))
- [Focus Management](https://awesome-repositories.com/f/user-interface-experience/focus-management.md) — Provides programmatic control over keyboard focus and interaction states for specific blocks and nodes. ([source](https://docs.yoopta.dev/api-reference/blocks.md))
- [Editor Image Uploaders](https://awesome-repositories.com/f/user-interface-experience/media-uploaders/editor-image-uploaders.md) — Supports adding images via uploads or URLs with resizing and responsiveness controls. ([source](https://docs.yoopta.dev/plugins/image.md))
- [Real-Time Collaborative Editing](https://awesome-repositories.com/f/user-interface-experience/real-time-collaborative-editing.md) — Synchronizes document state across multiple users with remote cursors and real-time conflict resolution. ([source](https://docs.yoopta.dev/core/collaboration.md))
- [Rich Text Editors](https://awesome-repositories.com/f/user-interface-experience/rich-text-editors.md) — Provides a headless framework for building document editors based on a structured block-based data model.
- [Headless Frameworks](https://awesome-repositories.com/f/user-interface-experience/rich-text-editors/headless-frameworks.md) — Separates core document state management and editing logic from the visual presentation layer.
- [Rich Media Document Handling](https://awesome-repositories.com/f/user-interface-experience/rich-text-editors/rich-media-document-handling.md) — Provides a system for integrating non-editable media blocks and metadata within a structured text stream. ([source](https://docs.yoopta.dev/core/plugins.md))
- [Rich Text WYSIWYG Editors](https://awesome-repositories.com/f/user-interface-experience/rich-text-wysiwyg-editors.md) — Provides a visual editing interface for creating structured documents with complex layouts.
- [Text Formatting Tools](https://awesome-repositories.com/f/user-interface-experience/text-formatting-tools.md) — Provides utilities for applying stylistic marks like bold, italic, and underline to text. ([source](https://docs.yoopta.dev/quickstart.md))
- [Collapse Sections](https://awesome-repositories.com/f/user-interface-experience/collapse-sections.md) — Provides interactive accordion blocks that allow users to toggle the visibility of content sections. ([source](https://docs.yoopta.dev/plugins/accordion.md))
- [Theme Mappings](https://awesome-repositories.com/f/user-interface-experience/configuration-driven-layouts/theme-mappings.md) — Maps headless logic to pre-styled UI components through a theme provider for standardized appearance.
- [Custom Block Definitions](https://awesome-repositories.com/f/user-interface-experience/content-block-editors/custom-block-definitions.md) — Allows replacing default paragraph displays with custom components to implement features like character counters. ([source](https://docs.yoopta.dev/plugins/paragraph.md))
- [Content Embedding Tools](https://awesome-repositories.com/f/user-interface-experience/content-embedding-tools.md) — Integrates media from external platforms by detecting URLs and rendering responsive containers. ([source](https://docs.yoopta.dev/plugins/embed.md))
- [Email](https://awesome-repositories.com/f/user-interface-experience/content-serializers/email.md) — Transforms complex editor sections into table-based layouts to ensure consistent rendering across various email clients. ([source](https://docs.yoopta.dev/plugins/accordion.md))
- [Mathematical Expression Serializers](https://awesome-repositories.com/f/user-interface-experience/content-serializers/mathematical-expression-serializers.md) — Serializes mathematical expressions into HTML, Markdown, and email-compatible formats for consistent rendering. ([source](https://docs.yoopta.dev/plugins/math-block.md))
- [Custom Text Marks](https://awesome-repositories.com/f/user-interface-experience/custom-text-marks.md) — Enables the creation of unique text formatting styles with specialized render logic. ([source](https://docs.yoopta.dev/marks/overview.md))
- [Table Rendering Overrides](https://awesome-repositories.com/f/user-interface-experience/data-view-customizers/custom-table-views/table-rendering-overrides.md) — Supports the override of default table, row, and cell visuals using custom React components. ([source](https://docs.yoopta.dev/plugins/table.md))
- [Drag-and-Drop Row Reorderers](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-row-reorderers.md) — Implements a visual drag-and-drop interface for rearranging the sequence of content blocks. ([source](https://cdn.jsdelivr.net/gh/yoopta-editor/yoopta-editor@master/README.md))
- [Editor Themes](https://awesome-repositories.com/f/user-interface-experience/editor-themes.md) — Implements CSS-based theme mapping and variable overrides for customizing the visual appearance of the editor.
- [Property Editing Panels](https://awesome-repositories.com/f/user-interface-experience/element-property-inspection/property-editing-panels.md) — Provides a dedicated options panel for editing properties of elements like links and images. ([source](https://docs.yoopta.dev/ui/overview.md))
- [Floating Action Buttons](https://awesome-repositories.com/f/user-interface-experience/floating-action-buttons.md) — Ships action buttons that float above content blocks on hover to provide quick access to context-specific controls. ([source](https://docs.yoopta.dev/ui/floating-block-actions.md))
- [Floating Toolbars](https://awesome-repositories.com/f/user-interface-experience/floating-toolbars.md) — Implements a contextual floating toolbar that appears automatically when text is selected for quick formatting. ([source](https://docs.yoopta.dev/ui/floating-toolbar.md))
- [Photo and Video Uploads](https://awesome-repositories.com/f/user-interface-experience/folder-upload-support/photo-and-video-uploads.md) — Implements the transmission of video files and thumbnails to server-side API endpoints. ([source](https://docs.yoopta.dev/plugins/video.md))
- [Cell Merging](https://awesome-repositories.com/f/user-interface-experience/grid-cell-configurations/cell-merging.md) — Allows for merging, splitting, and clearing of table cells while managing alignment and background colors. ([source](https://docs.yoopta.dev/plugins/table.md))
- [HTML Content Processing](https://awesome-repositories.com/f/user-interface-experience/html-content-processing/html-content-processing.md) — Provides utilities for parsing and synchronizing collapsible blocks between raw HTML and the structured document model. ([source](https://docs.yoopta.dev/plugins/accordion.md))
- [Sequential Instruction Lists](https://awesome-repositories.com/f/user-interface-experience/item-lists/sequential-instruction-lists.md) — Implements numbered, step-by-step lists with the ability to dynamically add or remove instructional items. ([source](https://docs.yoopta.dev/plugins/steps.md))
- [Pluggable Image Uploaders](https://awesome-repositories.com/f/user-interface-experience/media-uploaders/editor-image-uploaders/pluggable-image-uploaders.md) — Allows transmitting image files to specified API endpoints or custom functions for cloud storage. ([source](https://docs.yoopta.dev/plugins/image.md))
- [Image Rendering Overrides](https://awesome-repositories.com/f/user-interface-experience/rich-text-renderers/image-rendering-overrides.md) — Supports replacing the default image block representation with custom React components. ([source](https://docs.yoopta.dev/plugins/image.md))
- [Syntax Highlighters](https://awesome-repositories.com/f/user-interface-experience/syntax-highlighters.md) — Renders code blocks with configurable themes and support for multiple programming languages. ([source](https://docs.yoopta.dev/core/plugins.md))
- [Tabbed Containers](https://awesome-repositories.com/f/user-interface-experience/tabbed-containers.md) — Provides the ability to override the visual layout and appearance of tabbed content containers. ([source](https://docs.yoopta.dev/plugins/tabs.md))
- [Mentioning Systems](https://awesome-repositories.com/f/user-interface-experience/tag-inputs/mentioning-systems.md) — Defines custom visual styles and interactive dropdowns for mentioning entities within the editor. ([source](https://docs.yoopta.dev/plugins/mention.md))
- [CSS Variable Override Themes](https://awesome-repositories.com/f/user-interface-experience/terminal-user-interfaces/visual-styling-presentation/interface-appearance-customization/component-appearance-customizers/application-appearance-customizers/css-variable-override-themes.md) — Utilizes CSS variables and tokens to override the visual appearance and color palette of the interface. ([source](https://docs.yoopta.dev/ui/overview.md))
- [Visual Themes](https://awesome-repositories.com/f/user-interface-experience/visual-theme-configurations/visual-themes.md) — Attaches pre-styled UI components to headless plugins to standardize the application's visual identity. ([source](https://docs.yoopta.dev/core/themes))

### Business & Productivity Software

- [Real-time Collaborative Editors](https://awesome-repositories.com/f/business-productivity-software/team-collaboration-events/collaboration-communication-tools/collaboration-tools/real-time-collaboration/real-time-collaborative-editors.md) — Provides real-time multi-user synchronization of editor state and remote cursor tracking. ([source](https://docs.yoopta.dev/core/collaboration.md))

### Content Management & Publishing

- [Rich Text Authoring](https://awesome-repositories.com/f/content-management-publishing/authoring-editorial-interfaces/content-authoring-editing/document-authoring-tools/rich-text-authoring.md) — Supports creating structured documents with integrated tables, code blocks, and mathematical expressions.
- [Multi-Format Exports](https://awesome-repositories.com/f/content-management-publishing/content-formats-exporting/export-formats/html-exports/multi-format-exports.md) — Exports editor state into multiple distinct formats including HTML, Markdown, plain text, and structured JSON. ([source](https://cdn.jsdelivr.net/gh/yoopta-editor/yoopta-editor@master/README.md))
- [Block Data Schemas](https://awesome-repositories.com/f/content-management-publishing/content-management-systems/content-architecture-modeling/document-models/document-sectioning/document-content-structuring/content-schema-definitions/modular-content-block-definitions/block-data-schemas.md) — Generates structured data objects and metadata schemas for blocks prior to their insertion into the document. ([source](https://docs.yoopta.dev/api-reference/blocks.md))
- [Hierarchical Heading Generation](https://awesome-repositories.com/f/content-management-publishing/content-management-systems/content-architecture-modeling/document-models/document-sectioning/document-content-structuring/flat-heading-hierarchies/hierarchical-heading-generation.md) — Provides titled block types to establish a hierarchical document structure. ([source](https://docs.yoopta.dev/plugins/headings.md))
- [Document State Management](https://awesome-repositories.com/f/content-management-publishing/document-state-management.md) — Manages the retrieval and replacement of the current document state and emptiness verification. ([source](https://docs.yoopta.dev/api-reference/editor.md))
- [Block-Based Content Modification](https://awesome-repositories.com/f/content-management-publishing/programmatic-content-modification/block-based-content-modification.md) — Provides programmatic interfaces for modifying block metadata such as alignment and depth. ([source](https://docs.yoopta.dev/api-reference/blocks.md))
- [Structured Table Editors](https://awesome-repositories.com/f/content-management-publishing/structured-table-editors.md) — Provides an administrative interface for building tabular structures, including inserting, deleting, and resizing rows and columns. ([source](https://docs.yoopta.dev/plugins/table.md))
- [Table Data Serializers](https://awesome-repositories.com/f/content-management-publishing/accessible-table-editors/table-data-serializers.md) — Transforms HTML table tags into editor elements and serializes tabular data into Markdown. ([source](https://docs.yoopta.dev/plugins/table.md))
- [Content Discovery & Organization](https://awesome-repositories.com/f/content-management-publishing/content-discovery-organization.md) — Organizes related information into switchable sections for toggling between different content views. ([source](https://docs.yoopta.dev/plugins/tabs.md))
- [Text Style Definitions](https://awesome-repositories.com/f/content-management-publishing/content-management-systems/content-architecture-modeling/document-models/document-sectioning/document-content-structuring/content-schema-definitions/modular-content-block-definitions/custom-block-type-definitions/custom-content-type-definitions/text-style-definitions.md) — Provides the ability to define unique text formatting styles with custom rendering components. ([source](https://docs.yoopta.dev/api-reference/marks.md))
- [Inline File Embedding](https://awesome-repositories.com/f/content-management-publishing/content-management-systems/content-management-platforms/enterprise-specialized-systems/document-management-systems/pdf-annotations/file-attachments/inline-file-embedding.md) — Supports uploading files to a server and embedding them as interactive blocks with metadata. ([source](https://docs.yoopta.dev/plugins/file.md))
- [Dynamic List Generators](https://awesome-repositories.com/f/content-management-publishing/dynamic-list-generators.md) — Generates bulleted, numbered, and checkable todo lists to organize structured document content. ([source](https://docs.yoopta.dev/plugins/lists.md))
- [HTML Serialization](https://awesome-repositories.com/f/content-management-publishing/html-to-document-parsers/html-serialization.md) — Converts structured internal code block representations into HTML, Markdown, or email-compatible text strings. ([source](https://docs.yoopta.dev/plugins/code.md))
- [Image Serializers](https://awesome-repositories.com/f/content-management-publishing/html-to-document-parsers/image-serializers.md) — Converts image elements into standard HTML tags or Markdown syntax for document export. ([source](https://docs.yoopta.dev/plugins/image.md))

### Data & Databases

- [Atomic Document Transforms](https://awesome-repositories.com/f/data-databases/bulk-data-operations/atomic-batch-operations/atomic-document-transforms.md) — Groups multiple block or element changes into single atomic transforms to ensure consistent document updates. ([source](https://docs.yoopta.dev/api-reference/editor.md))
- [Content Change Tracking](https://awesome-repositories.com/f/data-databases/data-ingestion-sources/source-metadata-capture/source-tracking/content-change-tracking.md) — Provides a system for tracking content state changes and operation lists as a document is edited. ([source](https://docs.yoopta.dev/core/editor.md))
- [Cell Range Selection](https://awesome-repositories.com/f/data-databases/data-querying/table-item-filters/numeric-range-filters/numeric-range-constraints/range-representations/text-range-definitions/data-range-selection/cell-range-selection.md) — Implements visual highlighting of cell ranges within tables for bulk operations. ([source](https://docs.yoopta.dev/plugins/table.md))
- [Mention Systems](https://awesome-repositories.com/f/data-databases/record-insertion/mention-systems.md) — Provides a searchable dropdown for selecting and inserting entities like people or channels. ([source](https://docs.yoopta.dev/plugins/mention.md))

### Development Tools & Productivity

- [Editor Slash Commands](https://awesome-repositories.com/f/development-tools-productivity/slash-command-interfaces/editor-slash-commands.md) — Provides a keyboard-driven slash command interface for inserting various content blocks into the editor. ([source](https://docs.yoopta.dev/ui/slash-action-menu-list.md))
- [Undo-Redo State History](https://awesome-repositories.com/f/development-tools-productivity/change-tracking/state-tracking-utilities/action-based-state-tracking/undo-redo-state-history.md) — Tracks document changes as atomic operations in a history stack to support local undo and redo.
- [Dynamic Plugin Registrations](https://awesome-repositories.com/f/development-tools-productivity/dynamic-plugin-registrations.md) — Supports registering and unregistering plugins at runtime to dynamically modify available block types. ([source](https://docs.yoopta.dev/api-reference/editor.md))
- [Editor Event Handlers](https://awesome-repositories.com/f/development-tools-productivity/editor-event-handlers.md) — Implements listeners for state changes and user actions to trigger custom logic via an event-driven API. ([source](https://cdn.jsdelivr.net/gh/yoopta-editor/yoopta-editor@master/README.md))

### Graphics & Multimedia

- [Hyperlink Management](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/media-and-hyperlink-embedders/hyperlink-management.md) — Provides tools for inserting and managing inline links and link blocks. ([source](https://docs.yoopta.dev/plugins/link.md))
- [Video Embeddings](https://awesome-repositories.com/f/graphics-multimedia/video-embeddings.md) — Provides tools for integrating external video content from hosting platforms directly into the editor. ([source](https://docs.yoopta.dev/plugins/video.md))

### Networking & Communication

- [Collaboration History Management](https://awesome-repositories.com/f/networking-communication/collaboration-history-management.md) — Manages undo and redo operations that allow users to revert local changes without affecting collaborators. ([source](https://docs.yoopta.dev/core/collaboration.md))

### Scientific & Mathematical Computing

- [LaTeX Math Rendering](https://awesome-repositories.com/f/scientific-mathematical-computing/numerical-mathematical-foundations/mathematical-typesetting-engines/mathematical-typesetting/latex-math-rendering.md) — Embeds LaTeX mathematical expressions into text blocks that render as formatted math. ([source](https://docs.yoopta.dev/plugins/math.md))

### Web Development

- [Presence Indicators](https://awesome-repositories.com/f/web-development/presence-tracking/presence-indicators.md) — Displays active users and the specific blocks they are editing via visual indicators and remote cursors. ([source](https://docs.yoopta.dev/core/collaboration.md))
- [Structured Document Serialization](https://awesome-repositories.com/f/web-development/schema-based-serialization/schema-serialization/structured-document-serialization.md) — Converts internal structured block data into HTML, Markdown, and JSON using a defined mapping system.