React可视化组件自由拖拽生成页面与代码工具

#1

mobile

pc

Code

特性:

  • :fire: 任意拖拽嵌套 :通过组件预览面板拖拽组件,到设计面板实现任意嵌套,设计面板中的组件也可随意拖拽嵌套
  • :computer: 实时预览 :设计面板中会实时展示组件的属性效果和样式效果,并且与真实页面无异
  • :christmas_tree: DomTree展示 :页面组件dom树的展示并实现dom实时追踪
  • :gift: 可视化属性配置 :结合React 特性和JS语法定制了可视化的组件属性配置,实现复杂数据结构的可视化配置
  • :fireworks: 可视化样式配置 :通过样式配置面板修改样式,实时在页面中显示样式效果
  • :video_camera: 模板功能 :可以选中局部或者整个页面做为可复用的模板,提高页面配置效率减少重复工作
  • :lock: 组件约束 :根据组件特性配置组件约束,减少组件间的错误嵌套和报错
  • :eyeglasses: 预览与代码生成 :可随时预览页面的真实效果,和页面的jsx代码与样式代码
  • :dvd: 组件库替换 :通过简单的配置可以对接任何React组件库
    源码地址
    在线预览