{"id":22431920,"url":"https://github.com/yoopta-editor/Yoopta-Editor","last_synced_at":"2025-08-01T12:33:26.401Z","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":"2024-12-03T20:51:55.000Z","size":58139,"stargazers_count":1475,"open_issues_count":79,"forks_count":114,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-12-04T12:07:08.369Z","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},"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":"2024-12-04T01:12:52.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":1791,"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":228106593,"owners_count":17870437,"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-05T22:01:47.984Z","updated_at":"2025-08-01T12:33:26.364Z","avatar_url":"https://github.com/yoopta-editor.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Darginec05","https://www.buymeacoffee.com/darginec05"],"categories":["TypeScript"],"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[![](https://img.shields.io/static/v1?label=Sponsor\u0026message=%E2%9D%A4\u0026logo=GitHub\u0026color=%23fe8e86)](https://github.com/sponsors/Darginec05)\n\n# Welcome to Yoopta-Editor@v4🎉\n\n![](/docs/public/yoopta_intro.gif)\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\nWith Yoopta-Editor, you can customize everything to fit exactly what you need. Want to tweak the look, add cool features, or craft a completely custom user interface? No problem. Yoopta-Editor gives you the flexibility to do it all, making it easy to create the perfect tool for your project.\nAll of this is customizable, extensible, and easy to set up!\n\n## Features\n\n- Easy setup\n- Default list of powerful plugins\n- Many typical solved problems in UX behaviour.\n- Media plugins on steroids with optimization and lazy loadings\n- Code plugin on steroids with themes and languages\n- Each plugin can be easily customized and extensible\n- Drag and drop, nested dnd is supported also\n- Selection box for manipulating multiple blocks at once\n- You can create your own plugin\n- A list of useful tools (ActionMenu, Toolbar etc.) for the convenience of working with the editor\n- Automatic lazy loading for media components (eg. embeds)\n- Large documents\n- Mobile friendly\n- Indent and outdent for every plugin by tabs and shift+tabs\n- Editor instance to programmatically control your content\n- Editor events for saving to DB in real-time\n- Exports in markdown, html, plain text\n- Shortcuts, hotkeys. And customization for this!\n- Super AI tools not for HYPE, but for real useful work with editor content - [in progress]\n- The soul invested in the development of this editor 💙\n- ... and other features that I forgot to write about in this list 😅. Just check it in examples!\n\n## Packages\n\n- Core\n\n  - [**@yoopta/editor**](https://github.com/Darginec05/Yoopta-Editor/blob/master/packages/core/editor/README.md)\n  - [**@yoopta/exports**](https://github.com/Darginec05/Yoopta-Editor/blob/master/packages/core/exports/README.md)\n  - [**@yoopta/email-builder**](https://github.com/yoopta-editor/Email-Builder)\n\n- Plugins\n\n  - [**@yoopta/paragraph**](https://github.com/Darginec05/Yoopta-Editor/blob/master/packages/plugins/paragraph/README.md)\n  - [**@yoopta/blockquote**](https://github.com/Darginec05/Yoopta-Editor/blob/master/packages/plugins/blockquote/README.md)\n  - [**@yoopta/accordion**](https://github.com/Darginec05/Yoopta-Editor/blob/master/packages/plugins/accordion/README.md)\n  - [**@yoopta/divider**](https://github.com/Darginec05/Yoopta-Editor/blob/master/packages/plugins/divider/README.md)\n  - [**@yoopta/table**](https://github.com/Darginec05/Yoopta-Editor/blob/master/packages/plugins/table/README.md)\n  - [**@yoopta/code**](https://github.com/Darginec05/Yoopta-Editor/blob/master/packages/plugins/code/README.md)\n  - [**@yoopta/embed**](https://github.com/Darginec05/Yoopta-Editor/blob/master/packages/plugins/embed/README.md)\n  - [**@yoopta/image**](https://github.com/Darginec05/Yoopta-Editor/blob/master/packages/plugins/image/README.md)\n  - [**@yoopta/link**](https://github.com/Darginec05/Yoopta-Editor/blob/master/packages/plugins/link/README.md)\n  - [**@yoopta/file**](https://github.com/Darginec05/Yoopta-Editor/blob/master/packages/plugins/file/README.md)\n  - [**@yoopta/callout**](https://github.com/Darginec05/Yoopta-Editor/blob/master/packages/plugins/callout/README.md)\n  - [**@yoopta/video**](https://github.com/Darginec05/Yoopta-Editor/blob/master/packages/plugins/video/README.md)\n  - [**@yoopta/lists**](https://github.com/Darginec05/Yoopta-Editor/blob/master/packages/plugins/lists/README.md)\n  - [**@yoopta/headings**](https://github.com/Darginec05/Yoopta-Editor/blob/master/packages/plugins/headings/README.md)\n\n- Tools\n\n  - **@yoopta/action-menu-list**\n  - **@yoopta/toolbar**\n  - **@yoopta/link-tool**\n  - _@yoopta/chat-gpt-assistant_ - **soon**\n\n- Marks\n  - **@yoopta/marks** - _[Bold, Italic, CodeMark, Underline, Strike, Highlight]_\n\n## Getting Started\n\nFirst, install the peer dependencies and the Yoopta core package with at least one plugin\n\n```bash\n## slate, slate-react, react, react-dom - peer dependencies\n## @yoopta/editor - core package\nyarn add slate slate-react @yoopta/editor @yoopta/paragraph\n# or\nnpm install slate slate-react @yoopta/editor @yoopta/paragraph\n```\n\n### Start from core package\n\nImport from core package **@yoopta/editor** Editor Component and function to create editor instance\n\n```jsx\nimport YooptaEditor, { createYooptaEditor } from '@yoopta/editor';\n\nconst plugins = [...];\n\nexport default function Editor() {\n  const editor = useMemo(() =\u003e createYooptaEditor(), []);\n   const [value, setValue] = useState\u003cYooptaContentValue\u003e();\n\n  const onChange = (value: YooptaContentValue, options: YooptaOnChangeOptions) =\u003e {\n    setValue(value);\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cYooptaEditor\n        editor={editor}\n        plugins={plugins}\n        value={value}\n        onChange={onChange}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nAvailable props for YooptaEditor components\n\n```typescript\ntype YooptaEditor = {\n  /* editor instance */\n  editor: YooEditor;\n  /* list of plugins */\n  plugins: YooptaPlugin[];\n  /* list of marks */\n  marks?: YooptaMark\u003cany\u003e[];\n  /* Value. [Default] - undefined */\n  value?: YooptaContentValue;\n  /* Change handler  */\n  onChange?: (value: YooptaContentValue, options: YooptaOnChangeOptions) =\u003e void;\n  /* Path change handler */\n  onPathChange?: (path: YooptaPath) =\u003e void;\n  /* autoFocus. [Default] - true */\n  autoFocus?: boolean;\n  /* className - class name */\n  className?: string;\n  /* These props define the area for the selection box. \n  Good practice - passing parent element.\n  [Default] - document */\n  selectionBoxRoot?: HTMLElement | React.MutableRefObject\u003cHTMLElement | null\u003e | false;\n  children?: React.ReactNode;\n  /* Props for tools. You can get access to any passed tools using `useTools` hook from @yoopta/editor  */\n  tools?: Partial\u003cTools\u003e;\n  placeholder?: string;\n  readOnly?: boolean;\n  /* Width. [Default] - 400px. Will be DEPRECATED, use style object  */\n  width?: number | string;\n  /* Style CSS Object. [Default] - { width: '400px', paddingBottom: '100px' } */\n  style?: number | string;\n  /* Id for your editor instance. Can be useful for multiple editors */\n  id?: number | string;\n};\n```\n\n### Plugins:\n\nHere is list of available plugins\n\n- @yoopta/paragraph\n- @yoopta/blockquote\n- @yoopta/table\n- @yoopta/divider\n- @yoopta/accordion\n- @yoopta/code\n- @yoopta/embed\n- @yoopta/image\n- @yoopta/link\n- @yoopta/file\n- @yoopta/callout\n- @yoopta/video\n- @yoopta/lists\n- @yoopta/headings\n\n### How to use\n\n```jsx\nimport YooptaEditor, { createYooptaEditor } from '@yoopta/editor';\nimport Paragraph from '@yoopta/paragraph';\nimport Blockquote from '@yoopta/blockquote';\n\nconst plugins = [Paragraph, Blockquote];\n\nexport default function Editor() {\n  const editor = useMemo(() =\u003e createYooptaEditor(), []);\n  const [value, setValue] = useState\u003cYooptaContentValue\u003e();\n  const onChange = (value: YooptaContentValue, options: YooptaOnChangeOptions) =\u003e {\n    setValue(value);\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cYooptaEditor\n        editor={editor}\n        placeholder=\"Type text..\"\n        value={value}\n        onChange={onChange}\n        // here we go\n        plugins={plugins}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n**_[Check code with plugins](https://github.com/Darginec05/Yoopta-Editor/tree/master/web/next-example/src/components/examples/withBaseFullSetup/index.tsx#L27)_**\n\n### Tools\n\nYoopta-Editor provides useful tools that can help you when working with the editor\n\nHere is a list of available tools\n\n- @yoopta/action-menu-list\n- @yoopta/toolbar\n- @yoopta/link-tool\n- _@yoopta/chat-gpt-assistant_ - **soon**\n\n**_[Check code with tools](https://github.com/Darginec05/Yoopta-Editor/tree/master/web/next-example/src/components/examples/withBaseFullSetup/index.tsx#L76)_**\n\n### How to use\n\n```jsx\n// IMPORT TOOLS\nimport LinkTool, { DefaultLinkToolRender } from '@yoopta/link-tool';\nimport ActionMenu, { DefaultActionMenuRender } from '@yoopta/action-menu-list';\nimport Toolbar, { DefaultToolbarRender } from '@yoopta/toolbar';\n\n// Tools should be defined outside component\nconst TOOLS = {\n  Toolbar: {\n    tool: Toolbar,\n    render: DefaultToolbarRender,\n  },\n  ActionMenu: {\n    tool: ActionMenu,\n    render: DefaultActionMenuRender,\n  },\n  LinkTool: {\n    tool: LinkTool,\n    render: DefaultLinkToolRender,\n  },\n};\n\nexport default function Editor() {\n  const editor = useMemo(() =\u003e createYooptaEditor(), []);\n  const [value, setValue] = useState\u003cYooptaContentValue\u003e();\n  const onChange = (value: YooptaContentValue, options: YooptaOnChangeOptions) =\u003e {\n    setValue(value);\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cYooptaEditor\n        editor={editor}\n        plugins={plugins}\n        placeholder=\"Type text..\"\n        value={value}\n        onChange={onChange}\n        // here we go\n        tools={TOOLS}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Marks\n\nMarks are simple text formats\n\nHere is a list of available marks from **@yoopta/marks** package\n\n- Bold\n- Italic\n- CodeMark\n- Underline\n- Strike\n- Highlight\n\n### How to use\n\n```jsx\n// IMPORT MARKS\nimport { Bold, Italic, CodeMark, Underline, Strike, Highlight } from '@yoopta/marks';\n\nconst MARKS = [Bold, Italic, CodeMark, Underline, Strike, Highlight];\n\nexport default function Editor() {\n  const editor = useMemo(() =\u003e createYooptaEditor(), []);\n   const [value, setValue] = useState\u003cYooptaContentValue\u003e();\n\n  const onChange = (value: YooptaContentValue, options: YooptaOnChangeOptions) =\u003e {\n    setValue(value);\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cYooptaEditor\n        editor={editor}\n        placeholder=\"Type text..\"\n        plugins={plugins}\n        value={value}\n        onChange={onChange}\n        tools={TOOLS}\n        // here we go\n        marks={MARKS}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n**_[Check code with marks](https://github.com/Darginec05/Yoopta-Editor/tree/master/web/next-example/src/components/examples/withBaseFullSetup/index.tsx#L85)_**\n\n## Examples - DEMO's\n\nFind below useful examples of utilising the Yoopta-Editor in your projects. These examples will help you get started quickly and show you how easy it is to integrate and customize the editor to your needs.\n\nOkay, let's go!\n\n- [With basic example](https://yoopta.dev/examples/withBaseFullSetup)\n- [With custom toolbar (Notion and Medium example)](https://yoopta.dev/examples/withCustomToolbar)\n- [With Notion Action Menu](https://yoopta.dev/examples/withNotionActionMenu)\n- [With dark theme](https://yoopta.dev/examples/withDarkTheme)\n- [With media plugins](https://yoopta.dev/examples/withMedia)\n- [With extended plugins](https://yoopta.dev/examples/withExtendedPlugin)\n- [With readonly](https://yoopta.dev/examples/withReadOnly)\n- [With custom HTML attributes](https://yoopta.dev/examples/withCustomHTMLAttributes)\n- [With custom mark](https://yoopta.dev/examples/withCustomMark)\n- [With chat slack](https://yoopta.dev/examples/withChatSlack)\n- ...and check other examples in the sidebar list\n\n## Give us ⭐️ star\n\nIf you find Yoopta-Editor useful and valuable for your projects, I kindly ask you to show your support by giving to this repo ⭐️ star on GitHub. Your appreciation means a lot to me and helps me grow and continue improving the editor for the community. 💙\n\n## Roadmap\n\n- Develop other powerful plugins\n- AI tools\n- Simplify API for creating plugins\n- Collaborative mode\n- Plugin system\n- Optimizations for media components\n- Create package @yoopta/hotkeys to manage hotkeys\n- Rethink the approach for just rendering to increase SEO performance\n- Continue improving the project. [We are listening to you and your requests](https://github.com/Darginec05/Yoopta-Editor/discussions/new/choose) 💙\n\n## Support\n\nHey there! If you find this project useful or it helps you in your work, consider supporting it to ensure continuous improvements and development. Your donations help keep the project alive and allow me to invest more time and resources into maintaining and enhancing it.\n\n### How to Support\n\nYou can support the project by:\n\n- ⭐ Star this repository to show your appreciation.\n- 🗣 Share the project with your friends, colleagues, and on social media.\n- 💸 Make a donation to help fund development efforts.\n\n### Donation Options\n\n- [Github Sponsors](https://github.com/sponsors/Darginec05)\n\nAny contribution, big or small, is highly appreciated and helps me maintain the project and add exciting new features. Thank you for your support! 🙏\n\n## Project structure\n\n```text\npackages/\n├── core - core components of the editor\n├── marks - text marks\n├── plugins - editor plugin extensions\n├── tools - tools packages\n└── development - developer playground\n```\n\n## Contributing\n\nIf you're ready to support Yoopta-Editor, here's how you can do it:\n\n- If you've spotted a bug or thinking of a feature [raise an issue](https://github.com/Darginec05/Yoopta-Editor/issues/new/choose)\n- If you want to collaborate on the project, find an issue you like to work on and suggest your changes. Checkout [contributing guidelines](./CONTRIBUTING.md).\n- If you want to discuss your idea feel free to create a [discussion](https://github.com/Darginec05/Yoopta-Editor/discussions/new/choose)\n- Or join our [Discord Community](https://discord.gg/Dt8rhSTjsn) and get in touch with us\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\nYoopta-Editor is released under the [MIT License](https://github.com/Darginec05/Yopta-Editor/blob/master/LICENSE). Feel free to use and modify it for your projects.\n\n## Contacts\n\n- [Discord Community](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"}