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

往期精彩

相关推荐
共享家952735 分钟前
QT 初识
开发语言·qt
共享家952740 分钟前
QT文件解析与乱码问题
开发语言·qt
王嘉俊92544 分钟前
Qt 入门:构建跨平台 GUI 应用的强大框架
c语言·开发语言·c++·qt·入门·cpp
一枚前端小能手1 小时前
「周更第5期」实用JS库推荐:RxJS
前端·javascript·rxjs
小白学大数据1 小时前
Python爬虫技术:招标信息抓取与关键词过滤 (1)
开发语言·爬虫·python
江城开朗的豌豆1 小时前
拆解微信小程序的“积木盒子”:这些原生组件你都玩明白了吗?
前端·javascript·微信小程序
前端达人2 小时前
「React实战面试题」:React.memo为什么失效了?
前端·javascript·react.js·前端框架·ecmascript
江城开朗的豌豆2 小时前
嘿,别想那么复杂!我的第一个微信小程序长这样
前端·javascript·微信小程序
Irene19912 小时前
URLSearchParams :处理 URL 查询参数的接口
开发语言·前端·javascript
LFly_ice2 小时前
学习React-19-useDebugValue
javascript·学习·react.js