[![Buy Me A Coffee](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/darginec05) ![npm](https://img.shields.io/npm/v/@yoopta/editor) ![downloads](https://img.shields.io/npm/dm/@yoopta/editor) [![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/Darginec05) # Yoopta-Editor v6 ## Motivation. Why Yoopta? Yoopta is fully open source and built with all my heart and love. It was born from real pain I've integrated rich-text editors into products more times than I'd like to admit. Every time it was the same story: wrestling with complex APIs, fighting against opinionated UI that doesn't fit your product, hacking around limitations, and writing glue code that makes you mass text your wife and check hair transplant prices (I'm currently accepting donations for the procedure — every star on GitHub brings me one follicle closer). Yoopta was built to end that cycle. The idea is simple: give developers a **headless core** when they need full control, but also ship **20+ ready-made plugins**, **pre-built UI components** (toolbars, slash menus, block actions), and **theme presets** (shadcn, Material) — so you can launch a polished editing experience without thinking about implementing a rich-text editor in your project and engage in other business tasks Whether you're building a simple blog editor, a Notion-like workspace, a CMS for landing pages, or even a full website builder — Yoopta gives you the primitives to get there If Yoopta saves you time, consider [starring the repo](https://github.com/Darginec05/Yoopta-Editor) or [sponsoring the project](https://github.com/sponsors/Darginec05). It keeps the project alive ## Yoo AI — AI App Builder Powered by Yoopta Editor > **[ai.yoopta.dev](https://ai.yoopta.dev)** — Describe your app. AI builds it with Yoopta plugins. You edit everything directly in the preview. Yoo AI is an AI-powered web app builder built on top of Yoopta Editor. It takes everything developers love about Yoopta — plugins, drag & drop, theming, collaboration — and wraps it in an AI-first experience that anyone can use without writing code. - **AI generates multi-page apps** from a text prompt using plugins from the marketplace - **Click any block to edit inline** — text, images, styles. The preview is the editor - **Connect your own API** for dynamic data (product catalogs, listings, blog posts) - **AI Plugin Generator** — describe a custom block, AI builds it with live preview and source code - **200+ community plugins** — developers build and publish blocks, AI learns to use them - **Real-time collaboration** — edit together with cursors and presence, powered by Yjs Early access is open — first 100 users get lifetime perks. **[Try Yoo AI →](https://ai.yoopta.dev)** --- ## Introduction Yoopta-Editor is a free, open-source rich-text editor built for React apps. It's packed with features that let you build an editor as powerful and user-friendly as Notion, Craft, Coda, Medium etc. — or go further and build a CMS, landing page builder, or website builder on top of it. Built on top of Slate.js with a powerful plugin architecture, Yoopta-Editor gives you the flexibility to customize everything—tweak the look, add features, or craft a completely custom user interface. The core is headless by default; Yoopta also provides pre-built theme presets so you can get a full editing experience and start quickly (shadcn theme `@yoopta/themes-shadcn` is available now; Material theme is in progress). Pre-built UI components via `@yoopta/ui` (toolbars, menus, block actions) let you improve the editing experience without building everything from scratch. ## Examples & Demos See what you can build with Yoopta: | Example | Description | Demo | Source | | ------------------------- | -------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | | **Full Setup** | Complete editor with toolbar, slash menu, block actions, drag & drop, and mentions | [Live](https://yoopta.dev/examples/full-setup) | [Source](https://github.com/Darginec05/Yoopta-Editor/tree/main/web/next-app-example/app/examples/full-setup) | | **CMS / Website Builder** | Visual page builder with drag-and-drop blocks, sidebar settings, and live preview — build landing pages and websites | [Live](https://yoopta.dev/examples/cms) | [Source](https://github.com/Darginec05/Yoopta-Editor/tree/main/web/next-app-example/app/examples/cms) | | **Word Example** | Microsoft Word-inspired editor with fixed toolbar, formatting, tables, and export to HTML/Markdown/Text/JSON | [Live](https://yoopta.dev/examples/word-example) | [Source](https://github.com/Darginec05/Yoopta-Editor/tree/main/web/next-app-example/app/examples/word-example) | | **Email Builder** | Email composition tool with templates, signatures, split-view editing, HTML preview, and email-safe export | [Live](https://yoopta.dev/examples/email-builder) | [Source](https://github.com/Darginec05/Yoopta-Editor/tree/main/web/next-app-example/app/examples/email-builder) | | **README Editor** | GitHub-flavored Markdown editor with live preview, section templates, and download as README.md | [Live](https://yoopta.dev/examples/readme-editor) | [Source](https://github.com/Darginec05/Yoopta-Editor/tree/main/web/next-app-example/app/examples/readme-editor) | | **Slack Chat** | Slack-style messaging with channel list, rich text composer, mentions, and emoji support | [Live](https://yoopta.dev/examples/slack-chat) | [Source](https://github.com/Darginec05/Yoopta-Editor/tree/main/web/next-app-example/app/examples/slack-chat) | | **Social Media Chat** | WhatsApp/Instagram-like chat with message bubbles, attachments, reactions, and status indicators | [Live](https://yoopta.dev/examples/social-media-chat) | [Source](https://github.com/Darginec05/Yoopta-Editor/tree/main/web/next-app-example/app/examples/social-media-chat) | | **Collaboration** | Real-time multi-user editing with Yjs, remote cursors, and presence awareness | [Live](https://yoopta.dev/examples/collaboration) | [Source](https://github.com/Darginec05/Yoopta-Editor/tree/main/web/next-app-example/app/examples/collaboration) | | **Nested Plugins** | Injecting child elements from other plugins into Accordion, Tabs, and Carousel components | [Live](https://yoopta.dev/examples/inject-plugins) | [Source](https://github.com/Darginec05/Yoopta-Editor/tree/main/web/next-app-example/app/examples/inject-plugins) | | **Large Document** | Performance stress test with a large dataset to demonstrate scalability with many blocks | [Live](https://yoopta.dev/examples/large-document) | [Source](https://github.com/Darginec05/Yoopta-Editor/tree/main/web/next-app-example/app/examples/large-document) | ## Features - **Easy setup** — Sensible defaults; plugins and marks passed to `createYooptaEditor`, then render `` - **20+ plugins** — Paragraph, headings, lists, code, image, video, table, callout, accordion, tabs, steps, divider, embed, file, link, mention, carousel, table-of-contents, and more - **Headless core** — Full control over UI; optional pre-built theme presets (`@yoopta/themes-shadcn` available, `@yoopta/themes-material` in progress) for styled block UI - **Pre-built UI components** (`@yoopta/ui`) — FloatingToolbar, SlashCommandMenu, ActionMenuList, BlockOptions, ElementOptions, FloatingBlockActions, SelectionBox, BlockDndContext so you don't have to build everything from scratch - **Blocks, Elements, Marks APIs** — Programmatic control: insert/update/delete blocks and elements, apply text formatting (Bold, Italic, Highlight, etc.), custom marks supported - **Undo/redo** — Built-in history with `editor.undo()` / `editor.redo()`; batch operations for single undo step - **Drag and drop** — Reorder blocks with nested depth support; optional `SortableBlock` for custom DnD - **Selection box** — Multi-block selection for copy, delete, or bulk operations - **Slash command & action menu** — Type `/` for block insertion; floating block actions (+, drag handle, block options) - **Inline elements** — Links, @mentions, emojis, inline math (KaTeX), and custom inline nodes within text - **Export** — HTML, Markdown, plain text, email template; get/set content as Yoopta JSON - **Real-time collaboration** (`@yoopta/collaboration`) — Multi-user editing with Yjs CRDT, presence (awareness), remote cursors, and WebSocket provider; optional package for collaborative documents - **Events** — `editor.on('change' | 'focus' | 'blur' | 'path-change' | 'block:copy')` for sync, analytics, or custom logic - **Keyboard shortcuts** — Customizable hotkeys; Tab/Shift+Tab for indent/outdent; shortcuts per plugin and mark - **Read-only mode** — Use the same editor instance for viewing or editing - **TypeScript** — Full type definitions for editor, blocks, elements, and plugins - **Mobile friendly** — Touch support; works in responsive layouts - **Custom plugins & marks** — Define new block types or text formats and plug them in - **Media & large docs** — Image/video optimization, lazy loading; performant with many blocks - **Theming** — CSS variables (light/dark); theme packages for plugin element styling ## Installation ```bash # Install peer dependencies and core packages yarn add slate slate-react slate-dom @yoopta/editor # Add plugins you need 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 # Add marks for text formatting yarn add @yoopta/marks # Add UI components yarn add @yoopta/ui # Optional: theme for styled block UI (Shadcn or Material) yarn add @yoopta/themes-shadcn # Optional: real-time collaboration (Yjs, awareness, remote cursors) yarn add @yoopta/collaboration ``` ## Quick Start Plugins, initial value and marks are passed to `createYooptaEditor` ```tsx import { useMemo, useEffect } from 'react'; import YooptaEditor, { createYooptaEditor, type YooptaContentValue } from '@yoopta/editor'; import Paragraph from '@yoopta/paragraph'; import Headings from '@yoopta/headings'; import { Bold, Italic, Underline, Strike, CodeMark, Highlight } from '@yoopta/marks'; const PLUGINS = [Paragraph, Headings.HeadingOne, Headings.HeadingTwo, Headings.HeadingThree]; const MARKS = [Bold, Italic, Underline, Strike, CodeMark, Highlight]; const initialValue = {} as YooptaContentValue; const EDITOR_STYLES = { width: 750, // useful when you want to create default block by clicking on empty are paddingBottom: 150, }; export default function Editor() { const editor = useMemo( () => createYooptaEditor({ plugins: PLUGINS, marks: MARKS, value: initialValue }), [], ); return ( console.log('onChange', value)} /> ); } ``` ## Themes The editor and plugins are **headless** by default. For styled block UI you can use a theme package: - **`@yoopta/themes-shadcn`** — Shadcn UI styled components (production ready) - **`@yoopta/themes-material`** — Material Design (in progress) **Option 1: Apply theme to all plugins** ```tsx import { applyTheme } from '@yoopta/themes-shadcn'; const plugins = applyTheme([ Paragraph, Callout, Headings.HeadingOne, Headings.HeadingTwo, Headings.HeadingThree, ]); const editor = createYooptaEditor({ plugins, marks: MARKS }); ``` **Option 2: Apply theme UI to a single plugin** ```tsx import Callout from '@yoopta/callout'; import { CalloutUI } from '@yoopta/themes-shadcn/callout'; const CalloutWithUI = Callout.extend({ elements: CalloutUI }); // Use CalloutWithUI in your plugins array ``` See [docs/core/themes](https://docs.yoopta.dev/core/themes) for the full concept. ## Adding UI Components All UI (toolbar, slash menu, block actions) must be **children** of `` so they can use `useYooptaEditor()`. Yoopta provides ready-to-use components from `@yoopta/ui`: ```tsx import { useMemo, useState, useRef } from 'react'; import YooptaEditor, { createYooptaEditor, Blocks, Marks, useYooptaEditor } from '@yoopta/editor'; import { FloatingToolbar, FloatingBlockActions, BlockOptions, SlashCommandMenu } from '@yoopta/ui'; // Floating toolbar for text formatting function MyToolbar() { const editor = useYooptaEditor(); return ( {editor.formats.bold && ( Marks.toggle(editor, { type: 'bold' })} active={Marks.isActive(editor, { type: 'bold' })}> B )} ); } // Floating block actions (plus button, drag handle) function MyFloatingBlockActions() { const editor = useYooptaEditor(); const [blockOptionsOpen, setBlockOptionsOpen] = useState(false); const dragHandleRef = useRef(null); return ( {({ blockId }) => ( <> { if (!blockId) return; const block = Blocks.getBlock(editor, { id: blockId }); if (block) editor.insertBlock('Paragraph', { at: block.meta.order + 1, focus: true }); }}> + setBlockOptionsOpen(true)}> ⋮⋮ {/* Block options menu items */} )} ); } export default function Editor() { const editor = useMemo( () => createYooptaEditor({ plugins: PLUGINS, marks: MARKS, }), [], ); return ( ); } ``` ## Packages ### Core | Package | Description | | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [@yoopta/editor](./packages/core/editor) | Core editor component and API (headless) | | [@yoopta/ui](./packages/core/ui) | UI components (FloatingToolbar, ActionMenuList, SlashCommandMenu, FloatingBlockActions, BlockOptions, ElementOptions, SelectionBox, BlockDndContext, SortableBlock) | | [@yoopta/exports](./packages/core/exports) | Serializers for HTML, Markdown, PlainText, Email | | [@yoopta/collaboration](./packages/core/collaboration) | Real-time collaboration with Yjs CRDT (awareness, remote cursors, WebSocket provider) | | [@yoopta/marks](./packages/marks) | Text formatting marks (Bold, Italic, Underline, Strike, Code, Highlight) | ### Themes | Package | Description | | ----------------------------------------------------- | --------------------------------------------------- | | [@yoopta/themes-shadcn](./packages/themes/shadcn) | Shadcn UI styled block elements (production) | | [@yoopta/themes-material](./packages/themes/material) | Material Design styled block elements (in progress) | ### Plugins | Package | Description | | ----------------------------------------------------------------- | ---------------------------------------------------- | | [@yoopta/paragraph](./packages/plugins/paragraph) | Basic text paragraph | | [@yoopta/headings](./packages/plugins/headings) | H1, H2, H3 headings | | [@yoopta/lists](./packages/plugins/lists) | Bulleted, numbered, and todo lists | | [@yoopta/blockquote](./packages/plugins/blockquote) | Block quotes | | [@yoopta/callout](./packages/plugins/callout) | Callout/alert boxes with themes | | [@yoopta/code](./packages/plugins/code) | Code blocks with syntax highlighting | | [@yoopta/image](./packages/plugins/image) | Images with optimization | | [@yoopta/video](./packages/plugins/video) | Video embeds (YouTube, Vimeo, etc.) | | [@yoopta/embed](./packages/plugins/embed) | Generic embeds (Figma, Twitter, etc.) | | [@yoopta/file](./packages/plugins/file) | File attachments | | [@yoopta/table](./packages/plugins/table) | Tables with headers | | [@yoopta/accordion](./packages/plugins/accordion) | Collapsible accordion sections | | [@yoopta/tabs](./packages/plugins/tabs) | Tabbed content panels | | [@yoopta/steps](./packages/plugins/steps) | Step-by-step instructions | | [@yoopta/divider](./packages/plugins/divider) | Visual dividers | | [@yoopta/link](./packages/plugins/link) | Inline links | | [@yoopta/math](./packages/plugins/math) | Math expressions with KaTeX (MathInline + MathBlock) | | [@yoopta/mention](./packages/plugins/mention) | @mentions | | [@yoopta/carousel](./packages/plugins/carousel) | Image carousels | | [@yoopta/table-of-contents](./packages/plugins/table-of-contents) | Table of contents block | ### Marks (Text Formatting) All marks are available from `@yoopta/marks`: - **Bold** - `Cmd/Ctrl + B` - **Italic** - `Cmd/Ctrl + I` - **Underline** - `Cmd/Ctrl + U` - **Strike** - `Cmd/Ctrl + Shift + S` - **CodeMark** - `Cmd/Ctrl + E` - **Highlight** - Text highlighting with colors ### Styling UI components from `@yoopta/ui` use CSS variables for theming. For styled **block** elements (callout, code, image, etc.), use a theme package: `@yoopta/themes-shadcn` or `@yoopta/themes-material` (see [Themes](#themes) above). ## Editor API ### Editor Instance The editor instance provides programmatic control over content ```tsx const editor = useMemo( () => createYooptaEditor({ plugins: PLUGINS, marks: MARKS, // value: initialValue, // optional; or set later with setEditorValue() }), [], ); // Element builder - create complex nested structures const elements = editor.y('paragraph', { children: [editor.y.text('Hello '), editor.y.text('world', { bold: true, italic: true })], }); // Inline elements (e.g., links) const linkElement = editor.y.inline('link', { props: { url: 'https://example.com', target: '_blank' }, children: [editor.y.text('Click here', { bold: true })], }); // Insert block with elements editor.insertBlock('Paragraph', { elements, at: 0, focus: true }); // Toggle block type (preserves content) editor.toggleBlock('HeadingOne', { at: editor.path.current, focus: true }); // Batch multiple operations editor.batchOperations(() => { editor.insertBlock('HeadingOne', { at: 0 }); editor.insertBlock('Paragraph', { at: 1 }); }); // Export content const html = editor.getHTML(); const markdown = editor.getMarkdown(); const plainText = editor.getPlainText(); // History editor.undo(); editor.redo(); // Content getter (or use value from onChange) const value = editor.getEditorValue(); // Events editor.on('change', ({ value, operations }) => console.log(value)); editor.on('focus', () => console.log('focused')); editor.on('blur', () => console.log('blurred')); ``` ### Blocks API Namespace for block-level operations. Import: `import { Blocks } from '@yoopta/editor'` ```tsx Blocks.insertBlock(editor, { ... }) // Insert a new block Blocks.deleteBlock(editor, { ... }) // Delete a block Blocks.updateBlock(editor, { ... }) // Update block properties Blocks.moveBlock(editor, { ... }) // Move block to new position Blocks.duplicateBlock(editor, { ... }) // Duplicate a block Blocks.toggleBlock(editor, { ... }) // Change block type Blocks.focusBlock(editor, { ... }) // Focus a specific block Blocks.splitBlock(editor, { ... }) // Split block at cursor Blocks.mergeBlock(editor, { ... }) // Merge with adjacent block Blocks.increaseBlockDepth(editor, { ... }) // Indent block Blocks.decreaseBlockDepth(editor, { ... }) // Outdent block Blocks.getBlock(editor, { ... }) // Get block by ID Blocks.getBlockSlate(editor, { ... }) // Get Slate instance for block Blocks.buildBlockData(editor, { ... }) // Build block data structure ``` ### Elements API Namespace for element-level operations within blocks. Import: `import { Elements } from '@yoopta/editor'` ```tsx Elements.insertElement(editor, { ... }) // Insert element in block Elements.updateElement(editor, { ... }) // Update element properties Elements.deleteElement(editor, { ... }) // Delete element Elements.getElement(editor, { ... }) // Get element by matcher Elements.getElements(editor, { ... }) // Get multiple elements Elements.getElementEntry(editor, { ... }) // Get element with path Elements.getElementPath(editor, { ... }) // Get path to element Elements.getParentElementPath(editor, { ... }) // Get parent path Elements.getElementChildren(editor, { ... }) // Get child elements Elements.getRootElement(editor, { ... }) // Get root element definition for a plugin Elements.isElementEmpty(editor, { ... }) // Check if element is empty ``` ### Marks API Namespace for text formatting operations. Import: `import { Marks } from '@yoopta/editor'` ```tsx // Apply marks to text at specific block positions Marks.update(editor, { type: 'bold', value: true, at: [0, 1, 2], // block indices }); // Apply highlight with custom styles Marks.update(editor, { type: 'highlight', value: { color: 'red', backgroundColor: '#ffff00' }, at: [0], }); ``` ### Creating Custom Marks ```tsx import { createYooptaMark } from '@yoopta/editor'; const CustomMark = createYooptaMark({ type: 'custom', hotkey: 'mod+shift+c', render: (props) => {props.children}, }); ``` ## API Reference ### createYooptaEditor Options ```typescript const editor = createYooptaEditor({ plugins: YooptaPlugin[]; // Required. List of plugins marks?: YooptaMark[]; // Optional. Text formatting marks value?: YooptaContentValue; // Optional. Initial content (or use setEditorValue later) readOnly?: boolean; id?: string; }); ``` ### YooptaEditor Props `plugins`, `marks`, and `value` are **not** props of ``; they belong to `createYooptaEditor` ```typescript type YooptaEditorProps = { editor: YooEditor; // Required. From createYooptaEditor() onChange?: (value: YooptaContentValue, options: { operations }) => void; onPathChange?: (path: YooptaPath) => void; placeholder?: string; autoFocus?: boolean; className?: string; style?: React.CSSProperties; renderBlock?: (props) => React.ReactNode; // e.g. for SortableBlock children?: React.ReactNode; // UI components: FloatingToolbar, SlashCommandMenu, etc. }; ``` ## Project Structure ``` packages/ ├── core/ │ ├── editor/ # @yoopta/editor - Main editor │ ├── ui/ # @yoopta/ui - UI components │ └── exports/ # @yoopta/exports - Serializers ├── plugins/ # Block plugins ├── marks/ # Text formatting marks ├── themes/ # Theme packages └── development/ # Dev playground ``` ## Development ```bash # Install dependencies yarn install # Build all packages yarn build # Start dev server with watch mode yarn dev # Run tests yarn test # Lint yarn lint ``` ## Roadmap - Simplified plugin API - Additional plugins - More theme presets Real-time **collaborative editing** is available via `@yoopta/collaboration` (Yjs, awareness, remote cursors); see [docs](https://docs.yoopta.dev/core/collaboration) and the [Collaboration example](https://yoopta.dev/playground/collaboration). AI-powered features (generation, inline editing, plugin generator, marketplace) are available through **[Yoo AI](https://ai.yoopta.dev)** — the AI app builder built on Yoopta Editor. ## Support If you find Yoopta-Editor useful, consider supporting the project: - Star this repository - [Sponsor on GitHub](https://github.com/sponsors/Darginec05) - [Buy me a coffee](https://www.buymeacoffee.com/darginec05) - Share with others ## Contributing - [Report bugs or request features](https://github.com/Darginec05/Yoopta-Editor/issues/new/choose) - [Start a discussion](https://github.com/Darginec05/Yoopta-Editor/discussions/new/choose) - [Join Discord](https://discord.gg/Dt8rhSTjsn) - See [Contributing Guidelines](./CONTRIBUTING.md) ## License [MIT License](./LICENSE) ## Contacts - [Discord](https://discord.gg/Dt8rhSTjsn) - [Twitter](https://twitter.com/LebovskiYoo) - [GitHub](https://github.com/Darginec05)