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

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

• GitHub Repository: https://github.com/yoopta-editor/Yoopta-Editor
• Official Documentation: https://docs.yoopta.dev/
• Yoo AI (AI App Builder): https://ai.yoopta.dev