{"id":18976408,"url":"https://github.com/ant-design/pro-editor","last_synced_at":"2025-03-31T04:04:18.583Z","repository":{"id":175283992,"uuid":"637603722","full_name":"ant-design/pro-editor","owner":"ant-design","description":"๐Ÿ•น๏ธ The Ultimate Editor UI Framework and Components","archived":false,"fork":false,"pushed_at":"2024-09-10T08:02:35.000Z","size":5879,"stargazers_count":237,"open_issues_count":28,"forks_count":28,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-03-24T02:32:53.542Z","etag":null,"topics":["antd","editor","pro-components"],"latest_commit_sha":null,"homepage":"https://pro-editor.antdigital.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/ant-design.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2023-05-08T02:46:22.000Z","updated_at":"2025-03-21T09:44:20.000Z","dependencies_parsed_at":"2023-12-04T08:23:29.276Z","dependency_job_id":"e7b51da3-769e-4f3f-960e-4d2cdd7034a8","html_url":"https://github.com/ant-design/pro-editor","commit_stats":{"total_commits":532,"total_committers":19,"mean_commits":28.0,"dds":0.7124060150375939,"last_synced_commit":"f99ed3303bf2d476f657589d62cbeb0e8c34e8ca"},"previous_names":["ant-design/pro-editor"],"tags_count":108,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ant-design%2Fpro-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ant-design%2Fpro-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ant-design%2Fpro-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ant-design%2Fpro-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ant-design","download_url":"https://codeload.github.com/ant-design/pro-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246413230,"owners_count":20773053,"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":["antd","editor","pro-components"],"created_at":"2024-11-08T15:24:36.633Z","updated_at":"2025-03-31T04:04:18.541Z","avatar_url":"https://github.com/ant-design.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg height=\"160\" src=\"https://gw.alipayobjects.com/zos/kitchen/wzToJwlSw%24/logo.svg\"\u003e\n\n\u003ch1\u003eProEditor\u003c/h1\u003e\n\nThe Ultimate Editor UI Framework and Components\n\n[![][npm-release-shield]][npm-release-link]\n[![][npm-downloads-shield]][npm-downloads-link]\n[![][github-releasedate-shield]][github-releasedate-link]\n[![][github-action-test-shield]][github-action-test-link]\n[![][github-action-release-shield]][github-action-release-link]\n[![][codecov-shield]][codecov-link] \u003cbr/\u003e\n[![][github-contributors-shield]][github-contributors-link]\n[![][github-forks-shield]][github-forks-link]\n[![][github-stars-shield]][github-stars-link]\n[![][github-issues-shield]][github-issues-link]\n[![][github-license-shield]][github-license-link] \u003cbr/\u003e\n[![][ant-design-shield]][ant-design-link]\n[![][devops-dumi-shield]][devops-dumi-link]\n[![][devops-father-shield]][devops-father-link]\n\nEnglish ยท [็ฎ€ไฝ“ไธญๆ–‡](./README.zh-CN.md) ยท [Changelog](./CHANGELOG.md) . [Report Bug][github-issues-link] ยท [Request Feature][github-issues-link]\n\n![](https://gw.alipayobjects.com/zos/kitchen/2rXP4ZVHCo/pro-editor.webp)\n\n\u003c/div\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ckbd\u003eTable of contents\u003c/kbd\u003e\u003c/summary\u003e\n\n#### TOC\n\n- [๐Ÿ“ฆ Installation](#-installation)\n - [Compile with Next.js](#compile-with-nextjs)\n- [๐Ÿ”จ Usage](#-usage)\n- [โœจ Features](#-features)\n - [Empowering Features of ProEditor](#empowering-features-of-proeditor)\n - [Framework Architecture](#framework-architecture)\n- [๐Ÿ‘€ Showcase](#-showcase)\n- [๐Ÿ–ฅ Browser compatibility](#-browser-compatibility)\n- [โŒจ๏ธ Local Development](#๏ธ-local-development)\n- [๐Ÿค Contributing](#-contributing)\n- [๐Ÿ›ฃ๏ธ Ecosystem](#๏ธ-ecosystem)\n\n####\n\n\u003c/details\u003e\n\n## ๐Ÿ“ฆ Installation\n\n\u003e \\[!IMPORTANT]\\\n\u003e This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).\n\nTo install `@ant-design/pro-editor`, run the following command:\n\n```bash\n$ pnpm install @ant-design/pro-editor\n```\n\n### Compile with Next.js\n\n\u003e \\[!NOTE]\\\n\u003e By work correct with Next.js SSR, add `transpilePackages: ['@ant-design/pro-editor']` to `next.config.js`. For example:\n\n```js\nconst nextConfig = {\n transpilePackages: ['@ant-design/pro-editor', 'leva', 'zustand'],\n};\n```\n\n\u003cbr/\u003e\n\n## ๐Ÿ”จ Usage\n\n```jsx\nimport { SmileOutlined } from '@ant-design/icons';\nimport { ActionIcon } from '@ant-design/pro-editor';\n\nexport default () =\u003e (\n \u003cActionIcon\n title={'Function button description'}\n icon={\u003cSmileOutlined /\u003e}\n onClick={() =\u003e {\n alert('Trigger action');\n }}\n /\u003e\n);\n```\n\n\u003cbr/\u003e\n\n## โœจ Features\n\n\u003e \\[!NOTE]\n\u003e\n\u003e Front-end component libraries have revolutionized development, boosting efficiency by orders of magnitude and elevating user experience. Yet, as mature as libraries like Ant Design (antd) and ProComponents are, one might wonder if there's any room left for innovation.\n\n[![](https://next.ossinsight.io/widgets/official/compose-activity-trends/thumbnail.png?repo_id=637603722\u0026image_size=auto\u0026color_scheme=dark)](https://next.ossinsight.io/widgets/official/compose-activity-trends?repo_id=637603722)\n\n\u003cbr/\u003e\n\n### Empowering Features of ProEditor\n\n\u003e \\[!NOTE]\n\u003e\n\u003e We envision ProEditor as the foundational library for editing components, akin to antd, enabling developers to easily create complex interactive components with an inherently superior user experience. This is the rationale behind the `ProEditor`.\n\n**Our Principles for ProEditor:**\n\n- ๐Ÿ–๏ธ **Intuitive Editing**: Supports natural user interactions like multi-selection, deselection, and keyboard shortcuts, ensuring a smooth editing experience.\n- โœจ **Refined by Default**: Enhances Ant Design components to deliver a superior user experience with more polish and refinement.\n- ๐Ÿ”ง **Open Flexibility**: Provides atomic-level capabilities, offering a wide range of components, hooks, and utility functions for extensive customization and flexibility.\n\n\u003cbr/\u003e\n\n**UI Framework and Frontend Component Solutions in the Editor Field:**\n\n\u003e \\[!TIP]\n\u003e\n\u003e ProEditor concentrates on expanding the limits of the feasible and augmenting the array of tools available to developers for the construction of sophisticated, interactive, and user-centric web applications. For instance:\n\n- ๐Ÿ“ฆ **DraggablePanel**: Allows for resizable and movable panels, enhancing the interactivity of the user interface.\n- ๐Ÿ“ **ColumnList**: Offers a user-friendly sortable list that is manageable through column definitions, simplifying complex list interactions.\n- ๐ŸŽจ **FreeCanvas**: Provides a zoomable canvas similar to applications like Sketch or Figma, giving users a vast space for creative design.\n- ๐Ÿ” **IconPicker**: An icon selection tool that is compatible with iconfont, making it easier to integrate a wide range of icons into the design.\n- ๐Ÿ‘ฅ **Online Collaboration**: Incorporates multi-user capabilities using technologies like yjs and zustand store, enabling real-time collaborative editing and interaction.\n\n\u003cbr/\u003e\n\n### Framework Architecture\n\nProEditor is structured to facilitate these principles effectively.\n\n![][architecture]\n\n\u003cbr/\u003e\n\n## ๐Ÿ‘€ Showcase\n\nLet's showcase some of ProEditor's signature components:\n\n| **DraggablePanel** | **ColumnList** |\n| :-------------------------------------------------------: | :-------------------------------------------------------: |\n| For resizable and movable panels | A user-friendly sortable list based on column definitions |\n| ![][prevew-1] | ![][prevew-2] |\n| **FreeCanvas** | **IconPicker** |\n| A limitless zoomable canvas akin to Sketch or Figma | An icon selection tool compatible with iconfont |\n| ![][prevew-3] | ![][prevew-4] |\n| **Online Collaboration** | |\n| Multi-user capabilities wrapped in yjs and zustand store. | |\n| ![][prevew-5] | |\n\n\u003cbr/\u003e\n\n## ๐Ÿ–ฅ Browser compatibility\n\n\u003e \\[!NOTE]\n\u003e\n\u003e - Modern browsers and Internet Explorer 11 (with [polyfills](https://stackoverflow.com/questions/57020976/polyfills-in-2019-for-ie11))\n\u003e - [Electron](https://www.electronjs.org/)\n\n| [![edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![electron_48x48](https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png)](http://godban.github.io/browsers-support-badges/) |\n| ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |\n\n\u003cbr/\u003e\n\n## โŒจ๏ธ Local Development\n\nYou can use Github Codespaces for online development:\n\n[![][github-codespace-shield]][github-codespace-link]\n\nOr clone it for local development:\n\n```bash\n$ git clone https://github.com/ant-design/pro-editor.git\n$ cd pro-editor\n$ pnpm install\n$ pnpm dev\n```\n\n\u003cbr/\u003e\n\n## ๐Ÿค Contributing\n\n\u003e \\[!IMPORTANT]\n\u003e\n\u003e Join our collaborative ecosystem. Your contributions are the heartbeat of our project. Here's how you can be an integral part of our vibrant community:\n\n- **Integrate and Innovate**: Incorporate Ant Design Pro, umi, and ProEditor into your projects. Your real-world usage and feedback are invaluable to us.\n- **Voice Your Insights**: Encounter a glitch? Have a query? Your perspectives matter. Share them by submitting [issues][github-issues-link] and help us enhance the user experience.\n- **Shape the Future**: Have code enhancements or feature ideas? We invite you to propose [pull requests][pr-welcome-link] and contribute directly to the evolution of our codebase.\n\nEvery contribution, big or small, is celebrated. Join us in our mission to refine and elevate the world of open-source enterprise UI components. ๐Ÿ˜ƒ\n\n[![][pr-welcome-shield]][pr-welcome-link]\n\n\u003ca href=\"https://github.com/ant-design/pro-editor/graphs/contributors\" target=\"_blank\"\u003e\n \u003ctable\u003e\n \u003ctr\u003e\n \u003cth colspan=\"2\"\u003e\n \u003cbr\u003e\u003cimg src=\"https://contrib.rocks/image?repo=ant-design/pro-editor\"\u003e\u003cbr\u003e\u003cbr\u003e\n \u003c/th\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\n \u003cimg src=\"https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active\u0026period=past_28_days\u0026owner_id=12101536\u0026repo_ids=637603722\u0026image_size=2x3\u0026color_scheme=dark\"\u003e\n \u003c/td\u003e\n \u003ctd rowspan=\"2\"\u003e\n \u003cimg src=\"https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active\u0026period=past_28_days\u0026owner_id=12101536\u0026repo_ids=637603722\u0026image_size=4x7\u0026color_scheme=dark\"\u003e\n \u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\n \u003cimg src=\"https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new\u0026period=past_28_days\u0026owner_id=12101536\u0026repo_ids=637603722\u0026image_size=2x3\u0026color_scheme=dark\"\u003e\n \u003c/td\u003e\n \u003c/tr\u003e\n \u003c/table\u003e\n\u003c/a\u003e\n\n\u003cbr/\u003e\n\n## ๐Ÿ›ฃ๏ธ Ecosystem\n\n- **[ProComponents](https://github.com/ant-design/pro-components)** - Designed for Enterprise-Level Application, Use Ant Design like a Pro!.\n- **[ProEditor](https://github.com/ant-design/pro-editor)** - The Ultimate Editor UI Framework and Components.\n- **[ProFlow](https://github.com/ant-design/pro-flow)** - A Flow Editor Framework base on React-Flow.\n- **[ProChat](https://github.com/ant-design/pro-chat)** - Components Library for Quickly Building LLM Chat Interfaces.\n\n\u003cbr/\u003e\n\n---\n\n#### ๐Ÿ“ License\n\nCopyright ยฉ 2023 - present [AFX][ant-design-link] \u0026 [Ant Digital](https://antdigital.com). \u003cbr/\u003e\nThis project is [MIT](./LICENSE) licensed.\n\n\u003c!-- LINK GROUP --\u003e\n\n[ant-design-link]: https://ant.design\n[ant-design-shield]: https://img.shields.io/badge/-Ant%20Design-1677FF?labelColor=black\u0026logo=antdesign\u0026style=flat-square\n[architecture]: https://gw.alipayobjects.com/zos/kitchen/2F0sXx1uad/architecture.webp\n[codecov-link]: https://codecov.io/gh/ant-design/pro-editor\n[codecov-shield]: https://img.shields.io/codecov/c/github/ant-design/pro-editor?color=1677FF\u0026labelColor=black\u0026style=flat-square\u0026logo=codecov\u0026logoColor=white\n[devops-dumi-link]: https://d.umijs.org/\n[devops-dumi-shield]: https://img.shields.io/badge/docs%20by-dumi-blue?color=1677FF\u0026labelColor=black\u0026style=flat-square\n[devops-father-link]: https://github.com/umijs/father\n[devops-father-shield]: https://img.shields.io/badge/build%20with-father-028fe4.svg?color=1677FF\u0026labelColor=black\u0026style=flat-square\n[github-action-release-link]: https://github.com/ant-design/pro-editor/actions/workflows/release.yml\n[github-action-release-shield]: https://img.shields.io/github/actions/workflow/status/ant-design/pro-editor/release.yml?color=1677FF\u0026label=release\u0026labelColor=black\u0026logo=githubactions\u0026logoColor=white\u0026style=flat-square\n[github-action-test-link]: https://github.com/ant-design/pro-editor/actions/workflows/test.yml\n[github-action-test-shield]: https://img.shields.io/github/actions/workflow/status/ant-design/pro-editor/test.yml?color=1677FF\u0026label=test\u0026labelColor=black\u0026logo=githubactions\u0026logoColor=white\u0026style=flat-square\n[github-codespace-link]: https://codespaces.new/ant-design/pro-editor\n[github-codespace-shield]: https://github.com/codespaces/badge.svg\n[github-contributors-link]: https://github.com/ant-design/pro-editor/graphs/contributors\n[github-contributors-shield]: https://img.shields.io/github/contributors/ant-design/pro-editor?color=1677FF\u0026labelColor=black\u0026style=flat-square\n[github-forks-link]: https://github.com/ant-design/pro-editor/network/members\n[github-forks-shield]: https://img.shields.io/github/forks/ant-design/pro-editor?color=1677FF\u0026labelColor=black\u0026style=flat-square\n[github-issues-link]: https://github.com/ant-design/pro-editor/issues\n[github-issues-shield]: https://img.shields.io/github/issues/ant-design/pro-editor?color=1677FF\u0026labelColor=black\u0026style=flat-square\n[github-license-link]: https://github.com/ant-design/pro-editor/blob/main/LICENSE\n[github-license-shield]: https://img.shields.io/github/license/ant-design/pro-editor?color=1677FF\u0026labelColor=black\u0026style=flat-square\n[github-releasedate-link]: https://github.com/ant-design/pro-editor/releases\n[github-releasedate-shield]: https://img.shields.io/github/release-date/ant-design/pro-editor?color=1677FF\u0026labelColor=black\u0026style=flat-square\n[github-stars-link]: https://github.com/ant-design/pro-editor/network/stargazers\n[github-stars-shield]: https://img.shields.io/github/stars/ant-design/pro-editor?color=1677FF\u0026labelColor=black\u0026style=flat-square\n[npm-downloads-link]: https://www.npmjs.com/package/@ant-design/pro-editor\n[npm-downloads-shield]: https://img.shields.io/npm/dt/@ant-design/pro-editor?labelColor=black\u0026style=flat-square\u0026color=1677FF\n[npm-release-link]: https://www.npmjs.com/package/@ant-design/pro-editor\n[npm-release-shield]: https://img.shields.io/npm/v/@ant-design/pro-editor?color=1677FF\u0026labelColor=black\u0026logo=npm\u0026logoColor=white\u0026style=flat-square\n[pr-welcome-link]: https://github.com/ant-design/pro-editor/pulls\n[pr-welcome-shield]: https://img.shields.io/badge/%E2%9D%A4%EF%B8%8F%20PR%20WELCOME-%E2%86%92-1677FF?labelColor=black\u0026style=for-the-badge\n[prevew-1]: https://gw.alipayobjects.com/zos/kitchen/sytsa4%26R%26d/1.gif\n[prevew-2]: https://gw.alipayobjects.com/zos/kitchen/2DHhgqlXns/2.gif\n[prevew-3]: https://gw.alipayobjects.com/zos/kitchen/KKcuxwR0Pz/3.gif\n[prevew-4]: https://gw.alipayobjects.com/zos/kitchen/huuRPs3Kmk/4.gif\n[prevew-5]: https://gw.alipayobjects.com/zos/kitchen/SQaNFOJbK4/5.gif\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fant-design%2Fpro-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fant-design%2Fpro-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fant-design%2Fpro-editor/lists"}