{"name":"Yoopta-Editor: Build Powerful Rich-Text Editors for React Apps","description":"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","url":"https://osrepos.com/repo/yoopta-editor-yoopta-editor","source":"osrepos.com","sourceDescription":"This repository profile is provided by osrepos.com, an open source repository discovery platform.","repositoryProfile":"https://osrepos.com/repo/yoopta-editor-yoopta-editor","generatedFor":"open source discovery and AI-assisted research","markdown":"https://osrepos.com/repo/yoopta-editor-yoopta-editor.md","json":"https://osrepos.com/repo/yoopta-editor-yoopta-editor.json","topics":["editor","react","rich-text-editor","notion-editor","wysiwyg","typescript","open-source"],"keywords":["editor","react","rich-text-editor","notion-editor","wysiwyg","typescript","open-source"],"stars":null,"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.","content":"## Introduction\n\nYoopta-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.\n\n## Installation\n\nTo get started with Yoopta-Editor, install the core packages and any desired plugins and marks:\n\nbash\nyarn add slate slate-react slate-dom @yoopta/editor\nyarn 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\nyarn add @yoopta/marks\nyarn add @yoopta/ui\nyarn add @yoopta/themes-shadcn\nyarn add @yoopta/collaboration\n\n\n## Examples\n\nYoopta-Editor's versatility is showcased through various examples, demonstrating its capability to build diverse editing solutions:\n\n*   **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\")\n*   **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\")\n*   **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\")\n*   **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\")\n*   **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\")\n\n## Why Use Yoopta-Editor?\n\nYoopta-Editor stands out by addressing common pain points in rich-text editor integration, offering a powerful and flexible solution:\n\n*   **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.\n*   **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.\n*   **Real-time Collaboration**: The `@yoopta/collaboration` package enables seamless multi-user editing with Yjs, including remote cursors and presence awareness.\n*   **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.\n*   **Comprehensive API**: A robust API allows programmatic control over blocks, elements, and text formatting (marks), facilitating complex interactions and custom logic.\n*   **Developer Experience**: Designed to be easy to set up and use, with sensible defaults, TypeScript support, and mobile-friendliness.\n\n## Links\n\n*   **GitHub Repository**: [https://github.com/yoopta-editor/Yoopta-Editor](https://github.com/yoopta-editor/Yoopta-Editor \"GitHub Repository\" target=\"_blank\")\n*   **Official Documentation**: [https://docs.yoopta.dev/](https://docs.yoopta.dev/ \"Official Documentation\" target=\"_blank\")\n*   **Yoo AI (AI App Builder)**: [https://ai.yoopta.dev](https://ai.yoopta.dev \"Yoo AI App Builder\" target=\"_blank\")","metrics":{"detailViews":3,"githubClicks":4},"dates":{"published":null,"modified":"2026-05-10T16:50:22.000Z"}}