Yoopta-Editor: Build Powerful Rich-Text Editors for React Apps

Yoopta-Editor: Build Powerful Rich-Text Editors for React Apps

Summary

Yoopta-Editor is an open-source React rich-text editor designed to create Notion-like experiences with ease. It offers a headless core for full control, alongside 20+ ready-made plugins, pre-built UI components, and theme presets. This flexibility allows developers to build anything from simple blog editors to complex CMS or website builders.

Repository Info

Updated on May 10, 2026
View on GitHub

Tags

editorreactrich-text-editornotion-editorwysiwygtypescriptopen-source

Click on any tag to explore related repositories

Introduction

Yoopta-Editor is a free, open-source rich-text editor built specifically for React applications. It empowers developers to create highly customizable and feature-rich editing experiences, similar to popular platforms like Notion, Craft, Coda, or Medium. Built on top of Slate.js, Yoopta-Editor features a powerful plugin architecture that provides both a headless core for maximum control and a suite of pre-built UI components and theme presets to accelerate development. Whether you're aiming for a simple blog editor, a sophisticated CMS, or even a full website builder, Yoopta-Editor provides the primitives to achieve your vision.

Installation

To get started with Yoopta-Editor, install the core packages and any desired plugins and marks:

yarn add slate slate-react slate-dom @yoopta/editor
yarn add @yoopta/paragraph @yoopta/headings @yoopta/lists @yoopta/blockquote @yoopta/code @yoopta/image @yoopta/video @yoopta/embed @yoopta/file @yoopta/callout @yoopta/divider @yoopta/accordion @yoopta/table @yoopta/tabs @yoopta/steps @yoopta/mention @yoopta/math @yoopta/links
yarn add @yoopta/marks
yarn add @yoopta/ui
yarn add @yoopta/themes-shadcn
yarn add @yoopta/collaboration

Examples

Yoopta-Editor's versatility is showcased through various examples, demonstrating its capability to build diverse editing solutions:

  • Full Setup: A complete editor with toolbar, slash menu, block actions, drag & drop, and mentions. Live Demo | Source Code
  • CMS / Website Builder: A visual page builder with drag-and-drop blocks, sidebar settings, and live preview. Live Demo | Source Code
  • Word Example: A Microsoft Word-inspired editor with a fixed toolbar, formatting, tables, and export options. Live Demo | Source Code
  • Email Builder: An email composition tool with templates, signatures, split-view editing, and HTML preview. Live Demo | Source Code
  • Collaboration: Real-time multi-user editing with Yjs, remote cursors, and presence awareness. Live Demo | Source Code

Why Use Yoopta-Editor?

Yoopta-Editor stands out by addressing common pain points in rich-text editor integration, offering a powerful and flexible solution:

  • Headless Core with Optional UI: It provides a headless core for complete UI control, while also offering pre-built UI components (@yoopta/ui) and theme presets (@yoopta/themes-shadcn) to quickly launch a polished editing experience.
  • Extensive Plugin Ecosystem: With over 20 ready-made plugins for various block types (paragraphs, headings, images, videos, tables, accordions, etc.) and support for custom plugins, you can tailor the editor to your exact needs.
  • Real-time Collaboration: The @yoopta/collaboration package enables seamless multi-user editing with Yjs, including remote cursors and presence awareness.
  • AI Integration: Yoopta Editor powers Yoo AI, an AI-powered web app builder that leverages Yoopta's plugins, drag and drop functionality, and theming capabilities for an AI-first development experience.
  • Comprehensive API: A robust API allows programmatic control over blocks, elements, and text formatting (marks), facilitating complex interactions and custom logic.
  • Developer Experience: Designed to be easy to set up and use, with sensible defaults, TypeScript support, and mobile-friendliness.

Links