FormBuilder and FormViewer reference

FormBuilder

Props

Prop	Type	Purpose
builder-id	string	Stable id used for multi-instance isolation.
schema	FormBuilderSchema	Controlled form schema.
values	FormBuilderValues	Controlled runtime values.
settings	Partial<FormBuilderSettings>	Form settings.
readonly	boolean	Disable editing behavior.
disabled	boolean	Disable interactions.
autosave	boolean	Enable local autosave.
storage-key	string	Custom storage key.
title	string	Optional title.
subtitle	string	Optional subtitle.
height	string	Builder height.
preview-mode	FormBuilderPreviewMode	Preview display mode.
drawer-behavior	FormBuilderDrawerBehavior	Drawer behavior.
labels	Partial<FormBuilderLabels>	UI labels override.

v-model

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

Events

update:schema
update:values
update:settings
save
reset
cancel
submit
field-add
field-update
field-remove
field-copy
field-select
field-move
schema-import
schema-export
error

API exposed by ref

export interface FormBuilderPublicApi {
  save: () => void
  reset: () => void
  setSchema: (schema: FormBuilderSchema) => void
  getSchema: () => FormBuilderSchema
  setValues: (values: FormBuilderValues) => void
  getValues: () => FormBuilderValues
  importSchema: (schema: FormBuilderSchema) => void
  exportSchema: () => FormBuilderSchema
}

FormViewer

Props

Prop	Type	Purpose
form-fields	FormBuilderSchema	Schema to render.
model-value	FormBuilderValues	Runtime values.
readonly	boolean	Render as read-only.

v-model

<FormViewer
  :form-fields="schema"
  v-model="values"
/>

submit event

<FormViewer
  :form-fields="schema"
  v-model="values"
  @submit="handleSubmit"
/>

Useful types for a host app

import type {
  FormBuilderSchema,
  FormBuilderValues,
  FormBuilderSavePayload,
  FormBuilderPublicApi,
} from '@vevedh/qform-builder-layer/types'