The Ultimate Editor UI Framework and Components
English · 简体中文 · Changelog . Report Bug · Request Feature
Important
This package is ESM only.
To install @ant-design/pro-editor, run the following command:
$ pnpm install @ant-design/pro-editorNote
By work correct with Next.js SSR, add transpilePackages: ['@ant-design/pro-editor'] to next.config.js. For example:
const nextConfig = {
transpilePackages: ['@ant-design/pro-editor', 'leva', 'zustand'],
};import { SmileOutlined } from '@ant-design/icons';
import { ActionIcon } from '@ant-design/pro-editor';
export default () => (
<ActionIcon
title={'Function button description'}
icon={<SmileOutlined />}
onClick={() => {
alert('Trigger action');
}}
/>
);Note
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.
Note
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.
Our Principles for ProEditor:
UI Framework and Frontend Component Solutions in the Editor Field:
Tip
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:
ProEditor is structured to facilitate these principles effectively.
Let's showcase some of ProEditor's signature components:
| DraggablePanel | ColumnList |
|---|---|
| For resizable and movable panels | A user-friendly sortable list based on column definitions |
| FreeCanvas | IconPicker |
| A limitless zoomable canvas akin to Sketch or Figma | An icon selection tool compatible with iconfont |
| Online Collaboration | |
| Multi-user capabilities wrapped in yjs and zustand store. | |
Note
|
Or clone it for local development: $ git clone https://github.com/ant-design/pro-editor.git
$ cd pro-editor
$ pnpm install
$ pnpm dev? ContributingImportant 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:
Every contribution, big or small, is celebrated. Join us in our mission to refine and elevate the world of open-source enterprise UI components. ?
?️ Ecosystem
LicenseCopyright © 2023 - present AFX & Ant Digital. Expand
Additional Information
Related Applications
Recommended for You
Related Information
All
| |||||
|---|---|---|---|---|---|