hi, 大家好, 我是徐小夕.
徐小夕【知乎专栏作家】掘金签约作者，定期分享前端工程化，可视化，企业实战项目知识，深度复盘企业中经常遇到的500+技术问题解决方案。【关注趣谈前端，技术路上不迷茫】
最近也一直在研究可视化搭建相关的技术实践, 发现了一款非常有价值的开源项目,我们可以使用它轻松构建可视化搭建编辑器，这款开源项目就是——puck.js。
H5-Dooring
github地址：https://github.com/measuredco/puck
什么是Puck.js
H5-Dooring
puck.js 是一款基于react实现的开箱即用可视化拖拽组件库。我们可以使用它轻松构建二维网格布局的可视化拖拽编辑器，它的官网也提供了一个比较完整的案例，方便大家了解它的功能：
H5-Dooring
对于一些简单的搭建需求，我们使用puck.js完全可以实现。它的使用方式也很简单，我们先安装一下 @measured/puck
然后就可以在项目中使用啦：
import { DropZone } from "@measured/puck"; const config = { components: { Example: { render: () => { return ( <div> <DropZone zone="my-content" /> </div> ); }, }, Card: { render: () => <div>Hello, world</div>, }, },};效果如下：
H5-Dooring
这里我总结一下它的几个核心特点：
支持组件扩展支持外部数据源支持React服务端组件支持多列布局支持动态字段支持组件属性配置最近我们H5-Dooring零代码编辑器也在持续更新，目前已支持多布局模式和页面权限控制能力，以及数据埋点分析：
H5-Dooring
大家感兴趣也可以参考一下。
后期还会持续迭代更新H5-Dooring以及最新的进展，欢迎大家交流反馈，如果你也有好的想法或者产品，欢迎在留言区交流~
