{"id":22350776,"url":"https://github.com/yoopta-editor/yoopta-editor","last_synced_at":"2026-02-03T18:01:34.501Z","repository":{"id":62753767,"uuid":"452058305","full_name":"yoopta-editor/Yoopta-Editor","owner":"yoopta-editor","description":"Build Notion-like, Craft-like, Coda-like, Medium-like editors with Yoopta","archived":false,"fork":false,"pushed_at":"2025-05-05T13:47:45.000Z","size":59813,"stargazers_count":2122,"open_issues_count":111,"forks_count":155,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-05-14T08:06:11.366Z","etag":null,"topics":["contenteditable","editor","hacktoberfest","javascript","notion","notion-alternative","notion-editor","react","rich-text","rich-text-editor","slate","wysiwyg","wysiwyg-editor"],"latest_commit_sha":null,"homepage":"https://yoopta.dev/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yoopta-editor.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["Darginec05"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"custom":null}},"created_at":"2022-01-25T22:07:59.000Z","updated_at":"2025-05-13T02:22:23.000Z","dependencies_parsed_at":"2024-05-21T23:39:03.148Z","dependency_job_id":"10859ddc-4e34-4650-af7e-8e4fcabd91b2","html_url":"https://github.com/yoopta-editor/Yoopta-Editor","commit_stats":null,"previous_names":["darginec05/yoopta-editor","darginec05/yopta-editor","yoopta-editor/yoopta-editor"],"tags_count":1896,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoopta-editor%2FYoopta-Editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoopta-editor%2FYoopta-Editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoopta-editor%2FYoopta-Editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoopta-editor%2FYoopta-Editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yoopta-editor","download_url":"https://codeload.github.com/yoopta-editor/Yoopta-Editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254101615,"owners_count":22014909,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["contenteditable","editor","hacktoberfest","javascript","notion","notion-alternative","notion-editor","react","rich-text","rich-text-editor","slate","wysiwyg","wysiwyg-editor"],"created_at":"2024-12-04T12:07:42.150Z","updated_at":"2026-02-03T18:01:34.494Z","avatar_url":"https://github.com/yoopta-editor.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Darginec05","https://www.buymeacoffee.com/darginec05"],"categories":[],"sub_categories":[],"readme":"[![Buy Me A Coffee](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/darginec05)\n\n![npm](https://img.shields.io/npm/v/@yoopta/editor)\n[![Beta](https://img.shields.io/badge/status-beta-orange?style=flat)](https://github.com/Darginec05/Yoopta-Editor)\n[![](https://img.shields.io/static/v1?label=Sponsor\u0026message=%E2%9D%A4\u0026logo=GitHub\u0026color=%23fe8e86)](https://github.com/sponsors/Darginec05)\n\n# Yoopta-Editor v6 (beta)\n\n![](/docs/public/yoopta_intro.gif)\n\n## Motivation. Why Yoopta?\n\nYoopta is fully open source and built with all my heart and love. It was born from real pain\n\nI'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).\n\nYoopta 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\n\nIf 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\n\n## Introduction\n\nYoopta-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.\n\nBuilt 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.\n\n## Features\n\n- **Easy setup** — Sensible defaults; plugins and marks passed to `createYooptaEditor`, then render `\u003cYooptaEditor /\u003e`\n- **20+ plugins** — Paragraph, headings, lists, code, image, video, table, callout, accordion, tabs, steps, divider, embed, file, link, mention, carousel, table-of-contents, and more\n- **Headless core** — Full control over UI; optional pre-built theme presets (`@yoopta/themes-shadcn` available, `@yoopta/themes-material` in progress) for styled block UI\n- **Pre-built UI components** (`@yoopta/ui`) — FloatingToolbar, SlashCommandMenu, ActionMenuList, BlockOptions, FloatingBlockActions, SelectionBox, BlockDndContext so you don’t have to build everything from scratch\n- **Blocks, Elements, Marks APIs** — Programmatic control: insert/update/delete blocks and elements, apply text formatting (Bold, Italic, Highlight, etc.), custom marks supported\n- **Undo/redo** — Built-in history with `editor.undo()` / `editor.redo()`; batch operations for single undo step\n- **Drag and drop** — Reorder blocks with nested depth support; optional `SortableBlock` for custom DnD\n- **Selection box** — Multi-block selection for copy, delete, or bulk operations\n- **Slash command \u0026 action menu** — Type `/` for block insertion; floating block actions (+, drag handle, block options)\n- **Inline elements** — Links, @mentions, and custom inline nodes within text\n- **Export** — HTML, Markdown, plain text, email template; get/set content as Yoopta JSON\n- **Events** — `editor.on('change' | 'focus' | 'blur' | 'path-change' | 'block:copy')` for sync, analytics, or custom logic\n- **Keyboard shortcuts** — Customizable hotkeys; Tab/Shift+Tab for indent/outdent; shortcuts per plugin and mark\n- **Read-only mode** — Use the same editor instance for viewing or editing\n- **TypeScript** — Full type definitions for editor, blocks, elements, and plugins\n- **Mobile friendly** — Touch support; works in responsive layouts\n- **Custom plugins \u0026 marks** — Define new block types or text formats and plug them in\n- **Media \u0026 large docs** — Image/video optimization, lazy loading; performant with many blocks\n- **Theming** — CSS variables (light/dark); theme packages for plugin element styling\n\n## Installation\n\n```bash\n# Install peer dependencies and core packages\nyarn add slate slate-react slate-dom @yoopta/editor\n\n# Add plugins you need\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/links\n\n# Add marks for text formatting\nyarn add @yoopta/marks\n\n# Add UI components\nyarn add @yoopta/ui\n\n# Optional: theme for styled block UI (Shadcn or Material)\nyarn add @yoopta/themes-shadcn\n```\n\n## Quick Start\n\nPlugins, initial value and marks are passed to `createYooptaEditor`\n\n```tsx\nimport { useMemo, useEffect } from 'react';\nimport YooptaEditor, { createYooptaEditor, type YooptaContentValue } from '@yoopta/editor';\nimport Paragraph from '@yoopta/paragraph';\nimport Headings from '@yoopta/headings';\nimport { Bold, Italic, Underline, Strike, CodeMark, Highlight } from '@yoopta/marks';\n\nconst PLUGINS = [Paragraph, Headings.HeadingOne, Headings.HeadingTwo, Headings.HeadingThree];\nconst MARKS = [Bold, Italic, Underline, Strike, CodeMark, Highlight];\n\nconst initialValue = {} as YooptaContentValue;\n\nconst EDITOR_STYLES = {\n  width: 750,\n  // useful when you want to create default block by clicking on empty are\n  paddingBottom: 150,\n};\n\nexport default function Editor() {\n  const editor = useMemo(\n    () =\u003e createYooptaEditor({ plugins: PLUGINS, marks: MARKS, value: initialValue }),\n    [],\n  );\n\n  return (\n    \u003cYooptaEditor\n      editor={editor}\n      style={EDITOR_STYLES}\n      placeholder=\"Type / to open menu\"\n      onChange={(value) =\u003e console.log('onChange', value)}\n    /\u003e\n  );\n}\n```\n\n## Themes\n\nThe editor and plugins are **headless** by default. For styled block UI you can use a theme package:\n\n- **`@yoopta/themes-shadcn`** — Shadcn UI styled components (production ready)\n- **`@yoopta/themes-material`** — Material Design (in progress)\n\n**Option 1: Apply theme to all plugins**\n\n```tsx\nimport { applyTheme } from '@yoopta/themes-shadcn';\n\nconst plugins = applyTheme([\n  Paragraph,\n  Callout,\n  Headings.HeadingOne,\n  Headings.HeadingTwo,\n  Headings.HeadingThree,\n]);\nconst editor = createYooptaEditor({ plugins, marks: MARKS });\n```\n\n**Option 2: Apply theme UI to a single plugin**\n\n```tsx\nimport Callout from '@yoopta/callout';\nimport { CalloutUI } from '@yoopta/themes-shadcn/callout';\n\nconst CalloutWithUI = Callout.extend({ elements: CalloutUI });\n// Use CalloutWithUI in your plugins array\n```\n\nSee [docs/core/themes](https://docs.yoopta.dev/core/themes) for the full concept.\n\n## Adding UI Components\n\nAll UI (toolbar, slash menu, block actions) must be **children** of `\u003cYooptaEditor\u003e` so they can use `useYooptaEditor()`. Yoopta provides ready-to-use components from `@yoopta/ui`:\n\n```tsx\nimport { useMemo, useState, useRef } from 'react';\nimport YooptaEditor, { createYooptaEditor, Blocks, Marks, useYooptaEditor } from '@yoopta/editor';\nimport { FloatingToolbar, FloatingBlockActions, BlockOptions, SlashCommandMenu } from '@yoopta/ui';\n\n// Floating toolbar for text formatting\nfunction MyToolbar() {\n  const editor = useYooptaEditor();\n\n  return (\n    \u003cFloatingToolbar\u003e\n      \u003cFloatingToolbar.Content\u003e\n        \u003cFloatingToolbar.Group\u003e\n          {editor.formats.bold \u0026\u0026 (\n            \u003cFloatingToolbar.Button\n              onClick={() =\u003e Marks.toggle(editor, { type: 'bold' })}\n              active={Marks.isActive(editor, { type: 'bold' })}\u003e\n              B\n            \u003c/FloatingToolbar.Button\u003e\n          )}\n        \u003c/FloatingToolbar.Group\u003e\n      \u003c/FloatingToolbar.Content\u003e\n    \u003c/FloatingToolbar\u003e\n  );\n}\n\n// Floating block actions (plus button, drag handle)\nfunction MyFloatingBlockActions() {\n  const editor = useYooptaEditor();\n  const [blockOptionsOpen, setBlockOptionsOpen] = useState(false);\n  const dragHandleRef = useRef\u003cHTMLButtonElement\u003e(null);\n\n  return (\n    \u003cFloatingBlockActions frozen={blockOptionsOpen}\u003e\n      {({ blockId }) =\u003e (\n        \u003c\u003e\n          \u003cFloatingBlockActions.Button\n            onClick={() =\u003e {\n              if (!blockId) return;\n              const block = Blocks.getBlock(editor, { id: blockId });\n              if (block) editor.insertBlock('Paragraph', { at: block.meta.order + 1, focus: true });\n            }}\u003e\n            +\n          \u003c/FloatingBlockActions.Button\u003e\n          \u003cFloatingBlockActions.Button\n            ref={dragHandleRef}\n            onClick={() =\u003e setBlockOptionsOpen(true)}\u003e\n            ⋮⋮\n          \u003c/FloatingBlockActions.Button\u003e\n\n          \u003cBlockOptions\n            open={blockOptionsOpen}\n            onOpenChange={setBlockOptionsOpen}\n            anchor={dragHandleRef.current}\u003e\n            \u003cBlockOptions.Content\u003e{/* Block options menu items */}\u003c/BlockOptions.Content\u003e\n          \u003c/BlockOptions\u003e\n        \u003c/\u003e\n      )}\n    \u003c/FloatingBlockActions\u003e\n  );\n}\n\nexport default function Editor() {\n  const editor = useMemo(\n    () =\u003e\n      createYooptaEditor({\n        plugins: PLUGINS,\n        marks: MARKS,\n      }),\n    [],\n  );\n\n  return (\n    \u003cYooptaEditor\n      editor={editor}\n      autoFocus\n      placeholder=\"Type / to open menu\"\n      style={{ width: 750 }}\u003e\n      \u003cMyToolbar /\u003e\n      \u003cMyFloatingBlockActions /\u003e\n      \u003cSlashCommandMenu /\u003e\n    \u003c/YooptaEditor\u003e\n  );\n}\n```\n\n## Packages\n\n### Core\n\n| Package                                    | Description                                                                                                                                         |\n| ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [@yoopta/editor](./packages/core/editor)   | Core editor component and API (headless)                                                                                                            |\n| [@yoopta/ui](./packages/core/ui)           | UI components (FloatingToolbar, ActionMenuList, SlashCommandMenu, FloatingBlockActions, BlockOptions, SelectionBox, BlockDndContext, SortableBlock) |\n| [@yoopta/exports](./packages/core/exports) | Serializers for HTML, Markdown, PlainText, Email                                                                                                    |\n| [@yoopta/marks](./packages/marks)          | Text formatting marks (Bold, Italic, Underline, Strike, Code, Highlight)                                                                            |\n\n### Themes\n\n| Package                                               | Description                                         |\n| ----------------------------------------------------- | --------------------------------------------------- |\n| [@yoopta/themes-shadcn](./packages/themes/shadcn)     | Shadcn UI styled block elements (production)        |\n| [@yoopta/themes-material](./packages/themes/material) | Material Design styled block elements (in progress) |\n\n### Plugins\n\n| Package                                                           | Description                           |\n| ----------------------------------------------------------------- | ------------------------------------- |\n| [@yoopta/paragraph](./packages/plugins/paragraph)                 | Basic text paragraph                  |\n| [@yoopta/headings](./packages/plugins/headings)                   | H1, H2, H3 headings                   |\n| [@yoopta/lists](./packages/plugins/lists)                         | Bulleted, numbered, and todo lists    |\n| [@yoopta/blockquote](./packages/plugins/blockquote)               | Block quotes                          |\n| [@yoopta/callout](./packages/plugins/callout)                     | Callout/alert boxes with themes       |\n| [@yoopta/code](./packages/plugins/code)                           | Code blocks with syntax highlighting  |\n| [@yoopta/image](./packages/plugins/image)                         | Images with optimization              |\n| [@yoopta/video](./packages/plugins/video)                         | Video embeds (YouTube, Vimeo, etc.)   |\n| [@yoopta/embed](./packages/plugins/embed)                         | Generic embeds (Figma, Twitter, etc.) |\n| [@yoopta/file](./packages/plugins/file)                           | File attachments                      |\n| [@yoopta/table](./packages/plugins/table)                         | Tables with headers                   |\n| [@yoopta/accordion](./packages/plugins/accordion)                 | Collapsible accordion sections        |\n| [@yoopta/tabs](./packages/plugins/tabs)                           | Tabbed content panels                 |\n| [@yoopta/steps](./packages/plugins/steps)                         | Step-by-step instructions             |\n| [@yoopta/divider](./packages/plugins/divider)                     | Visual dividers                       |\n| [@yoopta/link](./packages/plugins/link)                           | Inline links                          |\n| [@yoopta/mention](./packages/plugins/mention)                     | @mentions                             |\n| [@yoopta/carousel](./packages/plugins/carousel)                   | Image carousels                       |\n| [@yoopta/table-of-contents](./packages/plugins/table-of-contents) | Table of contents block               |\n\n### Marks (Text Formatting)\n\nAll marks are available from `@yoopta/marks`:\n\n- **Bold** - `Cmd/Ctrl + B`\n- **Italic** - `Cmd/Ctrl + I`\n- **Underline** - `Cmd/Ctrl + U`\n- **Strike** - `Cmd/Ctrl + Shift + S`\n- **CodeMark** - `Cmd/Ctrl + E`\n- **Highlight** - Text highlighting with colors\n\n### Styling\n\nUI 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).\n\n## Editor API\n\n### Editor Instance\n\nThe editor instance provides programmatic control over content\n\n```tsx\nconst editor = useMemo(\n  () =\u003e\n    createYooptaEditor({\n      plugins: PLUGINS,\n      marks: MARKS,\n      // value: initialValue,  // optional; or set later with setEditorValue()\n    }),\n  [],\n);\n\n// Element builder - create complex nested structures\nconst elements = editor.y('paragraph', {\n  children: [editor.y.text('Hello '), editor.y.text('world', { bold: true, italic: true })],\n});\n\n// Inline elements (e.g., links)\nconst linkElement = editor.y.inline('link', {\n  props: { url: 'https://example.com', target: '_blank' },\n  children: [editor.y.text('Click here', { bold: true })],\n});\n\n// Insert block with elements\neditor.insertBlock('Paragraph', { elements, at: 0, focus: true });\n\n// Toggle block type (preserves content)\neditor.toggleBlock('HeadingOne', { at: editor.path.current, focus: true });\n\n// Batch multiple operations\neditor.batchOperations(() =\u003e {\n  editor.insertBlock('HeadingOne', { at: 0 });\n  editor.insertBlock('Paragraph', { at: 1 });\n});\n\n// Export content\nconst html = editor.getHTML();\nconst markdown = editor.getMarkdown();\nconst plainText = editor.getPlainText();\n\n// History\neditor.undo();\neditor.redo();\n\n// Content getter (or use value from onChange)\nconst value = editor.getEditorValue();\n\n// Events\neditor.on('change', ({ value, operations }) =\u003e console.log(value));\neditor.on('focus', () =\u003e console.log('focused'));\neditor.on('blur', () =\u003e console.log('blurred'));\n```\n\n### Blocks API\n\nNamespace for block-level operations. Import: `import { Blocks } from '@yoopta/editor'`\n\n```tsx\nBlocks.insertBlock(editor, { ... })    // Insert a new block\nBlocks.deleteBlock(editor, { ... })    // Delete a block\nBlocks.updateBlock(editor, { ... })    // Update block properties\nBlocks.moveBlock(editor, { ... })      // Move block to new position\nBlocks.duplicateBlock(editor, { ... }) // Duplicate a block\nBlocks.toggleBlock(editor, { ... })    // Change block type\nBlocks.focusBlock(editor, { ... })     // Focus a specific block\nBlocks.splitBlock(editor, { ... })     // Split block at cursor\nBlocks.mergeBlock(editor, { ... })     // Merge with adjacent block\nBlocks.increaseBlockDepth(editor, { ... }) // Indent block\nBlocks.decreaseBlockDepth(editor, { ... }) // Outdent block\nBlocks.getBlock(editor, { ... })       // Get block by ID\nBlocks.getBlockSlate(editor, { ... })  // Get Slate instance for block\nBlocks.buildBlockData(editor, { ... }) // Build block data structure\n```\n\n### Elements API\n\nNamespace for element-level operations within blocks. Import: `import { Elements } from '@yoopta/editor'`\n\n```tsx\nElements.insertElement(editor, { ... })   // Insert element in block\nElements.updateElement(editor, { ... })   // Update element properties\nElements.deleteElement(editor, { ... })   // Delete element\nElements.getElement(editor, { ... })      // Get element by matcher\nElements.getElements(editor, { ... })     // Get multiple elements\nElements.getElementEntry(editor, { ... }) // Get element with path\nElements.getElementPath(editor, { ... })  // Get path to element\nElements.getParentElementPath(editor, { ... }) // Get parent path\nElements.getElementChildren(editor, { ... })   // Get child elements\nElements.isElementEmpty(editor, { ... })  // Check if element is empty\n```\n\n### Marks API\n\nNamespace for text formatting operations. Import: `import { Marks } from '@yoopta/editor'`\n\n```tsx\n// Apply marks to text at specific block positions\nMarks.update(editor, {\n  type: 'bold',\n  value: true,\n  at: [0, 1, 2], // block indices\n});\n\n// Apply highlight with custom styles\nMarks.update(editor, {\n  type: 'highlight',\n  value: { color: 'red', backgroundColor: '#ffff00' },\n  at: [0],\n});\n```\n\n### Creating Custom Marks\n\n```tsx\nimport { createYooptaMark } from '@yoopta/editor';\n\nconst CustomMark = createYooptaMark({\n  type: 'custom',\n  hotkey: 'mod+shift+c',\n  render: (props) =\u003e \u003cspan className=\"custom-mark\"\u003e{props.children}\u003c/span\u003e,\n});\n```\n\n## API Reference\n\n### createYooptaEditor Options\n\n```typescript\nconst editor = createYooptaEditor({\n  plugins: YooptaPlugin[];         // Required. List of plugins\n  marks?: YooptaMark[];            // Optional. Text formatting marks\n  value?: YooptaContentValue;      // Optional. Initial content (or use setEditorValue later)\n  readOnly?: boolean;\n  id?: string;\n});\n```\n\n### YooptaEditor Props\n\n`plugins`, `marks`, and `value` are **not** props of `\u003cYooptaEditor\u003e`; they belong to `createYooptaEditor`\n\n```typescript\ntype YooptaEditorProps = {\n  editor: YooEditor; // Required. From createYooptaEditor()\n  onChange?: (value: YooptaContentValue, options: { operations }) =\u003e void;\n  onPathChange?: (path: YooptaPath) =\u003e void;\n  placeholder?: string;\n  autoFocus?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  renderBlock?: (props) =\u003e React.ReactNode; // e.g. for SortableBlock\n  children?: React.ReactNode; // UI components: FloatingToolbar, SlashCommandMenu, etc.\n};\n```\n\n## Examples\n\nLive demos and source code from the [next-app-example](https://github.com/Darginec05/Yoopta-Editor/tree/main/web/next-app-example) app:\n\n- [Playground](https://yoopta.dev/playground) — Full setup: toolbar, slash menu, block actions, drag \u0026 drop, mentions ([source](https://github.com/Darginec05/Yoopta-Editor/tree/main/web/next-app-example/components/playground/examples/full-setup))\n- [Rich Chat](https://yoopta.dev/playground/social-media-chat) — WhatsApp/Telegram-like messaging with rich text, code blocks, reactions ([source](https://github.com/Darginec05/Yoopta-Editor/tree/main/web/next-app-example/components/playground/examples/social-media-chat))\n- [Word Example](https://yoopta.dev/playground/word-example) — Word-like editor with fixed toolbar, tables, images ([source](https://github.com/Darginec05/Yoopta-Editor/tree/main/web/next-app-example/components/playground/examples/word-example))\n- [Slack Chat](https://yoopta.dev/playground/slack-chat) — Slack-style channel list and message composer ([source](https://github.com/Darginec05/Yoopta-Editor/tree/main/web/next-app-example/components/playground/examples/slack-chat))\n- [README Editor](https://yoopta.dev/playground/readme-editor) — Split view with live Markdown preview ([source](https://github.com/Darginec05/Yoopta-Editor/tree/main/web/next-app-example/components/playground/examples/readme-editor))\n- [Email Builder](https://yoopta.dev/playground/email-builder) — Email composition with blocks and export ([source](https://github.com/Darginec05/Yoopta-Editor/tree/main/web/next-app-example/components/playground/examples/email-builder))\n- [Plugin demos](https://yoopta.dev/playground/plugin/paragraph) — Per-plugin live demos (e.g. [paragraph](https://yoopta.dev/playground/plugin/paragraph), [callout](https://yoopta.dev/playground/plugin/callout)) ([source](https://github.com/Darginec05/Yoopta-Editor/tree/main/web/next-app-example/components/playground/plugin-demo))\n\n## Project Structure\n\n```\npackages/\n├── core/\n│   ├── editor/       # @yoopta/editor - Main editor\n│   ├── ui/           # @yoopta/ui - UI components\n│   └── exports/      # @yoopta/exports - Serializers\n├── plugins/          # Block plugins\n├── marks/            # Text formatting marks\n├── themes/           # Theme packages\n└── development/      # Dev playground\n```\n\n## Development\n\n```bash\n# Install dependencies\nyarn install\n\n# Build all packages\nyarn build\n\n# Start dev server with watch mode\nyarn dev\n\n# Run tests\nyarn test\n\n# Lint\nyarn lint\n```\n\n## Roadmap\n\n- AI tools for content generation\n- Collaborative editing mode\n- Simplified plugin API\n- Additional plugins\n\n## Support\n\nIf you find Yoopta-Editor useful, consider supporting the project:\n\n- Star this repository\n- [Sponsor on GitHub](https://github.com/sponsors/Darginec05)\n- [Buy me a coffee](https://www.buymeacoffee.com/darginec05)\n- Share with others\n\n## Contributing\n\n- [Report bugs or request features](https://github.com/Darginec05/Yoopta-Editor/issues/new/choose)\n- [Start a discussion](https://github.com/Darginec05/Yoopta-Editor/discussions/new/choose)\n- [Join Discord](https://discord.gg/Dt8rhSTjsn)\n- See [Contributing Guidelines](./CONTRIBUTING.md)\n\n\u003ca href=\"https://github.com/Darginec05/Yoopta-Editor/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=Darginec05/Yoopta-Editor\" /\u003e\n\u003c/a\u003e\n\n## License\n\n[MIT License](./LICENSE)\n\n## Contacts\n\n- [Discord](https://discord.gg/Dt8rhSTjsn)\n- [Twitter](https://twitter.com/LebovskiYoo)\n- [GitHub](https://github.com/Darginec05)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoopta-editor%2Fyoopta-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyoopta-editor%2Fyoopta-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoopta-editor%2Fyoopta-editor/lists"}