Understand schema and values

QForm Builder manipulates two main pieces of data:

schema = form structure
values = runtime user data

Schema

The schema is an array of builder fields.

import type { FormBuilderSchema } from '@vevedh/qform-builder-layer/types'

const schema: FormBuilderSchema = [
  {
    $formkit: 'q-input',
    name: 'firstname',
    label: 'First name',
    validation: 'required',
  },
]

Values

Values are the submitted or edited runtime data.

import type { FormBuilderValues } from '@vevedh/qform-builder-layer/types'

const values: FormBuilderValues = {
  firstname: 'Hervé',
}

Builder with controlled state

<FormBuilder
  builder-id="schema-values-builder"
  v-model:schema="schema"
  v-model:values="values"
/>

Serialization

The layer includes serialization helpers to avoid common issues with functions, symbols, DOM nodes, File, Blob, Map, Set and circular structures.

This is important when storing schemas in localStorage, MongoDB or another persistence layer.

Recommended storage format

export interface StoredFormDefinition {
  id: string
  name: string
  schema: FormBuilderSchema
  initialValues?: FormBuilderValues
  version: number
  createdAt: string
  updatedAt: string
}

Best practice

Keep form definitions versioned. This makes migration easier when field options or rendering rules evolve.