# Yoopta-Editor: Build Powerful Rich-Text Editors for React Apps This repository profile is provided by osrepos.com, an open source repository discovery platform. Source: osrepos.com Repository profile: https://osrepos.com/repo/yoopta-editor-yoopta-editor Generated for open source discovery and AI-assisted research. 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. GitHub: https://github.com/yoopta-editor/Yoopta-Editor OSRepos URL: https://osrepos.com/repo/yoopta-editor-yoopta-editor ## 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. ## Topics - editor - react - rich-text-editor - notion-editor - wysiwyg - typescript - open-source ## Repository Information Last analyzed by OSRepos: Sun May 10 2026 17:50:22 GMT+0100 (Western European Summer Time) Detail views: 3 GitHub clicks: 4 ## Safety Notice OSRepos shares public repositories for knowledge and discovery only. Review source code, dependencies, licenses, and security implications before running or installing anything. ## Content ## 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: bash 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](https://yoopta.dev/examples/full-setup "Live Demo" target="_blank") | [Source Code](https://github.com/Darginec05/Yoopta-Editor/tree/main/web/next-app-example/app/examples/full-setup "Source Code" target="_blank") * **CMS / Website Builder**: A visual page builder with drag-and-drop blocks, sidebar settings, and live preview. [Live Demo](https://yoopta.dev/examples/cms "Live Demo" target="_blank") | [Source Code](https://github.com/Darginec05/Yoopta-Editor/tree/main/web/next-app-example/app/examples/cms "Source Code" target="_blank") * **Word Example**: A Microsoft Word-inspired editor with a fixed toolbar, formatting, tables, and export options. [Live Demo](https://yoopta.dev/examples/word-example "Live Demo" target="_blank") | [Source Code](https://github.com/Darginec05/Yoopta-Editor/tree/main/web/next-app-example/app/examples/word-example "Source Code" target="_blank") * **Email Builder**: An email composition tool with templates, signatures, split-view editing, and HTML preview. [Live Demo](https://yoopta.dev/examples/email-builder "Live Demo" target="_blank") | [Source Code](https://github.com/Darginec05/Yoopta-Editor/tree/main/web/next-app-example/app/examples/email-builder "Source Code" target="_blank") * **Collaboration**: Real-time multi-user editing with Yjs, remote cursors, and presence awareness. [Live Demo](https://yoopta.dev/examples/collaboration "Live Demo" target="_blank") | [Source Code](https://github.com/Darginec05/Yoopta-Editor/tree/main/web/next-app-example/app/examples/collaboration "Source Code" target="_blank") ## 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](https://github.com/yoopta-editor/Yoopta-Editor "GitHub Repository" target="_blank") * **Official Documentation**: [https://docs.yoopta.dev/](https://docs.yoopta.dev/ "Official Documentation" target="_blank") * **Yoo AI (AI App Builder)**: [https://ai.yoopta.dev](https://ai.yoopta.dev "Yoo AI App Builder" target="_blank")