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

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

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

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

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

什么是Puck.js

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

对于一些简单的搭建需求,我们使用puck.js完全可以实现。它的使用方式也很简单,我们先安装一下 @measured/puck

然后就可以在项目中使用啦:

javascript 复制代码
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以及最新的进展,欢迎大家交流反馈,如果你也有好的想法或者产品,欢迎在留言区交流~

往期精彩

相关推荐
薄雾晚晴2 分钟前
Rspack 实战:用 image-minimizer-webpack-plugin 做图片压缩,优化打包体积
javascript·vue.js
时序数据说19 分钟前
国内开源时序数据库IoTDB介绍
大数据·数据库·物联网·开源·时序数据库·iotdb
kymjs张涛25 分钟前
零一开源|前沿技术周刊 #15
前端·javascript·面试
古夕27 分钟前
Vue3 + vue-query 的重复请求问题解决记录
前端·javascript·vue.js
不知名程序员第二部27 分钟前
前端-业务-架构
前端·javascript·代码规范
Bug生产工厂28 分钟前
React支付组件设计与封装:从基础组件到企业级解决方案
前端·react.js·typescript
华仔啊28 分钟前
面试官:请解释一下 JS 的 this 指向。别慌,看完这篇让你对答如流!
前端·javascript
小高00730 分钟前
💥💥💥前端“隐藏神技”:15 个高效却鲜为人知的 Web API 大起底
前端·javascript
flyliu31 分钟前
再再次去搞懂事件循环
前端·javascript
EQ-雪梨蛋花汤39 分钟前
【Unity笔记】Unity 编辑器扩展:打造一个可切换 Config.assets 的顶部菜单插件
unity·编辑器·游戏引擎