@jxyszb/jxy-form-designer

A schema-driven form designer and runtime for Vue 3, Pinia, and Element Plus.

Features

• Drag-and-drop form design with fields, titles, and grid layouts.
• Runtime rendering from JSON Schema.
• Static, dictionary, and API data sources.
• Validation, field reactions, import/export, and preview.
• Host adapters for request clients, file upload, rich-text editors, and custom fields.

Installation

npm install @jxyszb/jxy-form-designer

Peer dependencies:

vue >=3.2.45 <4
pinia >=2.0.22 <3
element-plus >=2.7.0 <3

Setup

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import '@jxyszb/jxy-form-designer/style.css';
import { createJxyFormPlugin } from '@jxyszb/jxy-form-designer';

const app = createApp(App);
app.use(createPinia());
app.use(ElementPlus);
app.use(createJxyFormPlugin());
app.mount('#app');

Dynamic data sources, uploads, and rich-text fields can use host adapters:

app.use(createJxyFormPlugin({
  request: requestClient,
  components: {
    fileUpload: FileUpload,
    editor: RichTextEditor
  }
}));

Usage

<script setup>
import { ref } from 'vue';
import {
  JXYFormDesigner,
  JXYFormRuntime,
  createDefaultSchema
} from '@jxyszb/jxy-form-designer';

const designerRef = ref();
const schema = ref(createDefaultSchema());
const formData = ref({});

function handleSaveDraft({ schema: draftSchema }) {
  localStorage.setItem('business-form-draft', JSON.stringify(draftSchema));
}

async function handlePublish({ schema: publishedSchema, warnings }) {
  await publishFormSchema(publishedSchema);
  console.log('publish warnings', warnings);
}

function handlePublishInvalid({ errors }) {
  console.warn('schema cannot be published', errors);
}
</script>

<template>
  <JXYFormDesigner
    ref="designerRef"
    save-draft-button-label="保存草稿"
    :show-save-draft-button="true"
    publish-button-label="发布"
    :show-publish-button="true"
    @save-draft="handleSaveDraft"
    @publish="handlePublish"
    @publish-invalid="handlePublishInvalid"
  />
  <JXYFormRuntime v-model="formData" :schema="schema" />
</template>

Designer emits independent, normalized Schema snapshots. It does not persist drafts or published schemas by default. Publish validation remains inside the package; the host owns storage, API calls, loading, and result messages.

Schema utilities are also available from @jxyszb/jxy-form-designer/schema. The testing subpath contains demo and mock helpers and should not be used by production code.

Documentation

• Field suffix extension
• Designer developer guide

License

MIT