{"id":28630900,"url":"https://github.com/appflowy-io/appflowy-web-editor","last_synced_at":"2025-08-02T03:09:41.700Z","repository":{"id":268400356,"uuid":"903983930","full_name":"AppFlowy-IO/AppFlowy-Web-Editor","owner":"AppFlowy-IO","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-01T05:24:22.000Z","size":508,"stargazers_count":7,"open_issues_count":0,"forks_count":3,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-01T05:33:14.721Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AppFlowy-IO.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-16T02:59:46.000Z","updated_at":"2025-07-01T05:24:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"44abb278-d473-4c2e-8e98-c9f3d5534b7f","html_url":"https://github.com/AppFlowy-IO/AppFlowy-Web-Editor","commit_stats":null,"previous_names":["appflowy-io/appflowy-web-editor"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AppFlowy-IO/AppFlowy-Web-Editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AppFlowy-IO%2FAppFlowy-Web-Editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AppFlowy-IO%2FAppFlowy-Web-Editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AppFlowy-IO%2FAppFlowy-Web-Editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AppFlowy-IO%2FAppFlowy-Web-Editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AppFlowy-IO","download_url":"https://codeload.github.com/AppFlowy-IO/AppFlowy-Web-Editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AppFlowy-IO%2FAppFlowy-Web-Editor/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268330911,"owners_count":24233151,"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","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-06-12T13:09:03.878Z","updated_at":"2025-08-02T03:09:41.612Z","avatar_url":"https://github.com/AppFlowy-IO.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AppFlowy Web Editor\n\nA modern editor library with support for rich text, markdown, and code editing.\n\n## ✨ Features\n\n- 🌓 Day/Night mode switching\n- 🌍 Multi-language support\n- 📱 Responsive design\n- 💪 TypeScript support\n- 📝 Rich text, markdown, and code editing\n- 📦 Easy to integrate\n- 🎉 And more!\n\n## 📦 Installation\n\nTo install the AppFlowy Web Editor, run the following command:\n\n```bash\nnpm install @appflowyinc/editor\n\n# or\n\nyarn add @appflowyinc/editor\n\n# or\n\npnpm add @appflowyinc/editor\n```\n\nNote: This package requires these peer dependencies to be installed:\n\n```\n\"peerDependencies\": {\n    \"i18next\": \"^22.4.10\",\n    \"i18next-resources-to-backend\": \"^1.2.1\",\n    \"react\": \"^18.3.1\",\n    \"react-dom\": \"^18.3.1\",\n    \"react-i18next\": \"^14.1.0\",\n    \"slate\": \"^0.112.0\",\n    \"slate-history\": \"^0.110.3\",\n    \"slate-react\": \"^0.112.0\"\n}\n```\n\n## 🚀 Quick Start\n\nTo use the AppFlowy Web Editor, import the `Editor` and `EditorProvider` components from the package and wrap your app\n\nNote: Using the editor requires the `EditorProvider` component. Therefore, each `Editor` component needs to be wrapped\nby the corresponding `EditorProvider`\n\n```tsx\n\nimport { Editor, EditorProvider } from '@appflowyinc/editor';\n\nconst App = () =\u003e {\n  return \u003cEditorProvider\u003e\n    \u003cEditor/\u003e\n  \u003c/EditorProvider\u003e\n};\n\nexport default App;\n```\n\n## 🎨 Custom Toolbar\n\nThe AppFlowy Web Editor provides a toolbar with various options for editing content. You can customize the toolbar by\npassing the `ToolbarComponent` prop to the `Editor` component.\n\n```tsx\nimport { Editor, EditorProvider, FixedToolbar } from '@appflowyinc/editor';\n\nconst App = () =\u003e {\n  return \u003cEditorProvider\u003e\n    \u003cEditor ToolbarComponent={FixedToolbar}/\u003e\n  \u003c/EditorProvider\u003e;\n};\n\nexport default App;\n```\n\n## 📚 Apply Data\n\nYou can get `editor` from the `useEditor` hook and apply data to the editor.\n\n```tsx\nimport { Editor, EditorProvider, useEditor, NodeType } from '@appflowyinc/editor';\n\nconst App = () =\u003e {\n  const editor = useEditor();\n\n  useEffect(() =\u003e {\n    editor.applyData({\n      type: NodeType.Paragraph,\n      delta: [\n        {\n          insert: 'Hello, World!',\n        },\n      ],\n      children: []\n    });\n\n    // or apply markdown\n    editor.applyMarkdown('# Hello, World!');\n  }, []);\n\n  return\n  \u003cEditor/\u003e;\n};\n\nconst Main = () =\u003e {\n  return \u003cEditorProvider\u003e\n    \u003cApp/\u003e\n  \u003c/EditorProvider\u003e;\n};\n\nexport default App;\n```\n\n## 💡 Theme Switching\n\nThe AppFlowy Web Editor supports theme switching between light and dark modes. You can customize the themes by passing\nthe `theme` prop to the `Editor` component.\n\n```tsx\nimport { Editor, EditorProvider } from '@appflowyinc/editor';\n\nconst App = () =\u003e {\n  return \u003cEditorProvider\u003e\n    \u003cEditor theme={'dark'}/\u003e\n  \u003c/EditorProvider\u003e;\n};\n\nexport default App;\n```\n\n## 🌍 Multi-language Usage\n\nThe AppFlowy Web Editor supports multiple languages. You can customize the language by passing the `language` prop to\nthe `Editor` component.\n\n```tsx\n\nimport { Editor, EditorProvider } from '@appflowyinc/editor';\n// Optionally, you can import the language resources from the package\nimport zh from '@appflowyinc/editor/locales/zh-CN.json';\n\nimport hostI18n from 'i18next';\n\nconst App = () =\u003e {\n  return \u003cI18nextProvider i18n={hostI18n}\u003e\n    \u003cEditorProvider\u003e\n      \u003cEditor locale={{\n        // The language code.\n        lang: 'zh-CN',\n        // Optionally, you can pass the language resources or let it use the default resources\n        resources: zh,\n      }}/\u003e\n    \u003c/EditorProvider\u003e\n  \u003c/I18nextProvider\u003e;\n};\n\nexport default App;\n```\n\n### Supported Languages\n\n- English(en)\n- Arabic(ar-SA)\n- Catalan(ca-ES)\n- Central Kurdish(ckb-KU)\n- Czech(cs-CZ)\n- German(de-DE)\n- Spanish(es-VE)\n- Basque(eu-ES)\n- Persian(fa)\n- French(fr-CA)\n- French(fr-FR)\n- Hebrew(he)\n- Hungarian(hu-HU)\n- Indonesian(id-ID)\n- Italian(it-IT)\n- Japanese(ja-JP)\n- Korean(ko-KR)\n- Polish(pl-PL)\n- Brazilian Portuguese(pt-BR)\n- Portuguese(pt-PT)\n- Russian(ru-RU)\n- Swedish(sv-SE)\n- Thai(th-TH)\n- Turkish(tr-TR)\n- Ukrainian(uk-UA)\n- Vietnamese(vi)\n- Vietnamese(vi-VN)\n- Simplified Chinese(zh-CN)\n- Traditional Chinese(zh-TW)\n\n## 📖 API\n\n### Editor Props\n\n| Prop             | Type                                                   | Default   | Description                          |\n|------------------|--------------------------------------------------------|-----------|--------------------------------------|\n| theme            | `'light' \\| 'dark'`                                    | `'light'` | Editor theme                         |\n| locale           | `{ lang: string; resources?: Record\u003cstring, string\u003e }` | -         | Editor language configuration        |\n| readOnly         | `boolean`                                              | `false`   | Whether the editor is read-only      |\n| onChange         | `(data: EditorData) =\u003e void`                           | -         | Callback when editor content changes |\n| initialValue     | `EditorData`                                           | -         | Initial editor content               |\n| modalZIndex      | `number`                                               | 50        | Editor modal z-index                 |\n| ToolbarComponent | `FC`                                                   | -         | Custom toolbar component             |\n\n### EditorProvider Props\n\n| Prop     | Type        | Default | Description             |\n|----------|-------------|---------|-------------------------|\n| children | `ReactNode` | -       | The children components |\n\n### EditorData\n\n```ts\ntype EditorData = {\n  type: NodeType;\n  data: Record\u003cstring, any\u003e;\n  delta: DeltaOperation[];\n  children: EditorData[];\n};\n```\n\n### NodeType\n\n```ts\n\nenum NodeType {\n  Paragraph = 'paragraph',\n  Heading = 'heading',\n  NestedBlock = 'nested-block',\n  Todo = 'todo_list',\n  NumberedList = 'numbered_list',\n  BulletedList = 'bulleted_list',\n  Quote = 'quote',\n}\n```\n\n### Hooks\n\n#### useEditor\n\nReturns the editor instance with methods to control the editor.\n\n```ts\nconst editor = useEditor();\n```\n\n| Method        | Description                  |\n|---------------|------------------------------|\n| applyData     | Apply data to the editor     |\n| applyMarkdown | Apply markdown to the editor |\n\n## 🔨 Development\n\nGuide\n\n###\n\nDevelopment\nMode\n\n```\n\n# Install dependencies\n\npnpm i\n\n# Start development server\n\npnpm run dev\n\n# Build library\n\npnpm run build\n\n```\n\nTo run the demo locally:\n\n```bash\npnpm install\npnpm run dev\n```\n\nOpen [http://localhost:5173/](http://localhost:5173/) with your browser to see the result.\n![img.png](img.png)\n\nSwitch between light and dark mode by clicking the theme switcher in the top right corner.\n![img_1.png](img_1.png)\n\n## 📄 License\n\nMIT License\n\n```\n\n[]: # (END) README.md\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappflowy-io%2Fappflowy-web-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fappflowy-io%2Fappflowy-web-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappflowy-io%2Fappflowy-web-editor/lists"}