salgum1114 / React Design Editor
Licence: mit
React Design Editor has started to developed direct manipulation of editable design tools like Powerpoint, We've developed it with reactjs, ant.design, fabricjs
Stars: ✭ 687
Programming Languages
javascript
184084 projects - #8 most used programming language
es6
455 projects
Projects that are alternatives of or similar to React Design Editor
Antd Visual Editor
ant-design 组件库实时可视化编辑器，实时生成 react 代码
Stars: ✭ 482 (-29.84%)
Mutual labels: editor, antd, ant-design
React Redux Antdesign Webpack Starter
react + redux + ant design + react-router 4 + webpack 4 starter
Stars: ✭ 44 (-93.6%)
Mutual labels: webpack4, antd, ant-design
Diagram Maker
A library to display an interactive editor for any graph-like data.
Stars: ✭ 2,086 (+203.64%)
Mutual labels: workflow, editor, canvas
React Admin
✨ react-admin system solution : react 后台管理系统解决方案
Stars: ✭ 5,975 (+769.72%)
Mutual labels: antd, ant-design
Ant Design Dark Theme
🌚 Dark theme variables of Ant Design
Stars: ✭ 431 (-37.26%)
Mutual labels: antd, ant-design
React Spa
React Redux，适合中大型规模应用开发，注释还算详细，配置有TypeScript、 CSS Modules、React-Router 4、koa接口mock请求等。接口埋点报错统一处理。
Stars: ✭ 327 (-52.4%)
Mutual labels: antd, ant-design
Sunflower
🦹 Process components for antd4 & antd3 by alipay industry technology
Stars: ✭ 441 (-35.81%)
Mutual labels: antd, ant-design
Jeecg Boot
「企业级低代码平台」前后端分离架构SpringBoot 2.x，SpringCloud，Ant Design&Vue，Mybatis-plus，Shiro，JWT。强大的代码生成器让前后端代码一键生成，无需写任何代码! 引领新的开发模式OnlineCoding->代码生成->手工MERGE，帮助Java项目解决70%重复工作，让开发更关注业务，既能快速提高效率，帮助公司节省成本，同时又不失灵活性。
Stars: ✭ 26,432 (+3747.45%)
Mutual labels: antd, ant-design
Create React App Antd
Use antd in create-react-app without ejecting ✨
Stars: ✭ 494 (-28.09%)
Mutual labels: antd, ant-design
Ng Alain
NG-ZORRO admin panel front-end framework (surge mirror https://ng-alain-doc.surge.sh)
Stars: ✭ 4,287 (+524.02%)
Mutual labels: antd, ant-design
Luban H5
[WIP]en: web design tool || mobile page builder/editor || mini webflow for mobile page. zh: 类似易企秀的H5制作、建站工具、可视化搭建系统.
Stars: ✭ 4,991 (+626.49%)
Mutual labels: editor, ant-design
Angular Editor Fabric Js
Drag-and-drop editor based on Fabricjs for Angular.io
Stars: ✭ 295 (-57.06%)
Mutual labels: editor, canvas
Ant Design Blazor
🌈A set of enterprise-class UI components based on Ant Design and Blazor WebAssembly.
Stars: ✭ 3,890 (+466.23%)
Mutual labels: antd, ant-design
React Design Editor
React Design Editor is a module for React, written in Javascript/Typescript which provides two primary features:
- Image Editor - Create images in React, draw diagrams and arrange compositions using the image editor and save the result to one of several export formats, provides functionality similar to Powerpoint.
- Business Process Modelling (BPM) - Design flowcharts and process workflows in React and export the model to JSON, which can be imported into the tool (load/save).
The module primarily uses the Ant Design, Fabric.js and React libraries, but a full list of required dependencies can be found below.
Try it out today - the project is being continually developed to support a variety of different functions.
Feature List
- [x] Add, remove, resize, reorder, clone, copy/paste and drag/drop elements
- [x] Drawing capability, with polygon, line, arrows and link support
- [x] Preview mode, tooltips, group/ungroup and zoom functionality
- [x] Upload (with drag/drop), import and export to JSON or image
- [x] Image cropping, Image filters, alignment, alignment guides
- [x] Snap to grid, context menu, animation and video element
- [x] Various icons in icon picker and fonts from Google Fonts (20)
- [x] HTML/CSS/JS Element, iFrame element
- [x] Animation support, with Fade / Bounce / Shake / Scaling / Rotation / Flash effects
- [x] Code Editor with HTML / CSS / JS / Preview
- [x] Various interaction modes, including grasp, selection, ctrl + drag grab
- [x] Multiple layouts, with fixed, responsive, fullscreen and grid modes
- [x] SVG, Chart and GIF elements
- [x] Undo/Redo support
- [ ] Wireframes - in development
- [ ] Multiple Map - in development
- [ ] Ruler - in development
Installation
Run npm install react-design-editor or yarn add react-design-editor
Getting Started
- Clone this Project with
git clone https://github.com/salgum1114/react-design-editor.git - Install dependencies with
npm installoryarn - Run the App with
npm startoryarn start - Open your web browser to
http://localhost:4000
Screenshots
Image Map Editor
1. Fixed Layout Mode
2. Responsive Layout Mode
3. Full Screen Layout Mode
4. Preview Mode
Workflow Editor
❤️ Sponsors and Backers 
Dependencies
| Dependency | License(s) |
|---|---|
| React | MIT |
| Ant Design | MIT |
| Fabric.js | MIT |
| MediaElement.js | MIT |
| React-Ace | MIT |
| interact.js | MIT |
| anime.js | MIT |
| Webpack 4 | MIT |
| Babel | MIT |
| fontawesome5 | Icons (CC BY 4.0), Fonts (SIL OFL 1.1), Code (MIT) |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].