基于React 的组件可视化自由拖拽页面生成代码生成工具(开源)

mobile
pc
code

项目特点:

任意拖拽嵌套:通过组件预览面板拖拽组件,到设计面板实现任意嵌套,设计面板中的组件也可随意拖拽嵌套

实时预览:设计面板中会实时展示组件的属性效果和样式效果,并且与真实页面无异

DomTree展示:页面组件dom树的展示并实现dom实时追踪

可视化属性配置:结合React 特性和JS语法定制了可视化的组件属性配置,实现复杂数据结构的可视化配置

可视化样式配置:通过样式配置面板修改样式,实时在页面中显示样式效果

模板功能:可以选中局部或者整个页面做为可复用的模板,提高页面配置效率减少重复工作

组件约束:根据组件特性配置组件约束,减少组件间的错误嵌套和报错

预览与代码生成:可随时预览页面的真实效果,和页面的jsx代码与样式代码

组件库替换 :通过简单的配置可以对接任何React组件库

github地址:https://github.com/anye931123/react-visual-editor

在线预览:https://anye931123.gitee.io/react-visual-editor

你可能感兴趣的:(基于React 的组件可视化自由拖拽页面生成代码生成工具(开源))