xinnian999/vue-form-craft

Vue Form Craft – Quick Overview

What it is: A Vue 3‑based library that lets you design and render forms from a JSON schema. It includes a visual drag‑and‑drop form builder (FormDesign) and a runtime renderer (FormRender). The package also offers optional AI assistance for generating or editing the schema.

Key capabilities

• Visual designer – drag components to create a JsonSchema.
• Renderer – FormRender consumes that schema to produce a working form.
• Complex logic – field‑level expressions, data/attribute linking, nested arrays (FormList).
• Validation – built‑in rules (required, min/max, pattern, custom JS).
• AI‑assisted schema creation – plug in any LLM endpoint via a simple ai function.
• UI adapters – works with Element Plus out of the box; Ant Design Vue can be swapped in.

How you’d use it in a project

1. Install the npm package:

   npm i vue-form-craft
   

2. Register globally, optionally choosing a UI library:

   import ElementPlus from 'element-plus'
   import { createApp } from 'vue'
   import VueFormCraft from 'vue-form-craft'
   import 'element-plus/dist/index.css'
   const app = createApp(App)
   app.use(ElementPlus)
   app.use(VueFormCraft) // or app.use(VueFormCraft, { ui: AntdAdapter })
   

3. Render a form with FormRender by passing a schema object and binding v-model to your data.
4. Or drop the visual builder FormDesign into a page to let end‑users create forms on the fly.
5. To enable AI, provide an ai function that calls your LLM endpoint; the library will forward prompts and expect the generated schema text back.

Project layout

• lib – source of the published vue-form-craft package.
• play – a playground for local development.
• docs – VitePress site with usage docs and a live demo.

Who it’s for Front‑end teams building admin panels, internal tools, or any Vue 3 app that needs dynamic, schema‑driven forms—especially when you want a low‑code visual editor and optional AI help.

Live demo & docs

• Demo: https://form.elin521.cn/form-design.html
• Docs: https://form.elin521.cn/