Puck.js,一款基于React的开源可视化编辑器

hi, 大家好, 我是徐小夕. 

之前一直在社区分享零代码&低代码的技术实践，也陆陆续续设计并开发了多款可视化搭建产品，比如：

• H5-Dooring（页面可视化搭建平台）

• V6.Dooring（可视化大屏搭建平台）

• 橙子试卷（表单搭建引擎）

• Flowmix/Docx 多模态文档编辑器: 让文档不止于文档
  

最近也一直在研究可视化搭建相关的技术实践, 发现了一款非常有价值的开源项目,我们可以使用它轻松构建可视化搭建编辑器，这款开源项目就是——puck.js。

github地址：https://github.com/measuredco/puck

什么是Puck.js

puck.js 是一款基于react实现的开箱即用可视化拖拽组件库。我们可以使用它轻松构建二维网格布局的可视化拖拽编辑器，它的官网也提供了一个比较完整的案例，方便大家了解它的功能：

对于一些简单的搭建需求，我们使用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>,
    },
  },
};

效果如下：

这里我总结一下它的几个核心特点：

• 支持组件扩展

• 支持外部数据源

• 支持React服务端组件

• 支持多列布局

• 支持动态字段

• 支持组件属性配置

最近我们H5-Dooring零代码编辑器也在持续更新，目前已支持多布局模式和页面权限控制能力，以及数据埋点分析：

大家感兴趣也可以参考体验一下：

https://dooring.vip

后期还会持续迭代更新H5-Dooring以及最新的进展，欢迎大家交流反馈，如果你也有好的想法或者产品，欢迎在留言区交流~

往期精彩

• 零代码+AI的阶段性复盘

• 文档引擎+AI可视化打造下一代文档编辑器

• 爆肝1000小时, Dooring零代码搭建平台3.5正式上线

• 从零打造一款基于Nextjs+antd5.0的中后台管理系统