Vue Low-Code Visual AI Form Designer FcDesigner v3.5 Released!

FcDesigner is a Vue-based low-code visual AI form designer that renders forms through data-driven approaches. You can quickly create forms by dragging and dropping, improving form development efficiency and saving developers' time. It is widely used in government systems, OA systems, ERP systems, e-commerce systems, process management, and other fields.

Source Code: Github | Gitee | Docs | Live Demo

Core Features

• Built-in form multi-language system, easily breaking language barriers.
• Provides 30+ common components, covering form components, layout components, auxiliary components, and other practical modules.
• Supports flexible extension of custom components and secondary development.
• Supports component style configuration, dynamically adjusting component size, color, spacing, and other style properties.
• Supports event interaction configuration, flexibly configuring component event response logic to implement complex interaction scenarios.
• Built-in AI form assistant, making form development faster, more stable, and smarter.
• Form outline, operation history, data entry, component generation, event configuration, form validation, grid layout, table layout, etc.

v3.5 Update Content

1. Field ID Supports Dropdown Cascading Selection

In the new version, field IDs now support dropdown cascading selection, enabling faster field association and mapping, reducing the error rate caused by manual input. For large business forms, configuration efficiency will be significantly improved.

2. Option Components Add Multiple Input Methods

Option-type components now have two new input modes: text input and JSON data input. Additionally, the layout of the option configuration area has been rearranged.

3. Outline Supports Drag-and-Drop Sorting

The outline list now supports drag-and-drop sorting. Developers can directly adjust component positions in the outline panel, and the system will synchronize the canvas structure in real time.

4. beforeUnmount Lifecycle Support

Added the beforeUnmount lifecycle for processing logic before a component is destroyed.

5. Designer Adds Header Slot

The top area of the designer now supports extension via slots, which can be used to extend brand information, quick action entries, or business buttons, making the designer more suitable for your usage scenarios.

6. Code Editor Enhancement: Added Code Hints

The code editor now includes API and code hint capabilities, reducing the memory burden when writing event functions or logic.

7. Feature Optimizations and Bug Fixes

✅ Added: Design rule export function

✅ Added: Support for quickly viewing the field of component configuration items

✅ Added: Left menu supports default collapsed state

✅ Added: Style supports background image configuration

✅ Added: Table layout adds table form style

✅ Optimized: Drag-in restriction function adds recursive validation

✅ Optimized: Style input interaction

✅ Optimized: Table form component functionality

Quick Start

Element Plus Version

npm install @form-create/designer@^3
npm install @form-create/element-ui@^3
npm install element-plus

import { createApp } from 'vue'
import FcDesigner from '@form-create/designer'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(FcDesigner)
app.use(FcDesigner.formCreate)
app.mount('#app')

<template>
  <fc-designer ref="designer" height="100vh" />
</template>

Ant Design Vue Version

npm install @form-create/antd-designer@^3
npm install @form-create/ant-design-vue@^3
npm install ant-design-vue

import { createApp } from 'vue'
import FcDesigner from '@form-create/antd-designer'
import antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'

const app = createApp(App)
app.use(antd)
app.use(FcDesigner)
app.use(FcDesigner.formCreate)
app.mount('#app')

<template>
  <fc-designer ref="designer" height="100vh" />
</template>

Vant Mobile Version

npm install @form-create/vant-designer@^3
npm install @form-create/element-ui@^3
npm install @form-create/vant@^3
npm install element-plus
npm install vant

import { createApp } from 'vue'
import FcDesignerMobile from '@form-create/vant-designer'
import ElementPlus from 'element-plus'
import vant from 'vant'
import 'vant/lib/index.css'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(vant)
app.use(FcDesignerMobile)
app.use(FcDesignerMobile.formCreate)
app.mount('#app')

<template>
  <fc-designer-mobile ref="designer" height="100vh" />
</template>

Welcome to Star the open-source project: github.com/xaboy/form-create