推荐6个开源可视化表单生成器

文章目录

一、前言

通常，可视化表单生成器包含两大核心组件：表单设计器和表单渲染器。

表单设计器负责提供直观的可视化界面，让用户能够方便地搭建表单，并生成对应的

JSON

配置文件。

表单渲染器则负责读取这些

JSON

配置，并将其转换成实际可用的表单界面。

二、

Formily

Formily

是一款面向中后台复杂场景的数据+协议驱动的表单框架，它也是阿里巴巴的统一表单解决方案。借助

Formily

可以完成复杂的表单页面需求，同时

Formily

提供的表单设计器可以快速搭建表单。

Github

：https://github.com/alibaba/formily

官网：https://formilyjs.org/zh-CN

**

Formily

设计器**：https://designable-antd.formilyjs.org/

三、

Variant Form

Variant Form

是一款高效的

Vue

低代码表单、工作流表单，包含表单设计器和表单渲染器，可视化设计，一键生成源码。它支持在

Vue 2

和

Vue 3

中使用，支持

Element UI

组件库。

预览效果：

**

Github

**：https://github.com/vform666/variant-form

官网：https://www.vform666.com/

**

vue2

版本**：http://120.92.142.115/

**

vue3

版本**：http://120.92.142.115:81/vform3/

四、

form-create

form-create

是一个可以通过

JSON

生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持 5 个

UI

框架，并且支持生成任何

Vue

组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。

**

Github

**：https://github.com/xaboy/form-create

官网：http://www.form-create.com/v2/

**

vue2

版本**：http://form-create.com/designer/

**

vue3

版本**：http://form-create.com/v3/designer?fr=github

五、

Everright-formEditor

Everright-formEditor

是一个开源的可视化低代码编辑器，只需简单的操作即可创建出表单，拥有灵活的交互界面，

PC

端依赖

Element Plus

，

Mobile

依赖

Vant

，内部有一套适配器，适配

Element

和

Vant

的组件。

逻辑控制器：

**

Github

**：https://github.com/Liberty-liu/Everright-formEditor

官网：https://everright.site/formEditor/introduction.html

示例：https://everright.site/demo/editor.html?layoutType=1&isEdit=1&lang=zh-cn

六、

form-generator

form-generator

是一款

Element UI

表单设计及代码生成器，可将生成的代码直接运行在基于

Element UI

的

Vue

项目中；也可导出

JSON

表单，使用配套的解析器将

JSON

解析成真实的表单。

**

Github

**：https://github.com/JakHuang/form-generator

示例：https://mrhj.gitee.io/form-generator/#/

七、

EpicDesigner

EpicDesigner

是一款功能强大、开箱即用的拖拽式低代码设计器。它基于

Vue3

开发，兼容多套

UI

组件库，除了基础的页面设计功能，

EpicDesigner

还提供了强大的扩展功能，可以让开发者根据自己的需求自由扩展和定制组件。此外，

EpicDesigner

使用

JSON

配置来生成页面，可帮助开发者快速生成页面，提高开发效率。它提供了两个重要组件：

e-designer

设计器和

e-builder

生成器。

**

Github

**：https://github.com/Kchengz/epic-designer

官网：https://kcz66.gitee.io/epic-designer/

**

element-plus

版本**：https://epic.kcz66.com/demo/element-plus/

**

antdv3

**：https://epic.kcz66.com/demo/antdv3/

**

naive-ui

**：https://epic.kcz66.com/demo/naive-ui/

八、最后

本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。顺手来个三连击，点赞👍收藏💖关注✨，一起加油☕